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 */
 }

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

@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "m-style-only" as *;
+
 /**
  * Background fullwidth - Make a fullwidth background in a container element
  *

src/scss/02-tools/_m-bg-fullwidth.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 > &, .is-root-container > .wp-block[data-align] > &, .is-root-container > .acf-block-preview > &, .is-root-container > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block-beapi-manual-block &, .is-root-container > .wp-block[data-align] > .acf-block-preview > &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-manual-block &")} {
+    #{f-context-selector.context-selector(".blocks-container > &", ".is-root-container > &, .is-root-container > .wp-block[data-align] > &, .is-root-container > .acf-block-preview > &, .is-root-container > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block-beapi-manual-block &, .is-root-container > .wp-block[data-align] > .acf-block-preview > &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-manual-block &")} {
         #{$type}-top: $spacing;
         #{$type}-bottom: $spacing;
 

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

@@ -1,3 +1,7 @@
+@use "sass:meta";
+@use "../01-abstract/variables" as *;
+@use "f-em" as *;
+
 @use "sass:map";
 
 /**
@@ -24,7 +28,7 @@
 @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($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)) {
             @content;

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

@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "m-hover" as *;
+
 /**
  * Button - All mixins for buttons - Used in src/scss/05-components/_btn.scss
  *

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

@@ -1,3 +1,7 @@
+@use "../01-abstract/variables" as *;
+@use "m-rtl" as *;
+@use "m-sr-only" as *;
+
 @use "sass:math";
 
 /**

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

@@ -1,3 +1,7 @@
+@use "sass:meta";
+@use "../01-abstract/variables" as *;
+@use "f-em" as *;
+
 @use "sass:map";
 
 /**
@@ -25,7 +29,7 @@
 @mixin container-query($breakpoint, $min-or-max-or-breakpoint: min, $container-name: "") {
     $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($breakpoints, $min-or-max-or-breakpoint)) == "number") {
 
         @container #{$container-name} (min-width: #{em(map.get($breakpoints, $breakpoint), $font-size)}) and (max-width: #{em(map.get($breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)}) {
 

src/scss/02-tools/_m-container-query.scss

@@ -1,3 +1,5 @@
+@use "../01-abstract/variables" as *;
+
 /**
  * Container
  *

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

@@ -1,3 +1,5 @@
+@use "../01-abstract/variables" as *;
+
 /**
  * Editor style only
  *

src/scss/02-tools/_m-editor-only.scss

@@ -1,3 +1,5 @@
+@use "../01-abstract/variables" as *;
+
 /**
  * Heading - Used in src/scss/06-blocks/core/_heading.scss
  *

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

@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "sass:list";
 
 /**
@@ -44,10 +45,10 @@
     $selectors: "&:hover", "&:active", "&:focus";
 
     @if ($additionalSelectors) {
-        @if (type-of($additionalSelectors) == "string") {
+        @if (meta.type-of($additionalSelectors) == "string") {
             $selectors: $selectors "," $additionalSelectors;
         }
-        @else if (type-of($additionalSelectors) == "list") {
+        @else if (meta.type-of($additionalSelectors) == "list") {
             $selectors: list.join($selectors, $additionalSelectors, comma);
         }
     }

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

@@ -1,3 +1,5 @@
+@use "f-context-selector";
+
 /**
  * Not apply style to ACF fields
  *
@@ -14,7 +16,7 @@
  */
 
 @mixin not-acf() {
-    #{context-selector(":where(body)", ":where(*:not([class*="acf-"])) >")} {
+    #{f-context-selector.context-selector(":where(body)", ":where(*:not([class*="acf-"])) >")} {
         @content;
     }
 }

src/scss/02-tools/_m-not-acf.scss

@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "m-checkbox-custom";
+
 @use "sass:math";
 
 /**
@@ -28,7 +31,7 @@
 
 @mixin radio-custom($include-checkbox-style: false, $color: $color-primary, $size: 18px, $border-width: 1px) {
     @if ($include-checkbox-style) {
-        @include checkbox-custom($color, $size, $border-width);
+        @include m-checkbox-custom.checkbox-custom($color, $size, $border-width);
     }
 
     + label {
@@ -48,5 +51,5 @@
 }
 
 @mixin radio-custom-checked() {
-    @include checkbox-custom-checked;
+    @include m-checkbox-custom.checkbox-custom-checked;
 }

src/scss/02-tools/_m-radio-custom.scss

@@ -1,3 +1,5 @@
+@use "m-hover";
+
 /**
  * Scrollbar - Make an invisible scrollbar and custom the scrollbar color
  *
@@ -55,7 +57,7 @@
         border-radius: 20px;
     }
 
-    @include hover {
+    @include m-hover.hover {
         &::-webkit-scrollbar {
             display: block;
         }

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

@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "f-get-svg-url" as *;
+@use "m-rtl" as *;
 @use "sass:color";
 
 /**

src/scss/02-tools/_m-select-custom.scss

@@ -1,3 +1,5 @@
+@use "../01-abstract/variables" as *;
+
 /**
  * Style for Frontend UI only
  *

src/scss/02-tools/_m-style-only.scss

@@ -1,3 +1,6 @@
+@use "../01-abstract/constants" as *;
+@use "f-get-svg-url" as *;
+
 /**
  * Add icon before text with mask to have the same color of the text
  *

src/scss/02-tools/_m-text-icon.scss

@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "../02-tools/m-rtl" as *;
+
 html {
     /* Set automatic RTL direction depending on lang attribute */
     @include set-rtl-direction;

src/scss/02-tools/tools.scss

@@ -1,3 +1,12 @@
+@use "../01-abstract/variables" as *;
+@use "../02-tools/f-assign-inputs" as *;
+@use "../02-tools/f-get-svg-url" as *;
+@use "../02-tools/m-checkbox-custom" as *;
+@use "../02-tools/m-not-acf" as *;
+@use "../02-tools/m-radio-custom" as *;
+@use "../02-tools/m-select-custom" as *;
+@use "../05-components/btn";
+
 @use "sass:color";
 
 // All inputs variables