Skip to content

Commit 165faac

Browse files
firestar300firestar300
committed
chore (scss): replace all deprecated rules in latest dart sass changes
1 parent 0f14042 commit 165faac

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+501
-337
lines changed

‎src/scss/01-abstract/_variables.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@use "sass:map";
22
@use "sass:math";
33

4+
$entry-file-name: "style";
5+
46
/**
57
* Variables
68
*/

‎src/scss/01-abstract/abstract.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
@import "./constants";
2-
@import "./variables";
1+
@use "constants";
2+
@use "variables";

‎src/scss/02-tools/_f-column.scss

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "sass:meta";
2+
@use "../01-abstract/variables";
3+
14
@use "sass:map";
25
@use "sass:math";
36

@@ -55,7 +58,7 @@
5558

5659
@if not $var {
5760

58-
@return map.get(map.get($column-preset, $device), $prop);
61+
@return map.get(map.get(variables.$column-preset, $device), $prop);
5962
} @else {
6063

6164
@return $var;
@@ -68,15 +71,15 @@
6871

6972
@function column($device, $nb-column: null, $nb-gutter: null, $total-column: null, $total-gutter: null) {
7073
// shift vars if $device is number
71-
@if type-of($device) == "number" {
74+
@if meta.type-of($device) == "number" {
7275
$total-gutter: $total-column;
7376
$total-column: $nb-gutter;
7477
$nb-gutter: $nb-column;
7578
$nb-column: $device;
7679
$device: d;
7780
}
7881

79-
$preset: map.get($column-preset, $device);
82+
$preset: map.get(variables.$column-preset, $device);
8083
$gutter-width: map.get($preset, gutter-width);
8184
$column-width: map.get($preset, column-width);
8285
$total-column: column-set-var($total-column, $device, total-column);
@@ -98,13 +101,13 @@
98101

99102
@function column-px($device, $nb-column: null, $nb-gutter: null, $unitless: false) {
100103
// shift vars if $device is number
101-
@if type-of($device) == "number" {
104+
@if meta.type-of($device) == "number" {
102105
$nb-gutter: $nb-column;
103106
$nb-column: $device;
104107
$device: d;
105108
}
106109

107-
$preset: map.get($column-preset, $device);
110+
$preset: map.get(variables.$column-preset, $device);
108111
$gutter-width: map.get($preset, gutter-width);
109112
$column-width: map.get($preset, column-width);
110113

@@ -125,13 +128,13 @@
125128

126129
@function column-full($device, $nb-column: null, $nb-gutter: null) {
127130
// shift vars if $device is number
128-
@if type-of($device) == "number" {
131+
@if meta.type-of($device) == "number" {
129132
$nb-gutter: $nb-column;
130133
$nb-column: $device;
131134
$device: d;
132135
}
133136

134-
$preset: map.get($column-preset, $device);
137+
$preset: map.get(variables.$column-preset, $device);
135138
$gutter-width: map.get($preset, gutter-width);
136139
$column-width: map.get($preset, column-width);
137140
$total-column: map.get($preset, total-column);

‎src/scss/02-tools/_f-context-align.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "../01-abstract/variables";
2+
13
/**
24
* Align - Make a context align (editor / style)
35
*
@@ -27,13 +29,13 @@ $function-context-align-last-value: "";
2729

2830
@function context-align($value: null, $suffix: " > ") {
2931
@if not $value {
30-
@if ($entry-file-name == "style") {
32+
@if (variables.$entry-file-name == "style") {
3133
@return ".align" + $function-context-align-last-value;
3234
}
3335
} @else {
3436
$function-context-align-last-value: $value !global;
3537

36-
@if ($entry-file-name == "editor") {
38+
@if (variables.$entry-file-name == "editor") {
3739
@return "[data-align=\"" + $value + "\"]" + $suffix;
3840
}
3941
}

‎src/scss/02-tools/_f-context-selector.scss

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "sass:meta";
2+
@use "../01-abstract/variables";
3+
14
/**
25
* Context selector - Make a context selector (editor / style)
36
*
@@ -53,17 +56,17 @@
5356
$full-selector: "";
5457
$parent: "";
5558

56-
@if ($entry-file-name == "editor" and $editor) {
59+
@if (variables.$entry-file-name == "editor" and $editor) {
5760
$parent: $editor;
58-
} @else if ($entry-file-name == "style" and $default) {
61+
} @else if (variables.$entry-file-name == "style" and $default) {
5962
$parent: $default;
6063
} @else {
6164
@return $selector;
6265
}
6366

64-
@if (type-of($selector) == "string") {
67+
@if (meta.type-of($selector) == "string") {
6568
$full-selector: $parent + " " + $selector;
66-
} @else if (type-of($selector) == "list") {
69+
} @else if (meta.type-of($selector) == "list") {
6770
@each $s in $selector {
6871
$full-selector: $full-selector + $parent + " " + $s;
6972
}

‎src/scss/02-tools/_f-em.scss

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "../01-abstract/variables";
2+
@use "f-strip-units";
3+
14
@use "sass:math";
25

36
/**
@@ -20,14 +23,14 @@
2023
*
2124
*/
2225

23-
@function em($pxval, $base: $font-size-base) {
26+
@function em($pxval, $base: variables.$font-size-base) {
2427

25-
@if not unitless($pxval) {
26-
$pxval: strip-units($pxval);
28+
@if not math.is-unitless($pxval) {
29+
$pxval: f-strip-units.strip-units($pxval);
2730
}
2831

29-
@if not unitless($base) {
30-
$base: strip-units($base);
32+
@if not math.is-unitless($base) {
33+
$base: f-strip-units.strip-units($base);
3134
}
3235

3336
@return math.div($pxval, $base) * 1em;

‎src/scss/02-tools/_f-fluid-size.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "../01-abstract/variables";
2+
@use "f-strip-units";
3+
14
/**
25
* Fluid size
36
*
@@ -25,8 +28,8 @@
2528
@use "sass:math";
2629

2730
@function fluid-size($min, $max, $start: xs, $end: sm) {
28-
$start: math.div(map.get($breakpoints, $start), 100);
29-
$end: math.div(map.get($breakpoints, $end), 100);
31+
$start: math.div(map.get(variables.$breakpoints, $start), 100);
32+
$end: math.div(map.get(variables.$breakpoints, $end), 100);
3033

31-
@return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{strip-units($max - $min)}, #{$max});
34+
@return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{f-strip-units.strip-units($max - $min)}, #{$max});
3235
}

‎src/scss/02-tools/_f-get-gutter-width.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "../01-abstract/variables";
2+
13
@use "sass:map";
24

35
/**
@@ -24,7 +26,7 @@
2426
*/
2527

2628
@function get-gutter($preset: d) {
27-
@return map.get(map.get($column-preset, $preset), gutter-width);
29+
@return map.get(map.get(variables.$column-preset, $preset), gutter-width);
2830
}
2931

3032
@function get-gutter-width($preset: d) {

‎src/scss/02-tools/_f-get-svg-url.scss

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@use "sass:color";
2+
@use "sass:list";
3+
@use "../01-abstract/variables";
4+
15
@use "sass:map";
26

37
/**
@@ -30,7 +34,7 @@
3034
*
3135
*/
3236

33-
@function get-svg-url($name: null, $fill: $color-dark, $opacity: 1, $style: "") {
37+
@function get-svg-url($name: null, $fill: variables.$color-dark, $opacity: 1, $style: "") {
3438

3539
$svgs: (
3640
// name-of-the-svg: (viewBox, content of the svg element)
@@ -40,7 +44,7 @@
4044
"close": ("0 0 20 20", "3Cpath d='M5.442 5.442 5 5.883l2.058 2.059L9.116 10l-2.058 2.058L5 14.117l.442.441.441.442 2.059-2.058L10 10.884l2.058 2.058L14.117 15l.441-.442.442-.441-2.058-2.059L10.884 10l2.058-2.058L15 5.883l-.442-.441L14.117 5l-2.059 2.058L10 9.116 7.942 7.058 5.883 5l-.441.442'/%3E"),
4145
);
4246

43-
@if not map-has-key($svgs, $name) {
47+
@if not map.has-key($svgs, $name) {
4448
@return "";
4549
}
4650

@@ -49,8 +53,8 @@
4953
}
5054

5155
@if ($fill != "") {
52-
$fill: " fill='rgba(#{red($fill), green($fill), blue($fill), $opacity})'";
56+
$fill: " fill='rgba(#{color.channel($fill, 'red'), color.channel($fill, 'blue'), color.channel($fill, 'green'), $opacity})'";
5357
}
5458

55-
@return url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg'" + $fill + $style + " viewBox='" + nth(map.get($svgs, $name), 1) + "'%3E%" + nth(map.get($svgs, $name), 2) + "%3C/svg%3E"); /* stylelint-disable-line */
59+
@return url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg'" + $fill + $style + " viewBox='" + list.nth(map.get($svgs, $name), 1) + "'%3E%" + list.nth(map.get($svgs, $name), 2) + "%3C/svg%3E"); /* stylelint-disable-line */
5660
}

‎src/scss/02-tools/_m-bg-fullwidth.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "../01-abstract/variables";
2+
@use "m-style-only";
3+
14
/**
25
* Background fullwidth - Make a fullwidth background in a container element
36
*
@@ -13,7 +16,7 @@
1316
*
1417
*/
1518

16-
@mixin bg-fullwidth($color: $color-grey-100) {
19+
@mixin bg-fullwidth($color: variables.$color-grey-100) {
1720
position: relative;
1821

1922
&::before {
@@ -27,7 +30,7 @@
2730
background-color: $color;
2831
transform: translate3d(-50%, 0, 0);
2932

30-
@include style-only {
33+
@include m-style-only.style-only {
3134
z-index: -1;
3235
}
3336
}

‎src/scss/02-tools/_m-block-vertical-spacing.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "f-context-selector";
2+
13
/**
24
* Block vertical spacing
35
*/
@@ -22,7 +24,7 @@
2224
*
2325
*/
2426
@mixin block-vertical-spacing($type : margin, $spacing : var(--spacing--block-3)) {
25-
#{context-selector(".blocks-container > &", ".is-root-container &")} {
27+
#{f-context-selector.context-selector(".blocks-container > &", ".is-root-container &")} {
2628
#{$type}-top: $spacing;
2729
#{$type}-bottom: $spacing;
2830

‎src/scss/02-tools/_m-breakpoint.scss

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@use "sass:meta";
2+
@use "../01-abstract/variables";
3+
@use "f-em";
4+
15
@use "sass:map";
26

37
/**
@@ -24,19 +28,19 @@
2428
@mixin breakpoints($breakpoint, $min-or-max-or-breakpoint: min) {
2529
$font-size: 16px; // don't use em function whitout param, $font-size-base can be modified
2630

27-
@if (type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") {
31+
@if (meta.type-of(map.get(variables.$breakpoints, $min-or-max-or-breakpoint)) == "number") {
2832

29-
@media screen and (min-width: em(map.get($breakpoints, $breakpoint), $font-size)) and (max-width: em(map.get($breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)) {
33+
@media screen and (min-width: f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)) and (max-width: f-em.em(map.get(variables.$breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)) {
3034
@content;
3135
}
3236
} @else if ($min-or-max-or-breakpoint == max) {
3337

34-
@media screen and (max-width: em(map.get($breakpoints, $breakpoint) - 1, $font-size)) {
38+
@media screen and (max-width: f-em.em(map.get(variables.$breakpoints, $breakpoint) - 1, $font-size)) {
3539
@content;
3640
}
3741
} @else {
3842

39-
@media screen and (min-width: em(map.get($breakpoints, $breakpoint), $font-size)) {
43+
@media screen and (min-width: f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)) {
4044
@content;
4145
}
4246
}

‎src/scss/02-tools/_m-btn.scss

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "../01-abstract/variables";
2+
@use "m-hover";
3+
14
/**
25
* Button - All mixins for buttons - Used in src/scss/05-components/_btn.scss
36
*
@@ -31,21 +34,21 @@
3134
font-size: 12px;
3235
font-weight: 700;
3336
line-height: 16px;
34-
color: $color-dark;
37+
color: variables.$color-dark;
3538
text-align: center;
36-
background-color: $color-primary;
39+
background-color: variables.$color-primary;
3740
border-radius: 10px;
3841

39-
@include hover {
42+
@include m-hover.hover {
4043
@include btn-block-hover;
4144
}
4245
}
4346

4447
// hover of the button block
4548

4649
@mixin btn-block-hover {
47-
color: $color-primary;
48-
background-color: $color-dark;
50+
color: variables.$color-primary;
51+
background-color: variables.$color-dark;
4952
}
5053

5154
// Coloring
@@ -54,7 +57,7 @@
5457
color: $color;
5558
background-color: $background-color;
5659

57-
@include hover {
60+
@include m-hover.hover {
5861
color: $background-color;
5962
background-color: $color;
6063
}
@@ -67,7 +70,7 @@
6770
background-color: transparent;
6871
border: 2px solid currentColor; // Force button width VS Gutenberg CSS
6972

70-
@include hover {
73+
@include m-hover.hover {
7174
@include btn-block-outline-hover;
7275
}
7376
}

‎src/scss/02-tools/_m-checkbox-custom.scss

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@use "../01-abstract/variables";
2+
@use "m-rtl";
3+
@use "m-sr-only";
4+
15
@use "sass:math";
26

37
/**
@@ -21,8 +25,8 @@
2125
*
2226
*/
2327

24-
@mixin checkbox-custom($color: $color-primary, $size: 18px, $border-width: 1px) {
25-
@include sr-only;
28+
@mixin checkbox-custom($color: variables.$color-primary, $size: 18px, $border-width: 1px) {
29+
@include m-sr-only.sr-only;
2630

2731
+ label {
2832
position: relative;
@@ -38,10 +42,10 @@
3842
height: $size;
3943
margin: 0;
4044
content: "";
41-
background-color: $color-light;
45+
background-color: variables.$color-light;
4246
border: $border-width solid $color;
4347

44-
@include rtl {
48+
@include m-rtl.rtl {
4549
right: 0;
4650
left: auto;
4751
}
@@ -61,7 +65,7 @@
6165
transition: opacity .2s;
6266
transform: translate(-50%, -50%) rotate(-45deg);
6367

64-
@include rtl {
68+
@include m-rtl.rtl {
6569
right: math.round(math.div($size, 2));
6670
left: auto;
6771
transform: translate(50%, -50%) rotate(-45deg);

0 commit comments

Comments
 (0)