[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>
Mengdi Chen committed
Mar 10, 2023 at 15:43 UTC
a22bd995c5bee6f191bb3261ee721c2094344492
1 file changed
+16
-7
packages/react-devtools-shared/src/backend/StyleX/utils.js
+16
-7
@@ -67,7 +67,10 @@ function crawlObjectProperties(
67
// Special case; this key is the name of the style's source/file/module.
68
sources.add(key);
69
} else {
70
- resolvedStyles[key] = getPropertyValueForStyleName(value);
70
+ const propertyValue = getPropertyValueForStyleName(value);
71
+ if (propertyValue != null) {
72
+ resolvedStyles[key] = propertyValue;
73
+ }
74
}
75
} else {
76
const nestedStyle = {};
@@ -90,13 +93,19 @@ function getPropertyValueForStyleName(styleName: string): string | null {
93
const styleSheet = ((document.styleSheets[
94
styleSheetIndex
95
]: 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
+
104
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);
109
const {cssText, selectorText, style} = rule;
110
111
if (selectorText != null) {