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

Author: firestar300

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;
         }
     }