Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: resolve css subentry path in extract-style #1314

Merged
merged 2 commits into from
Feb 6, 2024
Merged

fix: resolve css subentry path in extract-style #1314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4949db9
fix: resolve css subentry path in extract-style
cpaulve-1A Feb 5, 2024
51bbdc8
Update packages/@o3r/styling/scss/theming/_mixins.scss
cpaulve-1A Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions packages/@o3r/styling/builders/style-extractor/helpers/css-variable.extractor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions packages/@o3r/styling/scss/theming/_functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
}
Expand All @@ -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
Expand Down
22 changes: 11 additions & 11 deletions packages/@o3r/styling/scss/theming/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -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 {
Expand All @@ -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)
}
13 changes: 11 additions & 2 deletions packages/@o3r/styling/scss/utils/_functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading