@coreui/coreui 5.4.2 → 5.5.0

package/scss/_spinners.scss

@@ -7,6 +7,7 @@
 .spinner-grow,
 .spinner-border {
   display: inline-block;
+  flex-shrink: 0;
   width: var(--#{$prefix}spinner-width);
   height: var(--#{$prefix}spinner-height);
   vertical-align: var(--#{$prefix}spinner-vertical-align);

package/scss/forms/_form-control.scss

@@ -64,7 +64,8 @@
     // https://github.com/twbs/bootstrap/issues/23307
     // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
     // Multiply line-height by 1em if it has no unit
-    height: if(math.unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    height: if(sass(math.unit($input-line-height) == ""): $input-line-height * 1em; else: $input-line-height);
 
     // Android Chrome type="date" is taller than the other inputs
     // because of "margin: 1px 24px 1px 4px" inside the shadow DOM

package/scss/functions/_color-contrast-variables.scss

@@ -9,7 +9,7 @@
 
   @each $color in $foregrounds {
     $contrast-ratio: contrast-ratio($background, $color);
-    @if $contrast-ratio > $min-contrast-ratio {
+    @if $contrast-ratio >= $min-contrast-ratio {
       @return $color;
     } @else if $contrast-ratio > $max-ratio {
       $max-ratio: $contrast-ratio;

package/scss/functions/_color-contrast.scss

@@ -12,7 +12,7 @@
 
   @each $color in $foregrounds {
     $contrast-ratio: contrast-ratio($background, $color);
-    @if $contrast-ratio > $min-contrast-ratio {
+    @if $contrast-ratio >= $min-contrast-ratio {
       @return $color;
     } @else if $contrast-ratio > $max-ratio {
       $max-ratio: $contrast-ratio;

package/scss/functions/_color.scss

@@ -13,6 +13,10 @@
 
 // Shade the color if the weight is positive, else tint it
 @function shift-color($color, $weight) {
-  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+  @if $weight > 0 {
+    @return shade-color($color, $weight);
+  } @else {
+    @return tint-color($color, -$weight);
+  }
 }
 // scss-docs-end color-functions

package/scss/functions/_contrast-ratio.scss

@@ -1,13 +1,17 @@
 @use "sass:color";
+@use "sass:list";
 @use "sass:map";
 @use "sass:math";
-@use "math" as *;
+
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
+// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
+$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
 
 @function contrast-ratio($background, $foreground) {
   $l1: luminance($background);
   $l2: luminance(opaque($background, $foreground));
 
-  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+  @return if(sass($l1 > $l2): math.div($l1 + .05, $l2 + .05); else: math.div($l2 + .05, $l1 + .05));
 }
 
 // Return WCAG2.2 relative luminance
@@ -15,13 +19,14 @@
 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
 @function luminance($color) {
   $rgb: (
-    "r": color.channel($color, "red", $space: rgb), // stylelint-disable-line scss/at-function-named-arguments
-    "g": color.channel($color, "green", $space: rgb), // stylelint-disable-line scss/at-function-named-arguments
-    "b": color.channel($color, "blue", $space: rgb) // stylelint-disable-line scss/at-function-named-arguments
+    "r": color.channel($color, "red"),
+    "g": color.channel($color, "green"),
+    "b": color.channel($color, "blue")
   );
 
   @each $name, $value in $rgb {
-    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), math.pow(divide((divide(math.round($value) + 1, 255) + .055), 1.055), 2.4));
+    // stylelint-disable-next-line scss/at-function-named-arguments, @stylistic/function-whitespace-after
+    $value: if(sass(math.div($value, 255) < .04045): math.div(math.div($value, 255), 12.92); else: list.nth($_luminance-list, math.round($value + 1)));
     $rgb: map.merge($rgb, ($name: $value));
   }
 

package/scss/functions/_maps.scss

@@ -14,7 +14,15 @@
     // allow to pass the $key and $value of the map as an function argument
     $_args: ();
     @each $arg in $args {
-      $_args: list.append($_args, if($arg == "$prefix", $prefix, if($arg == "$key", $key, if($arg == "$value", $value, $arg))));
+      @if $arg == "$prefix" {
+        $_args: list.append($_args, $prefix);
+      } @else if $arg == "$key" {
+        $_args: list.append($_args, $key);
+      } @else if $arg == "$value" {
+        $_args: list.append($_args, $value);
+      } @else {
+        $_args: list.append($_args, $arg);
+      }
     }
 
     $_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));

package/scss/functions/_math.scss

@@ -17,7 +17,7 @@
     @return $value1 + $value2;
   }
 
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(" + ") + $value2);
+  @return if(sass($return-calc == true): calc(#{$value1} + #{$value2}); else: $value1 + string.unquote(" + ") + $value2);
 }
 
 @function subtract($value1, $value2, $return-calc: true) {
@@ -41,11 +41,12 @@
     $value2: string.unquote("(") + $value2 + string.unquote(")");
   }
 
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + string.unquote(" - ") + $value2);
+  @return if(sass($return-calc == true): calc(#{$value1} - #{$value2}); else: $value1 + string.unquote(" - ") + $value2);
 }
 
 @function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  $sign: if(sass($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0): 1; else: -1);
   $dividend: abs($dividend);
   $divisor: abs($divisor);
   @if $dividend == 0 {

package/scss/helpers/_color-bg.scss

@@ -7,8 +7,10 @@
 
 @each $color, $value in $theme-colors {
   .text-bg-#{$color} {
-    color: color-contrast($value) if($enable-important-utilities, !important, null);
-    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    color: color-contrast($value) if(sass($enable-important-utilities): !important);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if(sass($enable-important-utilities): !important);
   }
 }
 
@@ -17,8 +19,10 @@
     @each $color, $value in $theme-colors-dark {
       $color-rgb: to-rgb($value);
       .text-bg-#{$color} {
-        color: color-contrast($value) if($enable-important-utilities, !important, null);
-        background-color: rgba($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+        // stylelint-disable-next-line scss/at-function-named-arguments
+        color: color-contrast($value) if(sass($enable-important-utilities): !important);
+        // stylelint-disable-next-line scss/at-function-named-arguments
+        background-color: rgba($color-rgb, var(--#{$prefix}bg-opacity, 1)) if(sass($enable-important-utilities): !important);
       }
     }
   }

package/scss/helpers/_colored-links.scss

@@ -5,15 +5,20 @@
 
 @each $color, $value in $theme-colors {
   .link-#{$color} {
-    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-    text-decoration-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if(sass($enable-important-utilities): !important);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if(sass($enable-important-utilities): !important);
 
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
-        $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
-        color: rgba(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-        text-decoration-color: rgba(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+        // stylelint-disable-next-line scss/at-function-named-arguments, @stylistic/function-whitespace-after
+        $hover-color: if(sass(color-contrast($value) == $color-contrast-light): shade-color($value, $link-shade-percentage); else: tint-color($value, $link-shade-percentage));
+        // stylelint-disable-next-line scss/at-function-named-arguments
+        color: rgba(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if(sass($enable-important-utilities): !important);
+        // stylelint-disable-next-line scss/at-function-named-arguments
+        text-decoration-color: rgba(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if(sass($enable-important-utilities): !important);
       }
     }
   }
@@ -21,14 +26,18 @@
 
 // One-off special link helper as a bridge until v6
 .link-body-emphasis {
-  color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-  text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if(sass($enable-important-utilities): !important);
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if(sass($enable-important-utilities): !important);
 
   @if $link-shade-percentage != 0 {
     &:hover,
     &:focus {
-      color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
-      text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
+      // stylelint-disable-next-line scss/at-function-named-arguments
+      color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if(sass($enable-important-utilities): !important);
+      // stylelint-disable-next-line scss/at-function-named-arguments
+      text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if(sass($enable-important-utilities): !important);
     }
   }
 }

package/scss/mixins/_breakpoints.scss

@@ -23,7 +23,12 @@
   @if not $n {
     @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
   }
-  @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
+  // Use @if/@else because list.nth would error if evaluated when $n equals list length
+  @if $n < list.length($breakpoint-names) {
+    @return list.nth($breakpoint-names, $n + 1);
+  } @else {
+    @return null;
+  }
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
@@ -32,7 +37,7 @@
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map.get($breakpoints, $name);
-  @return if($min != 0, $min, null);
+  @return if(sass($min != 0): $min; else: null);
 }
 
 // Maximum breakpoint width.
@@ -46,7 +51,7 @@
 //    767.98px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $max: map.get($breakpoints, $name);
-  @return if($max and $max > 0, $max - .02, null);
+  @return if(sass($max and $max > 0): $max - .02; else: null);
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@@ -57,7 +62,7 @@
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    "-sm"
 @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
-  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+  @return if(sass(breakpoint-min($name, $breakpoints) == null): ""; else: "-#{$name}");
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.

package/scss/mixins/_buttons.scss

@@ -15,11 +15,11 @@
   $background,
   $border,
   $color: color-contrast($background),
-  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
-  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+  $hover-background: if(sass($color == $color-contrast-light): shade-color($background, $btn-hover-bg-shade-amount); else: tint-color($background, $btn-hover-bg-tint-amount)),
+  $hover-border: if(sass($color == $color-contrast-light): shade-color($border, $btn-hover-border-shade-amount); else: tint-color($border, $btn-hover-border-tint-amount)),
   $hover-color: color-contrast($hover-background),
-  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
-  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+  $active-background: if(sass($color == $color-contrast-light): shade-color($background, $btn-active-bg-shade-amount); else: tint-color($background, $btn-active-bg-tint-amount)),
+  $active-border: if(sass($color == $color-contrast-light): shade-color($border, $btn-active-border-shade-amount); else: tint-color($border, $btn-active-border-tint-amount)),
   $active-color: color-contrast($active-background),
   $disabled-background: $background,
   $disabled-border: $border,

package/scss/mixins/_forms.scss

@@ -12,12 +12,12 @@
 // scss-docs-start form-validation-mixins
 @mixin form-validation-state-selector($state) {
   @if ($state == "valid" or $state == "invalid") {
-    .was-validated #{if(&, "&", "")}:#{$state},
-    #{if(&, "&", "")}.is-#{$state} {
+    .was-validated #{if(sass(&): "&"; else: "")}:#{$state},
+    #{if(sass(&): "&"; else: "")}.is-#{$state} {
       @content;
     }
   } @else {
-    #{if(&, "&", "")}.is-#{$state} {
+    #{if(sass(&): "&"; else: "")}.is-#{$state} {
       @content;
     }
   }

package/scss/mixins/_grid.scss

@@ -23,7 +23,8 @@
 
 @mixin make-col-ready($include-column-box-sizing: false) {
   // Add box sizing if only the grid is loaded
-  box-sizing: if(meta.variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  box-sizing: if(sass(meta.variable-exists(include-column-box-sizing) and $include-column-box-sizing): border-box);
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we set the width
   // later on to override this initial width.
@@ -53,7 +54,8 @@
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: divide($size, $columns);
-  margin-inline-start: if($num == 0, 0, math.percentage($num));
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  margin-inline-start: if(sass($num == 0): 0; else: math.percentage($num));
 }
 
 // Row columns

package/scss/mixins/_ltr-rtl.scss

@@ -54,28 +54,34 @@
 
   @if $enable-ltr and $enable-rtl {
     @include ltr() {
-      #{$property}: $value if($important, !important, null);
+      // stylelint-disable-next-line scss/at-function-named-arguments
+      #{$property}: $value if(sass($important): !important);
     }
     @include rtl() {
       @if $value-rtl {
-        #{$property-reflected}: $value-rtl if($important, !important, null);
+        // stylelint-disable-next-line scss/at-function-named-arguments
+        #{$property-reflected}: $value-rtl if(sass($important): !important);
       }
       @else {
-        #{$property-reflected}: $value-reflected if($important, !important, null);
+        // stylelint-disable-next-line scss/at-function-named-arguments
+        #{$property-reflected}: $value-reflected if(sass($important): !important);
       }
     }
   }
   @else {
     @if $enable-rtl {
       @if $value-rtl {
-        #{$property-reflected}: $value-rtl if($important, !important, null);
+        // stylelint-disable-next-line scss/at-function-named-arguments
+        #{$property-reflected}: $value-rtl if(sass($important): !important);
       }
       @else {
-        #{$property-reflected}: $value-reflected if($important, !important, null);
+        // stylelint-disable-next-line scss/at-function-named-arguments
+        #{$property-reflected}: $value-reflected if(sass($important): !important);
       }
     }
     @else {
-      #{$property}: $value if($important, !important, null);
+      // stylelint-disable-next-line scss/at-function-named-arguments
+      #{$property}: $value if(sass($important): !important);
     }
   }
 }
@@ -94,25 +100,31 @@
 
   @if $enable-ltr and $enable-rtl {
     @include ltr() {
-      #{$property}: $value if($important, !important, null);
+      // stylelint-disable-next-line scss/at-function-named-arguments
+      #{$property}: $value if(sass($important): !important);
     }
     @include rtl() {
       @if $value-rtl {
-        #{$property}: $value-rtl if($important, !important, null);
+        // stylelint-disable-next-line scss/at-function-named-arguments
+        #{$property}: $value-rtl if(sass($important): !important);
       } @else {
-        #{$property}: $value-reflected if($important, !important, null);
+        // stylelint-disable-next-line scss/at-function-named-arguments
+        #{$property}: $value-reflected if(sass($important): !important);
       }
     }
   }
   @else {
     @if $enable-rtl {
       @if $value-rtl {
-        #{$property}: $value-rtl if($important, !important, null);
+        // stylelint-disable-next-line scss/at-function-named-arguments
+        #{$property}: $value-rtl if(sass($important): !important);
       } @else {
-        #{$property}: $value-reflected if($important, !important, null);
+        // stylelint-disable-next-line scss/at-function-named-arguments
+        #{$property}: $value-reflected if(sass($important): !important);
       }
     } @else {
-      #{$property}: $value if($important, !important, null);
+      // stylelint-disable-next-line scss/at-function-named-arguments
+      #{$property}: $value if(sass($important): !important);
     }
   }
 }

package/scss/mixins/_table-variants.scss

@@ -12,17 +12,19 @@
     $striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
     $active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
     $table-border-color: color.mix($color, $background, math.percentage($table-border-factor));
+    $striped-color: color-contrast($striped-bg);
+    $active-color: color-contrast($active-bg);
+    $hover-color: color-contrast($hover-bg);
 
     --#{$prefix}table-color: #{$color};
     --#{$prefix}table-bg: #{$background};
     --#{$prefix}table-border-color: #{$table-border-color};
     --#{$prefix}table-striped-bg: #{$striped-bg};
-    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
+    --#{$prefix}table-striped-color: #{$striped-color};
     --#{$prefix}table-active-bg: #{$active-bg};
-    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
+    --#{$prefix}table-active-color: #{$active-color};
     --#{$prefix}table-hover-bg: #{$hover-bg};
-    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
-
+    --#{$prefix}table-hover-color: #{$hover-color};
     color: var(--#{$prefix}table-color);
     border-color: var(--#{$prefix}table-border-color);
   }

package/scss/mixins/_utilities.scss

@@ -30,19 +30,25 @@
     }
 
     // Use custom class if present
-    $property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
-    $property-class: if($property-class == null, "", $property-class);
+    // stylelint-disable-next-line scss/at-function-named-arguments, @stylistic/function-whitespace-after
+    $property-class: if(sass(map.has-key($utility, class)): map.get($utility, class); else: list.nth($properties, 1));
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    $property-class: if(sass($property-class == null): ""; else: $property-class);
 
     // Use custom CSS variable name if present, otherwise default to `class`
-    $css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
+    // stylelint-disable-next-line scss/at-function-named-arguments, @stylistic/function-whitespace-after
+    $css-variable-name: if(sass(map.has-key($utility, css-variable-name)): map.get($utility, css-variable-name); else: map.get($utility, class));
 
     // State params to generate pseudo-classes
-    $state: if(map.has-key($utility, state), map.get($utility, state), ());
+    // stylelint-disable-next-line scss/at-function-named-arguments, @stylistic/function-whitespace-after
+    $state: if(sass(map.has-key($utility, state)): map.get($utility, state); else: ());
 
-    $infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.slice($infix, 2), $infix);
+    // stylelint-disable-next-line scss/at-function-named-arguments, @stylistic/function-whitespace-after
+    $infix: if(sass($property-class == "" and string.slice($infix, 1, 1) == "-"): string.slice($infix, 2); else: $infix);
 
     // Don't prefix if value key is null (e.g. with shadow class)
-    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    $property-class-modifier: if(sass($key): if(sass($property-class == "" and $infix == ""): ""; else: "-") + $key; else: "");
 
     @if map.get($utility, rfs) {
       // Inside the media query
@@ -50,7 +56,8 @@
         $val: rfs-value($value);
 
         // Do not render anything if fluid and non fluid values are the same
-        $value: if($val == rfs-fluid-value($value), null, $val);
+        // stylelint-disable-next-line scss/at-function-named-arguments
+        $value: if(sass($val == rfs-fluid-value($value)): null; else: $val);
       }
       @else {
         $value: rfs-fluid-value($value);
@@ -94,7 +101,8 @@
                   --#{$prefix}#{$local-var}: #{$variable};
                 }
               }
-              #{$property}: $value if($enable-important-utilities, !important, null);
+              // stylelint-disable-next-line scss/at-function-named-arguments
+              #{$property}: $value if(sass($enable-important-utilities): !important);
             }
           }
         } @else {
@@ -107,12 +115,13 @@
               }
               @if $is-rtl == true {
                 @if (meta.type-of($value) == "map") {
-                  @include ltr-rtl($property, map.get($value, "ltr"), null, map.get($value, "rtl"), if($enable-important-utilities, !important, null));
+                  @include ltr-rtl($property, map.get($value, "ltr"), null, map.get($value, "rtl"), if(sass($enable-important-utilities): !important));
                 } @else {
-                  @include ltr-rtl($property, $value, null, null, if($enable-important-utilities, !important, null));
+                  @include ltr-rtl($property, $value, null, null, if(sass($enable-important-utilities): !important));
                 }
               } @else {
-                #{$property}: $value if($enable-important-utilities, !important, null);
+                // stylelint-disable-next-line scss/at-function-named-arguments
+                #{$property}: $value if(sass($enable-important-utilities): !important);
               }
             }
           }
@@ -126,7 +135,8 @@
                   --#{$prefix}#{$local-var}: #{$variable};
                 }
               }
-              #{$property}: $value if($enable-important-utilities, !important, null);
+              // stylelint-disable-next-line scss/at-function-named-arguments
+              #{$property}: $value if(sass($enable-important-utilities): !important);
             }
           }
         }

package/scss/vendor/_rfs.scss

@@ -59,7 +59,7 @@ $enable-rfs: $enable-rfs !default;
 $rfs-base-value-unit: math.unit($rfs-base-value);
 
 @function rfs-divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $sign: if(sass($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0): 1; else: -1);
   $dividend: abs($dividend);
   $divisor: abs($divisor);
   @if $dividend == 0 {
@@ -120,9 +120,9 @@ $rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
 }
 
 // Calculate the media query value
-$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{rfs-divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
-$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
-$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
+$rfs-mq-value: if(sass($rfs-breakpoint-unit == px): #{$rfs-breakpoint}px; else: #{rfs-divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
+$rfs-mq-property-width: if(sass($rfs-mode == max-media-query): max-width; else: min-width);
+$rfs-mq-property-height: if(sass($rfs-mode == max-media-query): max-height; else: min-height);
 
 // Internal mixin used to determine which media query needs to be used
 @mixin _rfs-media-query {
@@ -196,7 +196,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 // Helper function to get the formatted non-responsive value
 @function rfs-value($values) {
   // Convert to list
-  $values: if(meta.type-of($values) != list, ($values,), $values);
+  $values: if(sass(meta.type-of($values) != list): ($values,); else: $values);
 
   $val: "";
 
@@ -207,15 +207,19 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
     }
     @else {
       // Cache $value unit
-      $unit: if(meta.type-of($value) == "number", math.unit($value), false);
+      $unit: false;
+      
+      @if meta.type-of($value) == "number" {
+        $unit: math.unit($value);
+      };
 
       @if $unit == px {
         // Convert to rem if needed
-        $val: $val + " " + if($rfs-unit == rem, #{rfs-divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
+        $val: $val + " " + if(sass($rfs-unit == rem): #{rfs-divide($value, $value * 0 + $rfs-rem-value)}rem; else: $value);
       }
       @else if $unit == rem {
         // Convert to px if needed
-        $val: $val + " " + if($rfs-unit == px, #{rfs-divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
+        $val: $val + " " + if(sass($rfs-unit == px): #{rfs-divide($value, $value * 0 + 1) * $rfs-rem-value}px; else: $value);
       } @else {
         // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
         $val: $val + " " + $value;
@@ -230,7 +234,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 // Helper function to get the responsive value calculated by RFS
 @function rfs-fluid-value($values) {
   // Convert to list
-  $values: if(meta.type-of($values) != list, ($values,), $values);
+  $values: if(sass(meta.type-of($values) != list): (($values,)); else: $values);
 
   $val: "";
 
@@ -240,18 +244,22 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
       $val: $val + " 0";
     } @else {
       // Cache $value unit
-      $unit: if(meta.type-of($value) == "number", math.unit($value), false);
+      $unit: false;
+
+      @if meta.type-of($value) == "number" {
+        $unit: math.unit($value);
+      };
 
       // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
       @if not $unit or $unit != px and $unit != rem {
         $val: $val + " " + $value;
       } @else {
         // Remove unit from $value for calculations
-        $value: rfs-divide($value, $value * 0 + if($unit == px, 1, rfs-divide(1, $rfs-rem-value)));
+        $value: rfs-divide($value, $value * 0 + if(sass($unit == px): 1; else: rfs-divide(1, $rfs-rem-value)));
 
         // Only add the media query if the value is greater than the minimum value
         @if abs($value) <= $rfs-base-value or not $enable-rfs {
-          $val: $val + " " + if($rfs-unit == rem, #{rfs-divide($value, $rfs-rem-value)}rem, #{$value}px);
+          $val: $val + " " + if(sass($rfs-unit == rem): #{rfs-divide($value, $rfs-rem-value)}rem; else: #{$value}px);
         }
         @else {
           // Calculate the minimum value
@@ -261,19 +269,19 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
           $value-diff: abs($value) - $value-min;
 
           // Base value formatting
-          $min-width: if($rfs-unit == rem, #{rfs-divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
+          $min-width: if(sass($rfs-unit == rem): #{rfs-divide($value-min, $rfs-rem-value)}rem; else: #{$value-min}px);
 
           // Use negative value if needed
-          $min-width: if($value < 0, -$min-width, $min-width);
+          $min-width: if(sass($value < 0): -$min-width; else: $min-width);
 
           // Use `vmin` if two-dimensional is enabled
-          $variable-unit: if($rfs-two-dimensional, vmin, vw);
+          $variable-unit: if(sass($rfs-two-dimensional): vmin; else: vw);
 
           // Calculate the variable width between 0 and $rfs-breakpoint
           $variable-width: #{rfs-divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
 
           // Return the calculated value
-          $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
+          $val: $val + " calc(" + $min-width + if(sass($value < 0): " - "; else: " + ") + $variable-width + ")";
         }
       }
     }
@@ -295,14 +303,14 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
     }
     @else {
       @include _rfs-rule () {
-        #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val);
+        #{$property}: if(sass($rfs-mode == max-media-query): $val; else: $fluid-val);
 
         // Include safari iframe resize fix if needed
-        min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
+        min-width: if(sass($rfs-safari-iframe-resize-bug-fix): (0 * 1vw); else: null);
       }
 
       @include _rfs-media-query-rule () {
-        #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val);
+        #{$property}: if(sass($rfs-mode == max-media-query): $fluid-val; else: $val);
       }
     }
   }