refactor: migrate to the latest Sass version and add plain-CSS if() support

mrholek · mrholek · commit f78085276374 · 2025-12-19T14:30:34.000+01:00
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -40,10 +40,11 @@
   line-height: var(--#{$prefix}btn-line-height);
   color: var(--#{$prefix}btn-color);
   text-align: center;
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if(not sass($link-decoration == none): none);
   white-space: $btn-white-space;
   vertical-align: middle;
-  cursor: if($enable-button-pointers, pointer, null);
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  cursor: if(sass($enable-button-pointers): pointer);
   user-select: none;
   border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
   @include border-radius(var(--#{$prefix}btn-border-radius));
@@ -53,7 +54,8 @@
 
   &:hover {
     color: var(--#{$prefix}btn-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration: if(sass($link-hover-decoration == underline): none);
     background-color: var(--#{$prefix}btn-hover-bg);
     border-color: var(--#{$prefix}btn-hover-border-color);
   }
@@ -97,7 +99,8 @@
     color: var(--#{$prefix}btn-active-color);
     background-color: var(--#{$prefix}btn-active-bg);
     // Remove CSS gradients if they're enabled
-    background-image: if($enable-gradients, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    background-image: if(sass($enable-gradients): none);
     border-color: var(--#{$prefix}btn-active-border-color);
     @include box-shadow(var(--#{$prefix}btn-active-shadow));
 
@@ -126,7 +129,8 @@
     color: var(--#{$prefix}btn-disabled-color);
     pointer-events: none;
     background-color: var(--#{$prefix}btn-disabled-bg);
-    background-image: if($enable-gradients, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    background-image: if(sass($enable-gradients): none);
     border-color: var(--#{$prefix}btn-disabled-border-color);
     opacity: var(--#{$prefix}btn-disabled-opacity);
     @include box-shadow(none);
diff --git a/scss/_card.scss b/scss/_card.scss
@@ -96,7 +96,8 @@
 
 .card-link {
   &:hover {
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration: if(sass($link-hover-decoration == underline): none);
   }
 
   + .card-link {
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
@@ -123,11 +123,13 @@
 }
 .carousel-control-prev {
   left: 0;
-  background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  background-image: if(sass($enable-gradients): linear-gradient(90deg, rgba($black, .25), rgba($black, .001)));
 }
 .carousel-control-next {
   right: 0;
-  background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  background-image: if(sass($enable-gradients): linear-gradient(270deg, rgba($black, .25), rgba($black, .001)));
 }
 
 // Icons for within
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
@@ -189,7 +189,7 @@
   font-weight: $font-weight-normal;
   color: var(--#{$prefix}dropdown-link-color);
   text-align: inherit; // For `<button>`s
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if(not sass($link-decoration == none): none);
   white-space: nowrap; // prevent links from randomly breaking onto new lines
   background-color: transparent; // For `<button>`s
   border: 0; // For `<button>`s
@@ -198,7 +198,8 @@
   &:hover,
   &:focus {
     color: var(--#{$prefix}dropdown-link-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration: if(sass($link-hover-decoration == underline): none);
     @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
   }
 
@@ -215,7 +216,8 @@
     pointer-events: none;
     background-color: transparent;
     // Remove CSS gradients if they're enabled
-    background-image: if($enable-gradients, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    background-image: if(sass($enable-gradients): none);
   }
 }
 
diff --git a/scss/_header.scss b/scss/_header.scss
@@ -89,13 +89,14 @@
   margin-inline-end: $header-brand-margin-end;
   @include font-size($header-brand-font-size);
   color: var(--#{$prefix}header-brand-color);
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if(not sass($link-decoration == none): none);
   white-space: nowrap;
 
   &:hover,
   &:focus {
     color: var(--#{$prefix}header-brand-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration: if(sass($link-hover-decoration == underline): none);
   }
 }
 
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -57,7 +57,7 @@
   display: block;
   padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
   color: var(--#{$prefix}list-group-color);
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if(not sass($link-decoration == none): none);
   background-color: var(--#{$prefix}list-group-bg);
   border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
 
diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -181,6 +181,7 @@ $utilities-border-subtle: (
 
 $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$prefix", "$key", "link-underline") !default;
 
-$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+// stylelint-disable-next-line scss/at-function-named-arguments
+$negative-spacers: if(sass($enable-negative-margins): negativify-map($spacers)) !default;
 
 $gutters: $spacers !default;
diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -217,7 +217,8 @@
 // scss-docs-start modal-fullscreen-loop
 @each $breakpoint in map.keys($grid-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-  $postfix: if($infix != "", $infix + "-down", "");
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  $postfix: if(sass($infix != ""): $infix + "-down"; else: "");
 
   @include media-breakpoint-down($breakpoint) {
     .modal-fullscreen#{$postfix} {
diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -33,15 +33,16 @@
   @include font-size(var(--#{$prefix}nav-link-font-size));
   font-weight: var(--#{$prefix}nav-link-font-weight);
   color: var(--#{$prefix}nav-link-color);
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if(not sass($link-decoration == none): none);
   background: none;
   border: 0;
   @include transition($nav-link-transition);
 
   &:hover,
   &:focus {
     color: var(--#{$prefix}nav-link-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration: if(sass($link-hover-decoration == underline): none);
   }
 
   &:focus-visible {
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -17,7 +17,8 @@
 
 .navbar {
   // scss-docs-start navbar-css-vars
-  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  --#{$prefix}navbar-padding-x: #{if(sass($navbar-padding-x == null): 0; else: $navbar-padding-x)};
   --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
   --#{$prefix}navbar-color: #{$navbar-light-color};
   --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
@@ -80,13 +81,14 @@
   margin-inline-end: var(--#{$prefix}navbar-brand-margin-end);
   @include font-size(var(--#{$prefix}navbar-brand-font-size));
   color: var(--#{$prefix}navbar-brand-color);
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if(not sass($link-decoration == none): none);
   white-space: nowrap;
 
   &:hover,
   &:focus {
     color: var(--#{$prefix}navbar-brand-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration: if(sass($link-hover-decoration == underline): none);
   }
 }
 
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
@@ -40,15 +40,16 @@
   padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
   @include font-size(var(--#{$prefix}pagination-font-size));
   color: var(--#{$prefix}pagination-color);
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if(not sass($link-decoration == none): none);
   background-color: var(--#{$prefix}pagination-bg);
   border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
   @include transition($pagination-transition);
 
   &:hover {
     z-index: 2;
     color: var(--#{$prefix}pagination-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration: if(sass($link-hover-decoration == underline): none);
     background-color: var(--#{$prefix}pagination-hover-bg);
     border-color: var(--#{$prefix}pagination-hover-border-color);
   }
diff --git a/scss/forms/_form-control.scss b/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
diff --git a/scss/functions/_color.scss b/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
diff --git a/scss/functions/_contrast-ratio.scss b/scss/functions/_contrast-ratio.scss
@@ -11,7 +11,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   $l1: luminance($background);
   $l2: luminance(opaque($background, $foreground));
 
-  @return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($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
@@ -25,7 +25,8 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   );
 
   @each $name, $value in $rgb {
-    $value: if(math.div($value, 255) < .04045, math.div(math.div($value, 255), 12.92), list.nth($_luminance-list, math.round($value + 1)));
+    // 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));
   }
 
diff --git a/scss/functions/_maps.scss b/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...)));
diff --git a/scss/functions/_math.scss b/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 {
diff --git a/scss/helpers/_color-bg.scss b/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);
       }
     }
   }
diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
@@ -5,30 +5,39 @@
 
 @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);
       }
     }
   }
 }
 
 // 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);
     }
   }
 }
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
diff --git a/scss/mixins/_ltr-rtl.scss b/scss/mixins/_ltr-rtl.scss
diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss
diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
diff --git a/scss/vendor/_rfs.scss b/scss/vendor/_rfs.scss

Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,8 @@`
`96`	`96`
`97`	`97`	`.card-link {`
`98`	`98`	`&:hover {`
`99`		`- text-decoration: if($link-hover-decoration == underline, none, null);`
	`99`	`+ // stylelint-disable-next-line scss/at-function-named-arguments`
	`100`	`+ text-decoration: if(sass($link-hover-decoration == underline): none);`
`100`	`101`	`}`
`101`	`102`
`102`	`103`	`+ .card-link {`
Original file line number	Diff line number	Diff line change
`@@ -123,11 +123,13 @@`
`123`	`123`	`}`
`124`	`124`	`.carousel-control-prev {`
`125`	`125`	`left: 0;`
`126`		`- background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);`
	`126`	`+ // stylelint-disable-next-line scss/at-function-named-arguments`
	`127`	`+ background-image: if(sass($enable-gradients): linear-gradient(90deg, rgba($black, .25), rgba($black, .001)));`
`127`	`128`	`}`
`128`	`129`	`.carousel-control-next {`
`129`	`130`	`right: 0;`
`130`		`- background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);`
	`131`	`+ // stylelint-disable-next-line scss/at-function-named-arguments`
	`132`	`+ background-image: if(sass($enable-gradients): linear-gradient(270deg, rgba($black, .25), rgba($black, .001)));`
`131`	`133`	`}`
`132`	`134`
`133`	`135`	`// Icons for within`