DEV: Fix scss/no-global-function-names stylelint rule (#31280)

The ignored lines are using functions that have replacements ,but those
are not available on our sass version.

app/assets/stylesheets/common/base/edit-category.scss

@@ -1,4 +1,6 @@
-$category-settings-width: unquote("min(500px, 90%)");
+@use "sass:string";
+
+$category-settings-width: string.unquote("min(500px, 90%)");
 $number-input-width: 75px;
 
 div.edit-category {
@@ -59,7 +61,7 @@ div.edit-category {
 
   .edit-category-tab-general {
     .category-chooser {
-      width: unquote("min(340px, 90%)");
+      width: min(340px, 90%);
     }
   }
 

app/assets/stylesheets/common/components/footer-nav.scss

@@ -65,7 +65,7 @@ html.footer-nav-visible {
 
 @supports (padding: max(0px)) {
   .footer-nav.visible {
-    padding-bottom: unquote("max(5px, env(safe-area-inset-bottom))");
+    padding-bottom: max(5px, env(safe-area-inset-bottom));
   }
 }
 

app/assets/stylesheets/common/foundation/color_transformations.scss

@@ -2,6 +2,8 @@
 // any variables defined here can be added in theme color schemes
 // all variables should have the !default flag
 
+@use "sass:string";
+
 // primary
 $primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%) !default;
 $primary-low: dark-light-diff($primary, $secondary, 90%, -78%) !default;
@@ -141,9 +143,15 @@ $tertiary-med-or-tertiary: dark-light-choose(
   $tertiary
 ) !default;
 $secondary-or-primary: dark-light-choose($secondary, $primary) !default;
-$tertiary-or-white: dark-light-choose($tertiary, unquote("#fff")) !default;
-$facebook-or-white: dark-light-choose($facebook, unquote("#fff")) !default;
-$twitter-or-white: dark-light-choose($twitter, unquote("#fff")) !default;
+$tertiary-or-white: dark-light-choose(
+  $tertiary,
+  string.unquote("#fff")
+) !default;
+$facebook-or-white: dark-light-choose(
+  $facebook,
+  string.unquote("#fff")
+) !default;
+$twitter-or-white: dark-light-choose($twitter, string.unquote("#fff")) !default;
 
 // code highlighting
 // stack overflow light & dark color pallets

app/assets/stylesheets/common/foundation/math.scss

@@ -23,7 +23,7 @@ $SQRT2: 1.4142135623730951;
 //     fact(0) // 1
 //     fact(8) // 40320
 @function fact($x) {
-  @if $x < 0 or $x != floor($x) {
+  @if $x < 0 or $x != math.floor($x) {
     @warn "Argument for `fact()` must be a positive integer.";
     @return null;
   }
@@ -72,7 +72,7 @@ $SQRT2: 1.4142135623730951;
     }
 
     $b: $b * $b;
-    $exp: floor($exp * 0.5);
+    $exp: math.floor($exp * 0.5);
   }
   @return $x;
 }
@@ -87,7 +87,7 @@ $SQRT2: 1.4142135623730951;
     @return math.div(0, 0);
   }
 
-  $k: nth(frexp(math.div($x, $SQRT2)), 2);
+  $k: list.nth(frexp(math.div($x, $SQRT2)), 2);
   $x: math.div($x, ldexp(1, $k));
   $x: math.div($x - 1, $x + 1);
   $x2: $x * $x;
@@ -104,7 +104,7 @@ $SQRT2: 1.4142135623730951;
 }
 
 @function ipow($base, $exp) {
-  @if $exp != floor($exp) {
+  @if $exp != math.floor($exp) {
     @return error("Exponent for `ipow()` must be an integer.");
   }
 
@@ -119,7 +119,7 @@ $SQRT2: 1.4142135623730951;
       $r: $r * $base;
     }
 
-    $exp: floor($exp * 0.5);
+    $exp: math.floor($exp * 0.5);
     $base: $base * $base;
   }
   @return if($s != 0, math.div(1, $r), $r);
@@ -147,7 +147,7 @@ $SQRT2: 1.4142135623730951;
 //     pow(4, -2)  // 0.0625
 //     pow(4, 0.2) // 1.31951
 @function pow($base, $exp) {
-  @if $exp == floor($exp) {
+  @if $exp == math.floor($exp) {
     @return ipow($base, $exp);
   } @else {
     @return exp(log($base) * $exp);

app/assets/stylesheets/common/foundation/mixins.scss

@@ -5,7 +5,9 @@
 // Media queries
 // --------------------------------------------------
 
+@use "sass:color";
 @use "sass:math";
+@use "sass:string";
 
 $breakpoints: (
   mobile-small: 320px,
@@ -19,6 +21,7 @@ $breakpoints: (
 );
 
 @mixin breakpoint($bp, $rule: max-width, $type: screen, $sidebar: false) {
+  /* stylelint-disable-next-line scss/no-global-function-names */
   $bp-value: map-get($breakpoints, $bp);
 
   @if $rule == min-width {
@@ -34,6 +37,7 @@ $breakpoints: (
   // note that your breakpoint will need to be at the root level
   @if $sidebar {
     // when the sidebar is shown, we want to increase the breakpoints by the width of the sidebar
+    /* stylelint-disable-next-line scss/no-global-function-names */
     @media #{$type} and (#{$rule}: calc(#{map-get($breakpoints, $bp)} + #{$d-sidebar-width})) {
       .has-sidebar-page {
         @content;
@@ -170,10 +174,10 @@ $hpad: 0.65em;
   $encoded: "";
   $slice: 2000;
   $index: 0;
-  $loops: ceil(math.div(str-length($svg), $slice));
+  $loops: math.ceil(math.div(string.length($svg), $slice));
 
   @for $i from 1 through $loops {
-    $chunk: str-slice($svg, $index, $index + $slice - 1);
+    $chunk: string.slice($svg, $index, $index + $slice - 1);
     $chunk: str-replace($chunk, '"', "'");
     $chunk: str-replace($chunk, "<", "%3C");
     $chunk: str-replace($chunk, ">", "%3E");
@@ -194,12 +198,12 @@ $hpad: 0.65em;
 /// @param {String} $replace ('') - New value
 /// @return {String} - Updated string
 @function str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
+  $index: string.index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace +
+    @return string.slice($string, 1, $index - 1) + $replace +
       str-replace(
-        str-slice($string, $index + str-length($search)),
+        string.slice($string, $index + string.length($search)),
         $search,
         $replace
       );
@@ -217,7 +221,7 @@ $hpad: 0.65em;
 // rgba(var(--primary-low-rgb), 0.5)
 
 @function hexToRGB($hex) {
-  @return red($hex), green($hex), blue($hex);
+  @return color.red($hex), color.green($hex), color.blue($hex);
 }
 
 @function schemeType() {
@@ -232,8 +236,9 @@ $hpad: 0.65em;
   // public_image_path is added by the stylesheet importer
   // it returns a CDN or subfolder path (if applicable).
   // SCSS will compile (and return the relative path) if public_image_path is missing.
-  @if variable-exists(public_image_path) {
-    @if str-index("#{$path}", "/plugins") == 1 {
+  /* stylelint-disable-next-line scss/no-global-function-names */
+  @if global-variable-exists(public_image_path) {
+    @if string.index("#{$path}", "/plugins") == 1 {
       $plugin_asset_path: str-replace($public_image_path, "/images", "");
       @return url("#{$plugin_asset_path}#{$path}");
     } @else {

app/assets/stylesheets/common/foundation/variables.scss

@@ -6,7 +6,10 @@
 // Layout dimensions
 // --------------------------------------------------
 
+@use "sass:color";
 @use "sass:math";
+@use "sass:meta";
+@use "math" as discourse-math;
 
 $small-width: 800px !default;
 $medium-width: 995px !default;
@@ -22,17 +25,17 @@ $d-sidebar-narrow-width: 14em !default;
 // --------------------------------------------------
 
 $google: #fff !default;
-$google-hover: darken($google, 5%) !default;
+$google-hover: color.adjust($google, $lightness: -5%) !default;
 $instagram: #e1306c !default;
-$instagram-hover: darken($instagram, 15%) !default;
+$instagram-hover: color.adjust($instagram, $lightness: -15%) !default;
 $facebook: #0866ff !default;
-$facebook-hover: darken($facebook, 15%) !default;
+$facebook-hover: color.adjust($facebook, $lightness: -15%) !default;
 $cas: #70ba61 !default;
 $twitter: #000 !default;
 $github: #100e0f !default;
-$github-hover: lighten($github, 20%) !default;
+$github-hover: color.adjust($github, $lightness: 20%) !default;
 $discord: #7289da !default;
-$discord-hover: darken($discord, 10%) !default;
+$discord-hover: color.adjust($discord, $lightness: -10%) !default;
 
 // Badge color variables
 // --------------------------------------------------
@@ -72,8 +75,6 @@ $line-height-small: var(--line-height-small) !default;
 $line-height-medium: var(--line-height-medium) !default;
 $line-height-large: var(--line-height-large) !default;
 
-@import "common/foundation/math";
-
 // Z-index
 // --------------------------------------------------
 
@@ -108,10 +109,12 @@ $z-layers: (
 
 @function map-has-nested-keys($map, $keys...) {
   @each $key in $keys {
+    /* stylelint-disable-next-line scss/no-global-function-names */
     @if not map-has-key($map, $key) {
       @return false;
     }
 
+    /* stylelint-disable-next-line scss/no-global-function-names */
     $map: map-get($map, $key);
   }
   @return true;
@@ -119,6 +122,7 @@ $z-layers: (
 
 @function map-deep-get($map, $keys...) {
   @each $key in $keys {
+    /* stylelint-disable-next-line scss/no-global-function-names */
     $map: map-get($map, $key);
   }
   @return $map;
@@ -126,7 +130,7 @@ $z-layers: (
 
 @function z($layers...) {
   @if not map-has-nested-keys($z-layers, $layers...) {
-    @warn "No layer defined for `#{inspect($layers...)}` in $z-layers map. Check variables.scss, property omitted.";
+    @warn "No layer defined for `#{meta.inspect($layers...)}` in $z-layers map- Check variables.scss, property omitted.";
   }
   @return map-deep-get($z-layers, $layers...);
 }
@@ -137,7 +141,8 @@ $z-layers: (
 // w3c definition of color brightness https://www.w3.org/TR/AERT#color-contrast
 @function dc-color-brightness($color) {
   @return (
-    (red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114)
+    (color.red($color) * 0.299) + (color.green($color) * 0.587) +
+      (color.blue($color) * 0.114)
   );
 }
 
@@ -145,18 +150,18 @@ $z-layers: (
 @function srgb-scale($foreground, $background, $percent) {
   $ratio: math.div($percent, 100%);
   $iratio: 1 - $ratio;
-  $f_r2: red($foreground) * red($foreground);
-  $f_g2: green($foreground) * green($foreground);
-  $f_b2: blue($foreground) * blue($foreground);
-  $b_r2: red($background) * red($background);
-  $b_g2: green($background) * green($background);
-  $b_b2: blue($background) * blue($background);
+  $f_r2: color.red($foreground) * color.red($foreground);
+  $f_g2: color.green($foreground) * color.green($foreground);
+  $f_b2: color.blue($foreground) * color.blue($foreground);
+  $b_r2: color.red($background) * color.red($background);
+  $b_g2: color.green($background) * color.green($background);
+  $b_b2: color.blue($background) * color.blue($background);
   $r_r2: $f_r2 * $ratio + $b_r2 * $iratio;
   $r_g2: $f_g2 * $ratio + $b_g2 * $iratio;
   $r_b2: $f_b2 * $ratio + $b_b2 * $iratio;
-  $r_r: sqrt($r_r2);
-  $r_g: sqrt($r_g2);
-  $r_b: sqrt($r_b2);
+  $r_r: discourse-math.sqrt($r_r2);
+  $r_g: discourse-math.sqrt($r_g2);
+  $r_b: discourse-math.sqrt($r_b2);
   @return rgb($r_r, $r_g, $r_b);
 }
 
@@ -178,9 +183,9 @@ $z-layers: (
   @if dc-color-brightness($adjusted-color) <
     dc-color-brightness($comparison-color)
   {
-    @return scale-color($adjusted-color, $lightness: $lightness);
+    @return color.scale($adjusted-color, $lightness: $lightness);
   } @else {
-    @return scale-color($adjusted-color, $lightness: $darkness);
+    @return color.scale($adjusted-color, $lightness: $darkness);
   }
 }
 @function dark-light-choose($light-theme-result, $dark-theme-result) {

app/assets/stylesheets/mobile/compose.scss

@@ -9,7 +9,7 @@
 #reply-control {
   .reply-area {
     padding: 6px;
-    padding-bottom: unquote("max(env(safe-area-inset-bottom), 6px)");
+    padding-bottom: max(env(safe-area-inset-bottom), 6px);
     flex-grow: 1;
     min-height: 0;
   }

app/assets/stylesheets/mobile/topic-post.scss

@@ -246,10 +246,6 @@ nav.post-controls button.reply .d-icon {
   }
 }
 
-.post-actions {
-  /* overriding display: here was causing hidden element to take up space */
-}
-
 .post-action {
   float: right;
   margin-right: 10px;
@@ -432,7 +428,7 @@ span.highlighted {
 
 .posts-filtered-notice {
   padding-right: 8.5em;
-  padding-bottom: unquote("max(1em, env(safe-area-inset-bottom))");
+  padding-bottom: max(1em, env(safe-area-inset-bottom));
   flex-wrap: wrap;
   justify-content: flex-start;
   margin: 1em -9px;

stylelint.config.mjs

@@ -22,7 +22,6 @@ export default {
     "scss/at-extend-no-missing-placeholder": null,
     "scss/load-no-partial-leading-underscore": null,
     "scss/operator-no-newline-after": null,
-    "scss/no-global-function-names": null,
     "selector-id-pattern": null,
     "no-invalid-position-at-import-rule": null,
     "scss/at-function-pattern": null,