Skip to content

Commit a22bd99

Browse files
[DevTools] prevent StyleX plugin from throwing when inspecting CSS (#26364)
## Summary An error might happen when we try to read the CSS rules, but the stylesheet does not allow so (often happens on production). Before: <img width="713" alt="image" src="https://user-images.githubusercontent.com/1001890/224376546-024f7a32-d314-4dd1-9333-7e47d96a2b7c.png"> After: <img width="504" alt="image" src="https://user-images.githubusercontent.com/1001890/224376426-964a33c4-0677-4a51-91c2-74074e4dde63.png"> ## How did you test this change? Built a fb version and tested locally (see above screenshot) --------- Co-authored-by: Hendrik Liebau <mail@hendrik-liebau.de>
1 parent be353d2 commit a22bd99

File tree

1 file changed

+16
-7
lines changed
  • packages/react-devtools-shared/src/backend/StyleX

1 file changed

+16
-7
lines changed

packages/react-devtools-shared/src/backend/StyleX/utils.js

+16-7
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,10 @@ function crawlObjectProperties(
6767
// Special case; this key is the name of the style's source/file/module.
6868
sources.add(key);
6969
} else {
70-
resolvedStyles[key] = getPropertyValueForStyleName(value);
70+
const propertyValue = getPropertyValueForStyleName(value);
71+
if (propertyValue != null) {
72+
resolvedStyles[key] = propertyValue;
73+
}
7174
}
7275
} else {
7376
const nestedStyle = {};
@@ -90,13 +93,19 @@ function getPropertyValueForStyleName(styleName: string): string | null {
9093
const styleSheet = ((document.styleSheets[
9194
styleSheetIndex
9295
]: any): CSSStyleSheet);
93-
// $FlowFixMe Flow doesn't konw about these properties
94-
const rules = styleSheet.rules || styleSheet.cssRules;
95-
// $FlowFixMe `rules` is mixed
96+
let rules: CSSRuleList | null = null;
97+
// this might throw if CORS rules are enforced https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface
98+
try {
99+
rules = styleSheet.cssRules;
100+
} catch (_e) {
101+
continue;
102+
}
103+
96104
for (let ruleIndex = 0; ruleIndex < rules.length; ruleIndex++) {
97-
// $FlowFixMe `rules` is mixed
98-
const rule = rules[ruleIndex];
99-
// $FlowFixMe Flow doesn't konw about these properties
105+
if (!(rules[ruleIndex] instanceof CSSStyleRule)) {
106+
continue;
107+
}
108+
const rule = ((rules[ruleIndex]: any): CSSStyleRule);
100109
const {cssText, selectorText, style} = rule;
101110

102111
if (selectorText != null) {

0 commit comments

Comments
 (0)