From 28f15bae0799faaf9bfc0c35f78b982b0e7c813a Mon Sep 17 00:00:00 2001
From: Bartek Szopka <83575+bartaz@users.noreply.github.com>
Date: Tue, 21 Jan 2025 12:25:32 +0100
Subject: [PATCH] Fix (or silence) Sass warnings (#4988)

* Ignore warnings from dependencies (Vanilla code)

* Silence import warnings

* Update color functions usage

* Update map.get usage

* Silence warnings in webpack build
---
 package.json                                  |  2 +-
 static/sass/_patterns_first-snap-flow.scss    |  6 ++++--
 static/sass/_snapcraft_p-build.scss           |  4 +++-
 static/sass/_snapcraft_p-progressive-bar.scss | 10 ++++++----
 static/sass/styles.scss                       |  6 ++++--
 webpack.config.rules.js                       | 14 +++++++++++++-
 6 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 5e2d4fd4a0..5f98d3aae2 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "test-python": "yarn run lint-python && FLASK_DEBUG=0 python3 -m unittest discover tests",
     "test-python-job": "SECRET_KEY=insecure_secret_key coverage run  --source=. -m unittest discover tests",
     "build": "yarn run build-js && yarn run build-css",
-    "build-css": "sass static/sass/styles.scss:static/css/styles.css static/sass/styles-embedded.scss:static/css/styles-embedded.css --load-path=node_modules --style=compressed && postcss --use autoprefixer --no-map --replace 'static/css/**/*.css'",
+    "build-css": "sass --quiet-deps --silence-deprecation=import static/sass/styles.scss:static/css/styles.css static/sass/styles-embedded.scss:static/css/styles-embedded.css --load-path=node_modules --style=compressed && postcss --use autoprefixer --no-map --replace 'static/css/**/*.css'",
     "build-js": "yarn run copy-3rd-party-js && yarn run build-js-bundle",
     "copy-3rd-party-js": "mkdir -p static/js/modules && cp node_modules/d3/dist/d3.min.js static/js/modules && cp node_modules/clipboard/dist/clipboard.min.js static/js/modules && cp node_modules/raven-js/dist/raven.min.js static/js/modules",
     "build-js-bundle": "webpack && yarn build-latest-news",
diff --git a/static/sass/_patterns_first-snap-flow.scss b/static/sass/_patterns_first-snap-flow.scss
index cb74718686..150f6f68f0 100644
--- a/static/sass/_patterns_first-snap-flow.scss
+++ b/static/sass/_patterns_first-snap-flow.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin snapcraft-p-first-snap-flow {
   .p-flow-details {
     width: 100%;
@@ -16,11 +18,11 @@
   // before this vanilla bug is fixed:
   // https://github.com/canonical-web-and-design/vanilla-framework/issues/2301
   .p-accordion p {
-    margin-bottom: map-get($sp-after, p) - map-get($nudges, nudge--p);
+    margin-bottom: map.get($sp-after, p) - map.get($nudges, nudge--p);
   }
 
   .p-accordion__panel {
-    $icon-size: map-get($icon-sizes, accordion);
+    $icon-size: map.get($icon-sizes, accordion);
 
     overflow: visible;
     padding-left: $sph--large + $icon-size + $sph--large; // same as accordion button
diff --git a/static/sass/_snapcraft_p-build.scss b/static/sass/_snapcraft_p-build.scss
index 95210a5749..9a0bd02162 100644
--- a/static/sass/_snapcraft_p-build.scss
+++ b/static/sass/_snapcraft_p-build.scss
@@ -1,5 +1,7 @@
+@use "sass:map";
+
 @mixin snapcraft-p-build {
-  $icon-size: map-get($icon-sizes, default);
+  $icon-size: map.get($icon-sizes, default);
 
   .p-icon--github-white {
     @extend %icon;
diff --git a/static/sass/_snapcraft_p-progressive-bar.scss b/static/sass/_snapcraft_p-progressive-bar.scss
index efd9f97e79..953035ea41 100644
--- a/static/sass/_snapcraft_p-progressive-bar.scss
+++ b/static/sass/_snapcraft_p-progressive-bar.scss
@@ -1,7 +1,9 @@
+@use "sass:color";
+
 @mixin snapcraft-p-progressive-bar {
-  $inactive: scale-color($color-link, $lightness: 90%);
+  $inactive: color.scale($color-link, $lightness: 90%);
   $active: $color-link;
-  $target: scale-color($color-link, $lightness: -20%);
+  $target: color.scale($color-link, $lightness: -20%);
 
   %bar {
     border-radius: 9px 0 0 9px;
@@ -45,11 +47,11 @@
     pointer-events: none;
 
     .progressive-bar__current {
-      background: lighten(grayscale($active), 20);
+      background: color.adjust(color.grayscale($active), $lightness: 20%, $space: hsl);
     }
 
     .progressive-bar__target {
-      background: lighten(grayscale($target), 20);
+      background: color.adjust(color.grayscale($target), $lightness: 20%, $space: hsl);
     }
   }
 
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
index 2484723cbc..3996d9cf1c 100644
--- a/static/sass/styles.scss
+++ b/static/sass/styles.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 // colour definitions
 $ubuntu-orange: #e95420;
 $color-brand: #00302f;
@@ -20,7 +22,7 @@ $font-display-option: swap;
 $breakpoint-medium: 619px;
 
 // vanilla patterns
-@import "vanilla-framework/scss/vanilla";
+@import "vanilla-framework";
 @include vanilla;
 
 // import cookie policy
@@ -416,7 +418,7 @@ dl {
     background-color: $colors--light-theme--border-default;
     display: block;
     height: 100%;
-    left: map-get($grid-gutter-widths, default) * -0.5;
+    left: map.get($grid-gutter-widths, default) * -0.5;
     position: absolute;
     width: 1px;
   }
diff --git a/webpack.config.rules.js b/webpack.config.rules.js
index b7501966bd..ef18ee77bc 100644
--- a/webpack.config.rules.js
+++ b/webpack.config.rules.js
@@ -13,7 +13,19 @@ module.exports = [
   },
   {
     test: /\.s[ac]ss$/i,
-    use: ["style-loader", "css-loader", "sass-loader"],
+    use: [
+      "style-loader",
+      "css-loader",
+      {
+        loader: "sass-loader",
+        options: {
+          sassOptions: {
+               quietDeps: true,
+               silenceDeprecations: ["import", "global-builtin"],
+          },
+        },
+      },
+    ],
   },
   // TODO:
   // we should get rid of using globals making expose-loader unnecessary