From ad02b5bad778f1ee71ace4e1b027b7e293246246 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Tue, 14 May 2024 15:27:46 +0200
Subject: [PATCH] fix(styles): update outdated SASS functions (#3083)

---
 .../src/stories/foundation/layout/shared.module.scss        | 2 +-
 packages/styles/src/components/sizing.scss                  | 4 ++--
 packages/styles/src/functions/_color.scss                   | 2 +-
 packages/styles/src/functions/_list.scss                    | 3 ++-
 packages/styles/src/functions/_sizing.scss                  | 4 ++--
 packages/styles/src/functions/_utilities.scss               | 6 +++---
 6 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/documentation/src/stories/foundation/layout/shared.module.scss b/packages/documentation/src/stories/foundation/layout/shared.module.scss
index 2bb151d2fe..b1eddef8a5 100644
--- a/packages/documentation/src/stories/foundation/layout/shared.module.scss
+++ b/packages/documentation/src/stories/foundation/layout/shared.module.scss
@@ -13,7 +13,7 @@ $breakpointNames: (
 );
 
 :export {
-  breakpoint-count: length(post.$grid-breakpoints);
+  breakpoint-count: list.length(post.$grid-breakpoints);
 
   @each $breakpoint, $value in post.$grid-breakpoints {
     $i: list.index(post.$grid-breakpoints, $breakpoint $value);
diff --git a/packages/styles/src/components/sizing.scss b/packages/styles/src/components/sizing.scss
index 95950165f6..68bf75e297 100644
--- a/packages/styles/src/components/sizing.scss
+++ b/packages/styles/src/components/sizing.scss
@@ -7,7 +7,7 @@
 @use './../mixins/utilities';
 
 // Post margins, paddings and sizes
-@each $breakpoint in map-keys(breakpoints.$grid-breakpoints) {
+@each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: if($breakpoint == 'xs', '', '-#{$breakpoint}');
 
@@ -56,7 +56,7 @@
 }
 
 // Post breakpoints width - e.g. w-sm-100
-@each $breakpoint in map-keys(breakpoints.$grid-breakpoints) {
+@each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     @if $breakpoint != 'xs' {
       @each $prop, $abbrev in (width: w) {
diff --git a/packages/styles/src/functions/_color.scss b/packages/styles/src/functions/_color.scss
index 9327b08bbe..0381ccf8c9 100644
--- a/packages/styles/src/functions/_color.scss
+++ b/packages/styles/src/functions/_color.scss
@@ -36,7 +36,7 @@
 
 // Source: https://gist.github.com/certainlyakey/e9c0d8f5c87ff47e3d5b
 @function encode-uri-color($string) {
-  @if type-of($string) == 'color' and str-index(#{$string}, '#') == 1 {
+  @if meta.type-of($string) == 'color' and string.index(#{$string}, '#') == 1 {
     $hex: string.slice(color.ie-hex-str($string), 4);
     $string: string.unquote('#{$hex}');
 
diff --git a/packages/styles/src/functions/_list.scss b/packages/styles/src/functions/_list.scss
index ff224b7633..c51120694a 100644
--- a/packages/styles/src/functions/_list.scss
+++ b/packages/styles/src/functions/_list.scss
@@ -1,11 +1,12 @@
 @use 'sass:list';
 @use 'sass:math';
+@use 'sass:meta';
 @use 'sass:string';
 
 @function remove-nth($list, $index) {
   $result: null;
 
-  @if type-of($index) != number {
+  @if meta.type-of($index) != number {
     @warn '$index: #{string.quote($index)} is not a number for `remove-nth`.';
   } @else if $index == 0 {
     @warn 'List index 0 must be a non-zero integer for `remove-nth`.';
diff --git a/packages/styles/src/functions/_sizing.scss b/packages/styles/src/functions/_sizing.scss
index 2e28df4bc9..2566f59056 100644
--- a/packages/styles/src/functions/_sizing.scss
+++ b/packages/styles/src/functions/_sizing.scss
@@ -73,7 +73,7 @@
     $box-shadow: list-fn.remove-nth($box-shadow, 1);
   }
 
-  @if (utilities.starts-with-any(nth($box-shadow, -1), 'hsl', 'rgb', '#')) {
+  @if (utilities.starts-with-any(list.nth($box-shadow, -1), 'hsl', 'rgb', '#')) {
     $box-shadow: list-fn.remove-nth($box-shadow, -1);
   }
 
@@ -97,7 +97,7 @@
     $box-shadow-size: $box-shadow-size + list.nth($box-shadow, 4);
   }
 
-  @if (unit($box-shadow-size) == 'px') {
+  @if (math.unit($box-shadow-size) == 'px') {
     $box-shadow-size: math.ceil($box-shadow-size);
   }
 
diff --git a/packages/styles/src/functions/_utilities.scss b/packages/styles/src/functions/_utilities.scss
index cd8ab625cf..8b61af5cfb 100644
--- a/packages/styles/src/functions/_utilities.scss
+++ b/packages/styles/src/functions/_utilities.scss
@@ -17,7 +17,7 @@
     $found-index: -2;
   }
 
-  @if (map-has-key($map, $key1)) {
+  @if (map.has-key($map, $key1)) {
     $found-index: list.index(map.keys($map), $key1);
 
     @if ($key2) {
@@ -36,12 +36,12 @@
     $sum-of-arguments: $sum-of-arguments + $value;
   }
 
-  @return math.div($sum-of-arguments, length($argList));
+  @return math.div($sum-of-arguments, list.length($argList));
 }
 
 @function starts-with-any($value, $comparable...) {
   @each $c in $comparable {
-    @if (str-index('#{$value}', $c) == 1) {
+    @if (string.index('#{$value}', $c) == 1) {
       @return true;
     }
   }