fix: silence Sass deprecation warnings

.storybook/main.js

@@ -130,8 +130,16 @@ module.exports = {
           options: {
             sourceMap: true,
             implementation: require('sass-embedded'),
+            api: 'modern-compiler',
+            webpackImporter: false,
             sassOptions: {
-              includePaths: ['ui/css/', 'node_modules/'],
+              quietDeps: true,
+              // TODO: Remove after https://github.com/MetaMask/metamask-extension/issues/44725
+              silenceDeprecations: ['import'],
+              loadPaths: [
+                path.resolve(__dirname, '../ui/css'),
+                path.resolve(__dirname, '../node_modules'),
+              ],
             },
           },
         },

development/webpack/webpack.config.ts

@@ -18,6 +18,7 @@
 import HtmlBundlerPlugin from 'html-bundler-webpack-plugin';
 import rtlCss from 'postcss-rtlcss';
 import autoprefixer from 'autoprefixer';
+import * as sassEmbedded from 'sass-embedded';
 import tailwindcss from 'tailwindcss';
 import { discardFontFace } from '../postcss-plugins/discard-font-face';
 import { loadBuildTypesConfig } from '../lib/build-type';
@@ -528,30 +529,31 @@
             loader: 'sass-loader',
             options: {
               // Use 'sass-embedded', as it is usually faster than 'sass'
-              implementation: 'sass-embedded',
+              implementation: sassEmbedded,
+              api: 'modern-compiler',
+              // Disable Webpack's Sass importer because Sass's native
+              // importer keeps stylesheet resolution independent of Webpack
+              // and is faster for our current import graph. All current
+              // non-relative imports resolve through the loadPaths below.
+              webpackImporter: false,
               sassOptions: {
-                api: 'modern',
                 // We don't need to specify the charset because the HTML
                 // already does and browsers use the HTML's charset for CSS.
                 // Additionally, webpack + sass can cause problems with the
                 // charset placement, as described here:
                 // https://github.com/webpack-contrib/css-loader/issues/1212
                 charset: false,
-                // The order of includePaths is important; prefer our own
+                quietDeps: true,
+                // TODO: Remove after https://github.com/MetaMask/metamask-extension/issues/44725
+                silenceDeprecations: ['import'],
+                // The order of loadPaths is important; prefer our own
                 // folders over `node_modules`
-                includePaths: [
+                loadPaths: [
                   // enables aliases to `@use design - system`,
                   // `@use utilities`, etc.
                   join(context, '../ui/css'),
                   join(context, '../node_modules'),
                 ],
-                // Disable the webpackImporter, as we:
-                //  a) don't want to rely on it in case we want to switch away
-                //     from webpack in the future
-                //  b) the sass importer is faster
-                //  c) the "modern" sass api doesn't work with the
-                //     webpackImporter yet.
-                webpackImporter: false,
               },
             },
           },

development/webpack/webpack.integration.tests.config.ts

@@ -13,6 +13,7 @@
 import CopyPlugin from 'copy-webpack-plugin';
 import rtlCss from 'postcss-rtlcss';
 import autoprefixer from 'autoprefixer';
+import * as sassEmbedded from 'sass-embedded';
 import tailwindcss from 'tailwindcss';
 
 const context = join(__dirname, '../../app');
@@ -88,32 +89,33 @@
             loader: 'sass-loader',
             options: {
               // Use 'sass-embedded', as it is usually faster than 'sass'
-              implementation: 'sass-embedded',
+              implementation: sassEmbedded,
+              api: 'modern-compiler',
+              // Disable Webpack's Sass importer because Sass's native
+              // importer keeps stylesheet resolution independent of Webpack
+              // and is faster for our current import graph. All current
+              // non-relative imports resolve through the loadPaths below.
+              webpackImporter: false,
               sassOptions: {
-                api: 'modern',
                 // We don't need to specify the charset because the HTML
                 // already does and browsers use the HTML's charset for CSS.
                 // Additionally, webpack + sass can cause problems with the
                 // charset placement, as described here:
                 // https://github.com/webpack-contrib/css-loader/issues/1212
                 charset: false,
+                quietDeps: true,
+                // TODO: Remove after https://github.com/MetaMask/metamask-extension/issues/44725
+                silenceDeprecations: ['import'],
                 // Always compress for integration tests to avoid ENOBUFS errors
-                outputStyle: 'compressed',
-                // The order of includePaths is important; prefer our own
+                style: 'compressed',
+                // The order of loadPaths is important; prefer our own
                 // folders over `node_modules`
-                includePaths: [
+                loadPaths: [
                   // enables aliases to `@use design - system`,
                   // `@use utilities`, etc.
                   join(context, '../ui/css'),
                   join(context, '../node_modules'),
                 ],
-                // Disable the webpackImporter, as we:
-                //  a) don't want to rely on it in case we want to switch away
-                //     from webpack in the future
-                //  b) the sass importer is faster
-                //  c) the "modern" sass api doesn't work with the
-                //     webpackImporter yet.
-                webpackImporter: false,
               },
               sourceMap: true,
             },

lavamoat/webpack/build/policy.json

@@ -2638,6 +2638,8 @@
     },
     "sass-loader": {
       "builtin": {
+        "node:path": true,
+        "node:url": true,
         "path": true,
         "url": true,
         "util": true
@@ -2648,7 +2650,6 @@
         "process.platform": true
       },
       "packages": {
-        "webpack>neo-async": true,
         "sass-embedded": true
       }
     },

package.json

@@ -783,7 +783,7 @@
     "remote-redux-devtools": "^0.5.16",
     "resolve-url-loader": "^3.1.5",
     "sass-embedded": "^1.100.0",
-    "sass-loader": "^14.1.1",
+    "sass-loader": "^17.0.0",
     "schema-utils": "^4.2.0",
     "selenium-webdriver": "^4.44.0",
     "semver": "^7.5.4",

ui/components/app/snaps/snap-ui-renderer/index.scss

@@ -111,7 +111,7 @@
 
   .mm-text-field--disabled,
   .toggle-button--disabled,
-  .toggle-button--disabled *div {
+  .toggle-button--disabled * div {
     cursor: not-allowed;
   }
 

ui/css/design-system/_typography.scss

@@ -15,19 +15,19 @@ $typography-variants: (
   'h9': 0.5rem,
 );
 
-$font-size-h1: map-get($typography-variants, 'h1');
-$font-size-h2: map-get($typography-variants, 'h2');
-$font-size-h3: map-get($typography-variants, 'h3');
-$font-size-h4: map-get($typography-variants, 'h4');
-$font-size-h5: map-get($typography-variants, 'h5');
-$font-size-h6: map-get($typography-variants, 'h6');
-$font-size-paragraph: map-get($typography-variants, 'paragraph');
-$font-size-h7: map-get($typography-variants, 'h7');
-$font-size-h8: map-get($typography-variants, 'h8');
-$font-size-h9: map-get($typography-variants, 'h9');
+$font-size-h1: map.get($typography-variants, 'h1');
+$font-size-h2: map.get($typography-variants, 'h2');
+$font-size-h3: map.get($typography-variants, 'h3');
+$font-size-h4: map.get($typography-variants, 'h4');
+$font-size-h5: map.get($typography-variants, 'h5');
+$font-size-h6: map.get($typography-variants, 'h6');
+$font-size-paragraph: map.get($typography-variants, 'paragraph');
+$font-size-h7: map.get($typography-variants, 'h7');
+$font-size-h8: map.get($typography-variants, 'h8');
+$font-size-h9: map.get($typography-variants, 'h9');
 
 @mixin typography($variant) {
-  font-size: map-get($typography-variants, $variant);
+  font-size: map.get($typography-variants, $variant);
   font-family: $font-family;
   line-height: 140%;
   font-style: normal;

ui/css/utilities/fonts.scss

@@ -3,7 +3,9 @@
 // the build process *might* inject a function, `fontPath`, that returns the
 // path to where the font awesome font files will be once the app is built.
 // the webpack version doesn't need an explicit font path.
-$fa-font-path: if(meta.function-exists('-mm-fa-path'), -mm-fa-path(), null);
+$fa-font-path: if(
+  sass(meta.function-exists('-mm-fa-path')): -mm-fa-path()
+);
 // our own fonts are relative to this file AND the built css file, so we don't
 // need to get fancy with our own fonts like we do with font awesome's
 $font-path: './fonts';

yarn.lock

@@ -33183,7 +33183,7 @@ __metadata:
     reselect: "npm:^5.1.1"
     resolve-url-loader: "npm:^3.1.5"
     sass-embedded: "npm:^1.100.0"
-    sass-loader: "npm:^14.1.1"
+    sass-loader: "npm:^17.0.0"
     schema-utils: "npm:^4.2.0"
     selenium-webdriver: "npm:^4.44.0"
     semver: "npm:^7.5.4"
@@ -39032,29 +39032,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass-loader@npm:^14.1.1":
-  version: 14.1.1
-  resolution: "sass-loader@npm:14.1.1"
-  dependencies:
-    neo-async: "npm:^2.6.2"
+"sass-loader@npm:^17.0.0":
+  version: 17.0.0
+  resolution: "sass-loader@npm:17.0.0"
   peerDependencies:
-    "@rspack/core": 0.x || 1.x
-    node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+    "@rspack/core": 0.x || ^1.0.0 || ^2.0.0-0
     sass: ^1.3.0
     sass-embedded: "*"
     webpack: ^5.0.0
   peerDependenciesMeta:
     "@rspack/core":
       optional: true
-    node-sass:
-      optional: true
     sass:
       optional: true
     sass-embedded:
       optional: true
     webpack:
       optional: true
-  checksum: 10/6cc0cb8143d04cb462c10efffbab86e9c4ea971bbdbc22d8c01f4ebf774fcf9b4fed775aaec6af23aeb7d440b37dce76cf6f2746ae36421d16ad4182f2220bc8
+  checksum: 10/f740c61f235a31220af1a53f1482f0033714333fbf9ce77896f0fdd75793ce6c0a95e16adf2952e3e390a8157327db70ca4aafe754fce7061b8cecd2e1083173
   languageName: node
   linkType: hard