chore (scss): replace all deprecated rules in latest dart sass changes

package.json

@@ -54,8 +54,8 @@
     "postcss-scss": "^4.0.6",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^2.2.1",
-    "sass": "^1.52.3",
-    "sass-loader": "^11.0.1",
+    "sass": "^1.80.6",
+    "sass-loader": "^16.0.3",
     "sharp": "^0.32.1",
     "style-loader": "^2.0.0",
     "stylelint": "^14.13.0",

src/scss/01-abstract/_variables.scss

@@ -1,6 +1,8 @@
 @use "sass:map";
 @use "sass:math";
 
+$entry-file-name: "style";
+
 /**
  * Variables
  */

src/scss/01-abstract/abstract.scss

@@ -1,2 +1,2 @@
-@import "./constants";
-@import "./variables";
+@use "constants";
+@use "variables";

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

@@ -1,3 +1,6 @@
+@use "sass:meta";
+@use "../01-abstract/variables";
+
 @use "sass:map";
 @use "sass:math";
 
@@ -55,7 +58,7 @@
 
     @if not $var {
 
-        @return map.get(map.get($column-preset, $device), $prop);
+        @return map.get(map.get(variables.$column-preset, $device), $prop);
     } @else {
 
         @return $var;
@@ -68,15 +71,15 @@
 
 @function column($device, $nb-column: null, $nb-gutter: null, $total-column: null, $total-gutter: null) {
     // shift vars if $device is number
-    @if type-of($device) == "number" {
+    @if meta.type-of($device) == "number" {
         $total-gutter: $total-column;
         $total-column: $nb-gutter;
         $nb-gutter: $nb-column;
         $nb-column: $device;
         $device: d;
     }
 
-    $preset: map.get($column-preset, $device);
+    $preset: map.get(variables.$column-preset, $device);
     $gutter-width: map.get($preset, gutter-width);
     $column-width: map.get($preset, column-width);
     $total-column: column-set-var($total-column, $device, total-column);
@@ -98,13 +101,13 @@
 
 @function column-px($device, $nb-column: null, $nb-gutter: null, $unitless: false) {
     // shift vars if $device is number
-    @if type-of($device) == "number" {
+    @if meta.type-of($device) == "number" {
         $nb-gutter: $nb-column;
         $nb-column: $device;
         $device: d;
     }
 
-    $preset: map.get($column-preset, $device);
+    $preset: map.get(variables.$column-preset, $device);
     $gutter-width: map.get($preset, gutter-width);
     $column-width: map.get($preset, column-width);
 
@@ -125,13 +128,13 @@
 
 @function column-full($device, $nb-column: null, $nb-gutter: null) {
     // shift vars if $device is number
-    @if type-of($device) == "number" {
+    @if meta.type-of($device) == "number" {
         $nb-gutter: $nb-column;
         $nb-column: $device;
         $device: d;
     }
 
-    $preset: map.get($column-preset, $device);
+    $preset: map.get(variables.$column-preset, $device);
     $gutter-width: map.get($preset, gutter-width);
     $column-width: map.get($preset, column-width);
     $total-column: map.get($preset, total-column);

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

@@ -1,3 +1,5 @@
+@use "../01-abstract/variables";
+
 /**
  * Align - Make a context align (editor / style)
  *
@@ -27,13 +29,13 @@ $function-context-align-last-value: "";
 
 @function context-align($value: null, $suffix: " > ") {
     @if not $value {
-        @if ($entry-file-name == "style") {
+        @if (variables.$entry-file-name == "style") {
             @return ".align" + $function-context-align-last-value;
         }
     } @else {
         $function-context-align-last-value: $value !global;
 
-        @if ($entry-file-name == "editor") {
+        @if (variables.$entry-file-name == "editor") {
             @return "[data-align=\"" + $value + "\"]" + $suffix;
         }
     }

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

@@ -1,3 +1,6 @@
+@use "sass:meta";
+@use "../01-abstract/variables";
+
 /**
  * Context selector - Make a context selector (editor / style)
  *
@@ -53,17 +56,17 @@
     $full-selector: "";
     $parent: "";
 
-    @if ($entry-file-name == "editor" and $editor) {
+    @if (variables.$entry-file-name == "editor" and $editor) {
         $parent: $editor;
-    } @else if ($entry-file-name == "style" and $default) {
+    } @else if (variables.$entry-file-name == "style" and $default) {
         $parent: $default;
     } @else {
         @return $selector;
     }
 
-    @if (type-of($selector) == "string") {
+    @if (meta.type-of($selector) == "string") {
         $full-selector: $parent + " " + $selector;
-    } @else if (type-of($selector) == "list") {
+    } @else if (meta.type-of($selector) == "list") {
         @each $s in $selector {
             $full-selector: $full-selector + $parent + " " + $s;
         }

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

@@ -1,3 +1,6 @@
+@use "../01-abstract/variables";
+@use "f-strip-units";
+
 @use "sass:math";
 
 /**
@@ -20,14 +23,14 @@
  *
  */
 
-@function em($pxval, $base: $font-size-base) {
+@function em($pxval, $base: variables.$font-size-base) {
 
-    @if not unitless($pxval) {
-        $pxval: strip-units($pxval);
+    @if not math.is-unitless($pxval) {
+        $pxval: f-strip-units.strip-units($pxval);
     }
 
-    @if not unitless($base) {
-        $base: strip-units($base);
+    @if not math.is-unitless($base) {
+        $base: f-strip-units.strip-units($base);
     }
 
     @return math.div($pxval, $base) * 1em;

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

@@ -1,3 +1,6 @@
+@use "../01-abstract/variables";
+@use "f-strip-units";
+
 /**
  * Fluid size
  *
@@ -25,8 +28,8 @@
 @use "sass:math";
 
 @function fluid-size($min, $max, $start: xs, $end: sm) {
-    $start: math.div(map.get($breakpoints, $start), 100);
-    $end: math.div(map.get($breakpoints, $end), 100);
+    $start: math.div(map.get(variables.$breakpoints, $start), 100);
+    $end: math.div(map.get(variables.$breakpoints, $end), 100);
 
-    @return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{strip-units($max - $min)}, #{$max});
+    @return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{f-strip-units.strip-units($max - $min)}, #{$max});
 }

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

@@ -1,3 +1,5 @@
+@use "../01-abstract/variables";
+
 @use "sass:map";
 
 /**
@@ -24,7 +26,7 @@
  */
 
 @function get-gutter($preset: d) {
-    @return map.get(map.get($column-preset, $preset), gutter-width);
+    @return map.get(map.get(variables.$column-preset, $preset), gutter-width);
 }
 
 @function get-gutter-width($preset: d) {

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

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "sass:list";
+@use "../01-abstract/variables";
+
 @use "sass:map";
 
 /**
@@ -30,7 +34,7 @@
  *
  */
 
-@function get-svg-url($name: null, $fill: $color-dark, $opacity: 1, $style: "") {
+@function get-svg-url($name: null, $fill: variables.$color-dark, $opacity: 1, $style: "") {
 
     $svgs: (
         // name-of-the-svg: (viewBox, content of the svg element)
@@ -40,7 +44,7 @@
         "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"),
     );
 
-    @if not map-has-key($svgs, $name) {
+    @if not map.has-key($svgs, $name) {
         @return "";
     }
 
@@ -49,8 +53,8 @@
     }
 
     @if ($fill != "") {
-        $fill: " fill='rgba(#{red($fill), green($fill), blue($fill), $opacity})'";
+        $fill: " fill='rgba(#{color.channel($fill, 'red'), color.channel($fill, 'green'), color.channel($fill, 'blue'), $opacity})'";
     }
 
-    @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 */
+    @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 */
 }

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

@@ -1,3 +1,6 @@
+@use "../01-abstract/variables";
+@use "m-style-only";
+
 /**
  * Background fullwidth - Make a fullwidth background in a container element
  *
@@ -13,7 +16,7 @@
  *
  */
 
-@mixin bg-fullwidth($color: $color-grey-100) {
+@mixin bg-fullwidth($color: variables.$color-grey-100) {
     position: relative;
 
     &::before {
@@ -27,7 +30,7 @@
         background-color: $color;
         transform: translate3d(-50%, 0, 0);
 
-        @include style-only {
+        @include m-style-only.style-only {
             z-index: -1;
         }
     }

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

@@ -1,3 +1,5 @@
+@use "f-context-selector";
+
 /**
  * Block vertical spacing
  */
@@ -22,7 +24,7 @@
  *
  */
 @mixin block-vertical-spacing($type : margin, $spacing : var(--spacing--block-3)) {
-    #{context-selector(".blocks-container > &", ".is-root-container &")} {
+    #{f-context-selector.context-selector(".blocks-container > &", ".is-root-container &")} {
         #{$type}-top: $spacing;
         #{$type}-bottom: $spacing;
 

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

@@ -1,3 +1,7 @@
+@use "sass:meta";
+@use "../01-abstract/variables";
+@use "f-em";
+
 @use "sass:map";
 
 /**
@@ -24,19 +28,19 @@
 @mixin breakpoints($breakpoint, $min-or-max-or-breakpoint: min) {
     $font-size: 16px; // don't use em function whitout param, $font-size-base can be modified
 
-    @if (type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") {
+    @if (meta.type-of(map.get(variables.$breakpoints, $min-or-max-or-breakpoint)) == "number") {
 
-        @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)) {
+        @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)) {
             @content;
         }
     } @else if ($min-or-max-or-breakpoint == max) {
 
-        @media screen and (max-width: em(map.get($breakpoints, $breakpoint) - 1, $font-size)) {
+        @media screen and (max-width: f-em.em(map.get(variables.$breakpoints, $breakpoint) - 1, $font-size)) {
             @content;
         }
     } @else {
 
-        @media screen and (min-width: em(map.get($breakpoints, $breakpoint), $font-size)) {
+        @media screen and (min-width: f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)) {
             @content;
         }
     }

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

@@ -1,3 +1,6 @@
+@use "../01-abstract/variables";
+@use "m-hover";
+
 /**
  * Button - All mixins for buttons - Used in src/scss/05-components/_btn.scss
  *
@@ -31,21 +34,21 @@
     font-size: 12px;
     font-weight: 700;
     line-height: 16px;
-    color: $color-dark;
+    color: variables.$color-dark;
     text-align: center;
-    background-color: $color-primary;
+    background-color: variables.$color-primary;
     border-radius: 10px;
 
-    @include hover {
+    @include m-hover.hover {
         @include btn-block-hover;
     }
 }
 
 // hover of the button block
 
 @mixin btn-block-hover {
-    color: $color-primary;
-    background-color: $color-dark;
+    color: variables.$color-primary;
+    background-color: variables.$color-dark;
 }
 
 // Coloring
@@ -54,7 +57,7 @@
     color: $color;
     background-color: $background-color;
 
-    @include hover {
+    @include m-hover.hover {
         color: $background-color;
         background-color: $color;
     }
@@ -67,7 +70,7 @@
     background-color: transparent;
     border: 2px solid currentColor; // Force button width VS Gutenberg CSS
 
-    @include hover {
+    @include m-hover.hover {
         @include btn-block-outline-hover;
     }
 }