fix: metadata styling extraction miss variables

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

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,20 @@ 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 {
+      console.debug(`Could not access to stylesheet ${styleSheet.href}. This might be due to CORS issues.`);
+    }
+
+    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 +74,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 });
   }