diff --git a/packages/@o3r/styling/builders/style-extractor/helpers/css-variable.extractor.ts b/packages/@o3r/styling/builders/style-extractor/helpers/css-variable.extractor.ts index e156ac761e..d8caa50b40 100644 --- a/packages/@o3r/styling/builders/style-extractor/helpers/css-variable.extractor.ts +++ b/packages/@o3r/styling/builders/style-extractor/helpers/css-variable.extractor.ts @@ -135,8 +135,19 @@ export class CssVariableExtractor { const cleanedUrl = url.replace('~', ''); const moduleName = CssVariableExtractor.getPackageName(cleanedUrl); - const packagePath = path.dirname(require.resolve(`${moduleName}/package.json`)); - const computedPathUrl = path.join(packagePath, cleanedUrl.replace(moduleName, '')); + const subEntry = cleanedUrl.replace(moduleName, '.'); + const packageJsonPath = require.resolve(`${moduleName}/package.json`); + const packagePath = path.dirname(packageJsonPath); + const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, { encoding: 'utf-8' })); + let computedPathUrl; + if (subEntry !== '.' && packageJson.exports?.[subEntry]) { + computedPathUrl = path.join(packagePath, packageJson.exports[subEntry].sass || + packageJson.exports[subEntry].scss || packageJson.exports[subEntry].css || + packageJson.exports[subEntry].default); + } + else { + computedPathUrl = path.join(packagePath, cleanedUrl.replace(moduleName, '')); + } const fileUrl = pathToFileURL(computedPathUrl); this.cache[url] = fileUrl; return fileUrl; diff --git a/packages/@o3r/styling/scss/theming/_functions.scss b/packages/@o3r/styling/scss/theming/_functions.scss index 3e5b08e564..7a03e0983a 100644 --- a/packages/@o3r/styling/scss/theming/_functions.scss +++ b/packages/@o3r/styling/scss/theming/_functions.scss @@ -13,11 +13,11 @@ /// @example /// @use '@o3r/styling' as o3r /// $my-scss-var: o3r.variable('my-scss-var', '#fff', (description: 'My scss variable', tags: 'my-scss-var')); -@function variable($name, $value: null, $details: null) { +@function variable($name, $value: null, $details: null, $metadata-black-list-pattern: ()) { $key: utils-functions.get-var-key($name); $varName: '--#{$key}'; - $logged: utils-functions.log-variable($key, $value, $details); + $logged: utils-functions.log-variable($key, $value, $details, $metadata-black-list-pattern); $res: if($value != null, 'var(#{$varName}, #{$value})', 'var(#{$varName})'); @return #{$res}; } @@ -32,8 +32,8 @@ /// @example /// @use '@o3r/styling' as o3r /// $my-scss-var: o3r.var('my-scss-var', '#fff', (description: 'My scss variable', tags: 'my-scss-var')); -@function var($name, $value: null, $details: null) { - @return variable($name, $value, $details); +@function var($name, $value: null, $details: null, $metadata-black-list-pattern: ()) { + @return variable($name, $value, $details, $metadata-black-list-pattern); } /// Returns true if the given map is an Otter Theme variable diff --git a/packages/@o3r/styling/scss/theming/_mixins.scss b/packages/@o3r/styling/scss/theming/_mixins.scss index 5c7eaa7e61..44995240da 100644 --- a/packages/@o3r/styling/scss/theming/_mixins.scss +++ b/packages/@o3r/styling/scss/theming/_mixins.scss @@ -4,20 +4,20 @@ @use '../utils/functions' as utils-functions; /// @access private -@mixin _apply-theme($o3r-theme, $root-name, $details: (tags: ('theme'))) { +@mixin _apply-theme($o3r-theme, $root-name, $details: (tags: ('theme')), $metadata-black-list-pattern: ()) { @if (meta.type-of($o3r-theme) != map) { - @include define-var($root-name, $o3r-theme, $details); + @include define-var($root-name, $o3r-theme, $details, $metadata-black-list-pattern); } @else { @if (theme-functions.is-variable($o3r-theme)) { @if (map.has-key($o3r-theme, details)) { - @include _apply-theme(map.get($o3r-theme, value), $root-name, map.get($o3r-theme, details)); + @include _apply-theme(map.get($o3r-theme, value), $root-name, map.get($o3r-theme, details), $metadata-black-list-pattern); } @else { - @include _apply-theme(map.get($o3r-theme, value), $root-name); + @include _apply-theme(map.get($o3r-theme, value), $root-name, $details, $metadata-black-list-pattern); } } @else { @each $key, $value in $o3r-theme { $new-key: if($root-name != '', '#{$root-name}-#{$key}', $key); - @include _apply-theme($value, $new-key); + @include _apply-theme($value, $new-key, $details, $metadata-black-list-pattern); } } } @@ -26,9 +26,9 @@ /// Apply an Otter theme to your application /// @access public /// @param {@see @link https://github.com/AmadeusITGroup/otter/blob/main/docs/styling/THEME.md#technical-structure-advance} $o3r-theme Otter theme -@mixin apply-theme($o3r-theme: ()) { +@mixin apply-theme($o3r-theme: (), $metadata-black-list-pattern: ('_mat-theming-internal')) { :root { - @include _apply-theme($o3r-theme, ''); + @include _apply-theme($o3r-theme, '', $metadata-black-list-pattern: $metadata-black-list-pattern); } } @@ -68,11 +68,11 @@ /// // Override the metadata of an existing "--my-scss-var" variable /// @include o3r.define-var('--my-scss-var', null, (description: 'My scss variable')) /// } -@mixin define-var($name, $value, $details) { +@mixin define-var($name, $value, $details, $metadata-black-list-pattern: ()) { $key: utils-functions.get-var-key($name); $varName: '--#{$key}'; - $logged: utils-functions.log-variable($key, $value, $details); + $logged: utils-functions.log-variable($key, $value, $details, $metadata-black-list-pattern); @if ($value != null) { #{$varName}: #{$value}; } @else { @@ -97,6 +97,6 @@ /// :root { /// @include o3r.var('my-scss-var', '#fff') /// } -@mixin var($name, $value, $details) { - @include define-var($name, $value, $details) +@mixin var($name, $value, $details, $metadata-black-list-pattern: ()) { + @include define-var($name, $value, $details, $metadata-black-list-pattern) } diff --git a/packages/@o3r/styling/scss/utils/_functions.scss b/packages/@o3r/styling/scss/utils/_functions.scss index 54e6f574ba..1d963bfa71 100644 --- a/packages/@o3r/styling/scss/utils/_functions.scss +++ b/packages/@o3r/styling/scss/utils/_functions.scss @@ -72,9 +72,18 @@ $test-mode-enabled: false !default; /// Report variable creation for metadata /// @access private -@function log-variable($name, $value: null, $details: null) { +@function log-variable($name, $value: null, $details: null, $metadata-black-list-pattern: ()) { $metadata-debug: false !default; - @if (meta.function-exists('metadata-report')) { + $is-blacked-listed-property: false; + + @if list.length($metadata-black-list-pattern) > 0 { + @for $i from 1 to list.length($metadata-black-list-pattern) + 1 { + $pattern: list.nth($metadata-black-list-pattern, $i); + $is-blacked-listed-property: $is-blacked-listed-property or string.index($name, $pattern) != null; + } + } + + @if (meta.function-exists('metadata-report') and not $is-blacked-listed-property) { $metadata-debug: metadata-report($name, $value, $details); } @return $metadata-debug;