fix: missing css variables in chrome dev-tool (#1967)

## Proposed change Do not remove css variable name from metadata extracted as it is used in the devtools Do not fail on third party css scripts Do not create variable for css var details
AmadeusITGroup · Jul 16, 2024 · c110874 · c110874
2 parents 0ef7bcc + d38cd03
commit c110874
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git a/packages/@o3r/styling/builders/style-extractor/index.ts b/packages/@o3r/styling/builders/style-extractor/index.ts
@@ -92,7 +92,6 @@ export default createBuilder(createBuilderWithMetricsIfInstalled<StyleExtractorB
       cssVarList
         .forEach((item) => {
           acc.variables[item.name] = item;
-          delete (acc.variables[item.name] as any).name;
         });
       return acc;
     }, previousMetadata);

diff --git a/packages/@o3r/styling/scss/theming/otter-theme/_functions.scss b/packages/@o3r/styling/scss/theming/otter-theme/_functions.scss
@@ -17,7 +17,8 @@
 
     @each $key, $value in $meta-theme {
       $new-key: if($root-name != '', '#{$root-name}-#{$key}', $key);
-      $new-value: _meta-theme-to-otter($value, $new-key);
+      // We do not extract the metadata as (variable, value) pair
+      $new-value: if($key != details, _meta-theme-to-otter($value, $new-key), $value);
       $ret: map.merge($ret, ($key: $new-value));
     }
 

diff --git a/packages/@o3r/styling/scss/theming/otter-theme/_material.scss b/packages/@o3r/styling/scss/theming/otter-theme/_material.scss
@@ -141,6 +141,10 @@
     @return $meta-theme;
   }
 
+  @if (map.has-key($meta-theme, value) and map.has-key($meta-theme, details)) {
+    @return _meta-theme-to-material(map.get($meta-theme, value), $root-name, $enable-css-var);
+  }
+
   @else {
     $ret: $meta-theme;
 

diff --git a/packages/@o3r/styling/src/devkit/styling-devtools.message.service.ts b/packages/@o3r/styling/src/devkit/styling-devtools.message.service.ts
@@ -17,11 +17,23 @@ const isStylingMessage = (message: any): message is AvailableStylingMessageConte
 
 const getCSSRulesAppliedOnRoot = () => Array.from(document.styleSheets)
   .reverse()
-  .reduce((acc: CSSStyleRule[], styleSheet) => acc.concat(
-    Array.from(styleSheet.cssRules || styleSheet.rules)
-      .reverse()
-      .filter((rule): rule is CSSStyleRule => rule instanceof CSSStyleRule && /\b:root\b/.test(rule.selectorText))
-  ), []);
+  .reduce((acc: CSSStyleRule[], styleSheet) => {
+    let rules;
+    try {
+      rules = styleSheet.cssRules || styleSheet.rules;
+    } catch (err) {
+      console.debug(`Could not access to stylesheet ${styleSheet.href}. This might be due to network issues, please check:
+- network connectivity
+- CORS setup
+- granted access to the stylesheet`, err);
+    }
+
+    return acc.concat(
+      Array.from(rules || [])
+        .reverse()
+        .filter((rule): rule is CSSStyleRule => rule instanceof CSSStyleRule && /\b:root\b/.test(rule.selectorText))
+    );
+  }, []);
 
 const getCSSVariableValueInCSSStyleDeclaration = (variableName: string, style: CSSStyleDeclaration) =>
   style.getPropertyValue(variableName).trim();
@@ -65,9 +77,10 @@ export class StylingDevtoolsMessageService implements OnDestroy {
 
   private async sendMetadata() {
     const metadata = await this.stylingDevTools.getStylingMetadata(this.options.stylingMetadataPath);
+    const cssRules = getCSSRulesAppliedOnRoot();
     const variables = Object.values(metadata.variables).map((variable) => ({
       ...variable,
-      runtimeValue: getCSSVariableValue(`--${variable.name}`, getCSSRulesAppliedOnRoot())
+      runtimeValue: getCSSVariableValue(`--${variable.name}`, cssRules)
     }));
     this.sendMessage('getStylingVariable', { variables });
   }