From 3b0f3f8aaa3de4858f69e04919ca8c9d4c944aac Mon Sep 17 00:00:00 2001 From: Corinne PAULVE Date: Mon, 15 Jul 2024 16:20:08 +0200 Subject: [PATCH 1/3] 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 --- .../styling/builders/style-extractor/index.ts | 1 - .../scss/theming/otter-theme/_functions.scss | 3 ++- .../scss/theming/otter-theme/_material.scss | 4 ++++ .../styling-devtools.message.service.ts | 22 ++++++++++++++----- 4 files changed, 22 insertions(+), 8 deletions(-) diff --git a/packages/@o3r/styling/builders/style-extractor/index.ts b/packages/@o3r/styling/builders/style-extractor/index.ts index ea295e6f8d..30952863ca 100644 --- 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 { 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 index ef10b6aefb..ab86348573 100644 --- 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 index 3b454396d9..23ad911c6a 100644 --- 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 index 9c24f066d5..98981c5b14 100644 --- 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,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 }); } From 82129d85f914b52faeb0cbf0758f7c4cdb8dc018 Mon Sep 17 00:00:00 2001 From: cpaulve-1A <110408057+cpaulve-1A@users.noreply.github.com> Date: Mon, 15 Jul 2024 19:24:05 +0200 Subject: [PATCH 2/3] Update packages/@o3r/styling/src/devkit/styling-devtools.message.service.ts Co-authored-by: Florian PAUL <110407799+fpaul-1A@users.noreply.github.com> --- .../styling/src/devkit/styling-devtools.message.service.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@o3r/styling/src/devkit/styling-devtools.message.service.ts b/packages/@o3r/styling/src/devkit/styling-devtools.message.service.ts index 98981c5b14..7ba81726d7 100644 --- a/packages/@o3r/styling/src/devkit/styling-devtools.message.service.ts +++ b/packages/@o3r/styling/src/devkit/styling-devtools.message.service.ts @@ -21,8 +21,8 @@ const getCSSRulesAppliedOnRoot = () => Array.from(document.styleSheets) 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.`); + } catch (err) { + console.debug(`Could not access to stylesheet ${styleSheet.href}. This might be due to CORS issues.`, err); } return acc.concat( From 2a673407cda99e70cd758ac925f287c3a363720b Mon Sep 17 00:00:00 2001 From: cpaulve-1A <110408057+cpaulve-1A@users.noreply.github.com> Date: Tue, 16 Jul 2024 09:10:17 +0200 Subject: [PATCH 3/3] Update packages/@o3r/styling/src/devkit/styling-devtools.message.service.ts Co-authored-by: Kilian Panot --- .../styling/src/devkit/styling-devtools.message.service.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/@o3r/styling/src/devkit/styling-devtools.message.service.ts b/packages/@o3r/styling/src/devkit/styling-devtools.message.service.ts index 7ba81726d7..0654b63e59 100644 --- a/packages/@o3r/styling/src/devkit/styling-devtools.message.service.ts +++ b/packages/@o3r/styling/src/devkit/styling-devtools.message.service.ts @@ -22,7 +22,10 @@ const getCSSRulesAppliedOnRoot = () => Array.from(document.styleSheets) try { rules = styleSheet.cssRules || styleSheet.rules; } catch (err) { - console.debug(`Could not access to stylesheet ${styleSheet.href}. This might be due to CORS issues.`, 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(