Merge pull request #432 from BeAPI/chore/update-sass-deprecations-rules

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

Author: firestar300

package.json

@@ -51,8 +51,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.85.1",
+    "sass-loader": "^16.0.5",
     "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: "undefined";
+
 /**
  * Variables
  */

src/scss/01-abstract/abstract.scss

@@ -1,3 +1,6 @@
+@use "sass:meta";
+@use "../01-abstract/variables" as *;
+
 @use "sass:map";
 @use "sass:math";
 
@@ -68,7 +71,7 @@
 
 @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;
@@ -98,7 +101,7 @@
 
 @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;
@@ -125,7 +128,7 @@
 
 @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;

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

@@ -1,3 +1,5 @@
+@use "../01-abstract/variables" as *;
+
 /**
  * Align - Make a context align (editor / style)
  *

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

@@ -1,3 +1,6 @@
+@use "sass:meta";
+@use "../01-abstract/variables" as *;
+
 /**
  * Context selector - Make a context selector (editor / style)
  *
@@ -61,9 +64,9 @@
         @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-context-selector.scss

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

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

@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "f-strip-units" as *;
+
 /**
  * Fluid size
  *

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

@@ -1,3 +1,4 @@
+@use "../01-abstract/variables" as *;
 @use "sass:map";
 
 /**

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

@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "sass:color";
+@use "sass:list";
 @use "sass:map";
 
 /**
@@ -40,7 +43,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 +52,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 */
 }