diff --git a/.storybook/main.js b/.storybook/main.js index ca37441033f0..d5ac25ae0e24 100644 --- a/.storybook/main.js +++ b/.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'), + ], }, }, }, diff --git a/development/webpack/webpack.config.ts b/development/webpack/webpack.config.ts index 4f23524f7784..5c40d49db43d 100644 --- a/development/webpack/webpack.config.ts +++ b/development/webpack/webpack.config.ts @@ -18,6 +18,7 @@ import CopyPlugin from 'copy-webpack-plugin'; 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 @@ const config = { 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, }, }, }, diff --git a/development/webpack/webpack.integration.tests.config.ts b/development/webpack/webpack.integration.tests.config.ts index 93256a1086f0..448e14bd86f4 100644 --- a/development/webpack/webpack.integration.tests.config.ts +++ b/development/webpack/webpack.integration.tests.config.ts @@ -13,6 +13,7 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin'; 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 @@ const config = { 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, }, diff --git a/lavamoat/webpack/build/policy.json b/lavamoat/webpack/build/policy.json index e618d0e2ee8b..05a9838ec4ab 100644 --- a/lavamoat/webpack/build/policy.json +++ b/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 } }, diff --git a/package.json b/package.json index 678a9e4127ff..ca5f94d93c56 100644 --- a/package.json +++ b/package.json @@ -798,7 +798,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", diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss index 6b673922c462..ff98e79fc819 100644 --- a/ui/components/app/snaps/snap-ui-renderer/index.scss +++ b/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; } diff --git a/ui/css/design-system/_typography.scss b/ui/css/design-system/_typography.scss index f53e833c35c1..8251e70b15b0 100644 --- a/ui/css/design-system/_typography.scss +++ b/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; diff --git a/ui/css/utilities/fonts.scss b/ui/css/utilities/fonts.scss index bd5e1ce45897..ba7d4254d4ff 100644 --- a/ui/css/utilities/fonts.scss +++ b/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'; diff --git a/yarn.lock b/yarn.lock index 6c707a3933ef..4afcc3f0f0e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -33437,7 +33437,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" @@ -39275,29 +39275,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