fix: missing css variables in chrome dev-tool

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);

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));
     }
 

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;
 

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 });
   }