Skip to content

Commit 2cdc821

Browse files
authored
fix: issue with sass mixed-decls deprecation (#4098)
1 parent 56d7892 commit 2cdc821

File tree

6 files changed

+14
-13
lines changed

6 files changed

+14
-13
lines changed

packages/components/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"build-components": "npm-run-all build:mitosis build-components:post build-components:docs",
1919
"build-components:docs": "npm run build:cem -w @db-ux/wc-core-components",
2020
"build-components:post": "tsx scripts/post-build/index.ts",
21-
"build-style:01_sass": "sass src:build --no-source-map --load-path=node_modules/ --load-path=../../node_modules/",
21+
"build-style:01_sass": "sass src:build --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ --fatal-deprecation=mixed-decls",
2222
"build-style:02_postcss": "postcss build/**/*.css --replace",
2323
"build:mitosis": "mitosis build -c configs/mitosis.config.cjs",
2424
"compile:angular": "mitosis build -c configs/angular/mitosis.config.cjs && tsx scripts/exec/angular.ts && cpr ../../output/tmp/angular/src ../../output/angular/src -o",

packages/components/src/components/switch/switch.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@ $checked-active-transition-size: calc(
3636
}
3737

3838
.db-switch {
39-
@include form-components.set-default-check-element(switch);
40-
4139
user-select: none;
4240

41+
@include form-components.set-default-check-element(switch);
42+
4343
// This is needed when clicking on the label instead of the input
4444
@include helpers.active {
4545
> input {
@@ -53,8 +53,6 @@ $checked-active-transition-size: calc(
5353

5454
@extend %db-overwrite-font-size-sm;
5555

56-
@include icons.set-icon("cross", "after");
57-
5856
appearance: none;
5957
inline-size: calc(
6058
#{form-components.$font-size-height} * 2 + #{$switch-fixed-padding}
@@ -68,6 +66,8 @@ $checked-active-transition-size: calc(
6866
background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
6967
border-radius: variables.$db-border-radius-full;
7068

69+
@include icons.set-icon("cross", "after");
70+
7171
&::after {
7272
visibility: hidden;
7373
align-self: center;

packages/components/src/styles/internal/_form-components.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -282,11 +282,11 @@ $input-valid-types:
282282
&:is(label),
283283
> label {
284284
&::after {
285-
@include icons.icon-content("*");
286-
287285
// We're using 1px instead of a token here on purpose, as this is an edge case
288286
/* stylelint-disable-next-line db-ux/use-spacings */
289287
padding-inline-start: 1px;
288+
289+
@include icons.icon-content("*");
290290
}
291291
}
292292
}

packages/foundations/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"build": "npm-run-all build:*",
2020
"build:01_normalize": "npm-run-all copy-prepare:*",
2121
"build:02_copy": "npm run copy:scss",
22-
"build:03_css": "sass --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ build/styles",
22+
"build:03_css": "sass --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ build/styles --fatal-deprecation=mixed-decls",
2323
"build:04_tailwind": "cpr tailwind build/tailwind -o",
2424
"build:05_postcss": "postcss build/styles/**/*.css --replace",
2525
"build:06_ide": "cpr ide build/ide -o",

packages/foundations/scss/defaults/default-icons.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@
3131
&::after {
3232
@extend %icon !optional;
3333

34-
@include icons.icon-content(icons.$default-icon-content-after);
35-
3634
margin-inline-start: icons.$default-icon-margin-start;
35+
36+
@include icons.icon-content(icons.$default-icon-content-after);
3737
}
3838
}
3939

packages/foundations/scss/icons/_icon-helpers.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,9 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
7171
@if $position == "after" {
7272
--db-icon-after: "#{$icon}";
7373

74-
@include icon-content($default-icon-content-after);
75-
7674
margin-inline-start: $default-icon-margin-start;
75+
76+
@include icon-content($default-icon-content-after);
7777
}
7878
}
7979
}
@@ -122,7 +122,6 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
122122
}
123123

124124
%icon {
125-
@include icon-content($default-icon-content); // TODO: ONLY FOR data-icon
126125
color: var(--db-icon-color, inherit);
127126
display: inline-block;
128127

@@ -150,6 +149,8 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
150149
block-size: $default-icon-font-size;
151150
inline-size: $default-icon-font-size;
152151

152+
@include icon-content($default-icon-content); // TODO: ONLY FOR data-icon
153+
153154
// Hiding icon from screenreaders
154155
@media aural {
155156
content: none;

0 commit comments

Comments
 (0)