Improve SCSS code base

scorecards-site/assets/css/_mixins.scss

@@ -1,16 +1,19 @@
+@use "sass:string";
+@use "sass:map";
+
 // Mixin helper
 
 // =============================================================================
 // String Replace
 // =============================================================================
 
 @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
       );
@@ -44,11 +47,11 @@
 
   @each $ext in $exts {
     $extmod: if(
-      map-has-key($extmods, $ext),
-      $ext + map-get($extmods, $ext),
+      map.get($extmods, $ext),
+      $ext + map.get($extmods, $ext),
       $ext
     );
-    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
+    $format: if(map.get($formats, $ext), map.get($formats, $ext), $ext);
     $src: append(
       $src,
       url(quote($path + '.' + $extmod)) format(quote($format)),

scorecards-site/assets/css/helpers/_helper-colors.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .color,
 %color {
   &--black {
@@ -52,10 +54,10 @@
   }
 
   &--warning {
-    background-color: lighten($c-yellow, 5%);
+    background-color: color.adjust($c-yellow, $lightness: 5%);
   }
 
   &--alert {
-    background-color: lighten($c-red, 8%);
+    background-color: color.adjust($c-red, $lightness: 8%);
   }
 }

scorecards-site/assets/css/settings/_set-breakpoints.scss

@@ -1,5 +1,8 @@
+@use 'sass:math';
+@use 'sass:meta';
+
 @function strip-unit($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
+  @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
     @return math.div($number, $number * 0 + 1);
   }
 

scorecards-site/assets/css/utilities/_utl-breakpoints.scss

@@ -1,3 +1,6 @@
+@use "sass:list";
+@use "sass:map";
+
 // Breakpoint viewport sizes and media queries.
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
@@ -17,17 +20,17 @@
 @function breakpoint-next(
   $name,
   $breakpoints: $grid-breakpoints,
-  $breakpoint-names: map-keys($breakpoints)
+  $breakpoint-names: map.keys($breakpoints)
 ) {
-  $n: index($breakpoint-names, $name);
+  $n: list.index($breakpoint-names, $name);
 
   @if not $n {
     @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
   }
 
   @return if(
-    $n < length($breakpoint-names),
-    nth($breakpoint-names, $n + 1),
+    $n < list.length($breakpoint-names),
+    list.nth($breakpoint-names, $n + 1),
     null
   );
 }
@@ -37,7 +40,7 @@
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-  $min: map-get($breakpoints, $name);
+  $min: map.get($breakpoints, $name);
 
   @return if($min != 0, $min, null);
 }

scorecards-site/nuxt.config.js

@@ -151,5 +151,22 @@ export default {
   },
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
-  build: {},
+  build: {
+    postcss: {
+      postcssOptions: {
+        plugins: [
+          function replaceColorAdjust() {
+            return {
+              postcssPlugin: 'replace-color-adjust',
+              Declaration(decl) {
+                if (decl.prop && decl.prop.trim() === 'color-adjust') {
+                  decl.replaceWith({ prop: 'print-color-adjust', value: decl.value })
+                }
+              },
+            }
+          },
+        ],
+      },
+    },
+  },
 }