feat(webpack): use sass-embedded and modern-compiler for sass

nrwl · Feb 12, 2025 · 77ebc57 · 77ebc57
1 parent 7c5fcf3
commit 77ebc57
Show file tree

Hide file tree

Showing 20 changed files with 538 additions and 118 deletions.
diff --git a/docs/generated/manifests/nx-api.json b/docs/generated/manifests/nx-api.json
@@ -5139,6 +5139,16 @@
       }
     },
     "migrations": {
+      "/nx-api/rspack/migrations/20.5.0-package-updates": {
+        "description": "",
+        "file": "generated/packages/rspack/migrations/20.5.0-package-updates.json",
+        "hidden": false,
+        "name": "20.5.0-package-updates",
+        "version": "20.5.0-beta.3",
+        "originalFilePath": "/packages/rspack",
+        "path": "/nx-api/rspack/migrations/20.5.0-package-updates",
+        "type": "migration"
+      },
       "/nx-api/rspack/migrations/ensure-nx-module-federation-package": {
         "description": "If workspace includes Module Federation projects, ensure the new @nx/module-federation package is installed.",
         "file": "generated/packages/rspack/migrations/ensure-nx-module-federation-package.json",
@@ -5925,6 +5935,16 @@
       }
     },
     "migrations": {
+      "/nx-api/webpack/migrations/20.5.0-package-updates": {
+        "description": "",
+        "file": "generated/packages/webpack/migrations/20.5.0-package-updates.json",
+        "hidden": false,
+        "name": "20.5.0-package-updates",
+        "version": "20.5.0-beta.3",
+        "originalFilePath": "/packages/webpack",
+        "path": "/nx-api/webpack/migrations/20.5.0-package-updates",
+        "type": "migration"
+      },
       "/nx-api/webpack/migrations/19.7.0-package-updates": {
         "description": "",
         "file": "generated/packages/webpack/migrations/19.7.0-package-updates.json",

diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json
@@ -5107,6 +5107,16 @@
       }
     ],
     "migrations": [
+      {
+        "description": "",
+        "file": "generated/packages/rspack/migrations/20.5.0-package-updates.json",
+        "hidden": false,
+        "name": "20.5.0-package-updates",
+        "version": "20.5.0-beta.3",
+        "originalFilePath": "/packages/rspack",
+        "path": "rspack/migrations/20.5.0-package-updates",
+        "type": "migration"
+      },
       {
         "description": "If workspace includes Module Federation projects, ensure the new @nx/module-federation package is installed.",
         "file": "generated/packages/rspack/migrations/ensure-nx-module-federation-package.json",
@@ -5888,6 +5898,16 @@
       }
     ],
     "migrations": [
+      {
+        "description": "",
+        "file": "generated/packages/webpack/migrations/20.5.0-package-updates.json",
+        "hidden": false,
+        "name": "20.5.0-package-updates",
+        "version": "20.5.0-beta.3",
+        "originalFilePath": "/packages/webpack",
+        "path": "webpack/migrations/20.5.0-package-updates",
+        "type": "migration"
+      },
       {
         "description": "",
         "file": "generated/packages/webpack/migrations/19.7.0-package-updates.json",

diff --git a/docs/generated/packages/rspack/executors/rspack.json b/docs/generated/packages/rspack/executors/rspack.json
@@ -286,6 +286,14 @@
             "description": "Paths to include. Paths will be resolved to project root.",
             "type": "array",
             "items": { "type": "string" }
+          },
+          "sassOptions": {
+            "description": "Options to pass to sass-loader.",
+            "type": "object"
+          },
+          "lessOptions": {
+            "description": "Options to pass to less-loader.",
+            "type": "object"
           }
         },
         "additionalProperties": false

diff --git a/docs/generated/packages/rspack/migrations/20.5.0-package-updates.json b/docs/generated/packages/rspack/migrations/20.5.0-package-updates.json
@@ -0,0 +1,15 @@
+{
+  "name": "20.5.0-package-updates",
+  "version": "20.5.0-beta.3",
+  "packages": {
+    "sass-embedded": { "version": "^1.83.4", "alwaysAddToPackageJson": true },
+    "sass-loader": { "version": "^16.0.4", "alwaysAddToPackageJson": true }
+  },
+  "aliases": [],
+  "description": "",
+  "hidden": false,
+  "implementation": "",
+  "path": "/packages/rspack",
+  "schema": null,
+  "type": "migration"
+}
diff --git a/docs/generated/packages/webpack/migrations/20.5.0-package-updates.json b/docs/generated/packages/webpack/migrations/20.5.0-package-updates.json
@@ -0,0 +1,15 @@
+{
+  "name": "20.5.0-package-updates",
+  "version": "20.5.0-beta.3",
+  "packages": {
+    "sass-loader": { "version": "^16.0.4", "alwaysAddToPackageJson": false },
+    "sass-embedded": { "version": "^1.83.4", "alwaysAddToPackageJson": true }
+  },
+  "aliases": [],
+  "description": "",
+  "hidden": false,
+  "implementation": "",
+  "path": "/packages/webpack",
+  "schema": null,
+  "type": "migration"
+}
diff --git a/package.json b/package.json
@@ -281,7 +281,8 @@
     "rollup-plugin-typescript2": "^0.36.0",
     "rxjs": "^7.8.0",
     "sass": "1.55.0",
-    "sass-loader": "^12.2.0",
+    "sass-embedded": "^1.83.4",
+    "sass-loader": "^16.0.4",
     "semver": "^7.6.3",
     "source-map-loader": "^5.0.0",
     "source-map-support": "0.5.19",

diff --git a/packages/rspack/.eslintrc.json b/packages/rspack/.eslintrc.json
@@ -49,7 +49,8 @@
               "@module-federation/sdk",
               "@module-federation/enhanced",
               "css-loader",
-              "webpack"
+              "webpack",
+              "sass-embedded"
             ]
           }
         ]

diff --git a/packages/rspack/migrations.json b/packages/rspack/migrations.json
@@ -94,6 +94,19 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "20.5.0": {
+      "version": "20.5.0-beta.3",
+      "packages": {
+        "sass-embedded": {
+          "version": "^1.83.4",
+          "alwaysAddToPackageJson": true
+        },
+        "sass-loader": {
+          "version": "^16.0.4",
+          "alwaysAddToPackageJson": true
+        }
+      }
     }
   },
   "version": "0.1"

diff --git a/packages/rspack/package.json b/packages/rspack/package.json
@@ -42,8 +42,8 @@
     "less-loader": "11.1.0",
     "license-webpack-plugin": "^4.0.2",
     "loader-utils": "^2.0.3",
-    "sass": "^1.42.1",
-    "sass-loader": "^12.2.0",
+    "sass-embedded": "^1.83.4",
+    "sass-loader": "^16.0.4",
     "source-map-loader": "^5.0.0",
     "style-loader": "^3.3.0",
     "picocolors": "^1.1.0",

diff --git a/packages/rspack/src/executors/rspack/schema.json b/packages/rspack/src/executors/rspack/schema.json
@@ -245,6 +245,14 @@
           "items": {
             "type": "string"
           }
+        },
+        "sassOptions": {
+          "description": "Options to pass to sass-loader.",
+          "type": "object"
+        },
+        "lessOptions": {
+          "description": "Options to pass to less-loader.",
+          "type": "object"
         }
       },
       "additionalProperties": false

diff --git a/packages/rspack/src/generators/init/init.ts b/packages/rspack/src/generators/init/init.ts
@@ -17,6 +17,8 @@ import {
   rspackDevServerVersion,
   rspackPluginMinifyVersion,
   rspackPluginReactRefreshVersion,
+  sassEmbeddedVersion,
+  sassLoaderVersion,
 } from '../../utils/versions';
 import { InitGeneratorSchema } from './schema';
 
@@ -101,6 +103,10 @@ export async function rspackInitGenerator(
   if (schema.style === 'less') {
     devDependencies['less-loader'] = lessLoaderVersion;
   }
+  if (schema.style === 'scss') {
+    devDependencies['sass-loader'] = sassLoaderVersion;
+    devDependencies['sass-embedded'] = sassEmbeddedVersion;
+  }
 
   if (schema.framework !== 'none' || schema.devServer) {
     devDependencies['@rspack/dev-server'] = rspackDevServerVersion;

diff --git a/packages/rspack/src/plugins/utils/apply-web-config.ts b/packages/rspack/src/plugins/utils/apply-web-config.ts
@@ -98,6 +98,8 @@ export function applyWebConfig(
   // Determine hashing format.
   const hashFormat = getOutputHashFormat(options.outputHashing as string);
 
+  const sassOptions = options.stylePreprocessorOptions?.sassOptions;
+  const lessOptions = options.stylePreprocessorOptions?.lessOptions;
   const includePaths: string[] = [];
   if (options?.stylePreprocessorOptions?.includePaths?.length > 0) {
     options.stylePreprocessorOptions.includePaths.forEach(
@@ -140,11 +142,13 @@ export function applyWebConfig(
         {
           loader: require.resolve('sass-loader'),
           options: {
-            implementation: require('sass'),
+            implementation: require('sass-embedded'),
+            api: 'modern-compiler',
             sassOptions: {
               fiber: false,
               precision: 8,
               includePaths,
+              ...(sassOptions ?? {}),
             },
           },
         },
@@ -160,6 +164,7 @@ export function applyWebConfig(
           options: {
             lessOptions: {
               paths: includePaths,
+              ...(lessOptions ?? {}),
             },
           },
         },
@@ -199,13 +204,15 @@ export function applyWebConfig(
         {
           loader: require.resolve('sass-loader'),
           options: {
-            implementation: require('sass'),
+            api: 'modern-compiler',
+            implementation: require('sass-embedded'),
             sourceMap: !!options.sourceMap,
             sassOptions: {
               fiber: false,
               // bootstrap-sass requires a minimum precision of 8
               precision: 8,
               includePaths,
+              ...(sassOptions ?? {}),
             },
           },
         },
@@ -223,6 +230,7 @@ export function applyWebConfig(
             lessOptions: {
               javascriptEnabled: true,
               ...lessPathOptions,
+              ...(lessOptions ?? {}),
             },
           },
         },
@@ -263,13 +271,15 @@ export function applyWebConfig(
         {
           loader: require.resolve('sass-loader'),
           options: {
-            implementation: require('sass'),
+            api: 'modern-compiler',
+            implementation: require('sass-embedded'),
             sourceMap: !!options.sourceMap,
             sassOptions: {
               fiber: false,
               // bootstrap-sass requires a minimum precision of 8
               precision: 8,
               includePaths,
+              ...(sassOptions ?? {}),
             },
           },
         },
@@ -287,6 +297,7 @@ export function applyWebConfig(
             lessOptions: {
               javascriptEnabled: true,
               ...lessPathOptions,
+              ...(lessOptions ?? {}),
             },
           },
         },

diff --git a/packages/rspack/src/plugins/utils/models.ts b/packages/rspack/src/plugins/utils/models.ts
@@ -194,7 +194,11 @@ export interface NxAppRspackPluginOptions {
   /**
    * Options for the style preprocessor. e.g. `{ "includePaths": [] }` for SASS.
    */
-  stylePreprocessorOptions?: any;
+  stylePreprocessorOptions?: {
+    includePaths?: string[];
+    sassOptions?: Record<string, any>;
+    lessOptions?: Record<string, any>;
+  };
   /**
    * External stylesheets that will be included with the application.
    */

diff --git a/packages/rspack/src/utils/versions.ts b/packages/rspack/src/utils/versions.ts
@@ -5,6 +5,8 @@ export const rspackDevServerVersion = '1.0.9';
 export const rspackPluginMinifyVersion = '^0.7.5';
 export const rspackPluginReactRefreshVersion = '^1.0.0';
 export const lessLoaderVersion = '~11.1.3';
+export const sassLoaderVersion = '^16.0.4';
+export const sassEmbeddedVersion = '^1.83.4';
 
 export const reactRefreshVersion = '~0.14.0';
 
@@ -14,7 +16,6 @@ export const nestjsPlatformExpressVersion = '~9.0.0';
 export const nestjsMicroservicesVersion = '~9.0.0';
 
 export const lessVersion = '4.1.3';
-export const sassVersion = '^1.42.1';
 export const stylusVersion = '^0.55.0';
 
 export const eslintPluginImportVersion = '2.27.5';

diff --git a/packages/webpack/.eslintrc.json b/packages/webpack/.eslintrc.json
@@ -47,6 +47,7 @@
               "less",
               "less-loader",
               "postcss-loader",
+              "sass-embedded",
               "sass-loader",
               "style-loader",
               "stylus",

diff --git a/packages/webpack/migrations.json b/packages/webpack/migrations.json
@@ -35,6 +35,19 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "20.5.0": {
+      "version": "20.5.0-beta.3",
+      "packages": {
+        "sass-loader": {
+          "version": "^16.0.4",
+          "alwaysAddToPackageJson": false
+        },
+        "sass-embedded": {
+          "version": "^1.83.4",
+          "alwaysAddToPackageJson": true
+        }
+      }
     }
   }
 }
diff --git a/packages/webpack/package.json b/packages/webpack/package.json
@@ -51,8 +51,8 @@
     "postcss-import": "~14.1.0",
     "postcss-loader": "^6.1.1",
     "rxjs": "^7.8.0",
-    "sass": "^1.42.1",
-    "sass-loader": "^12.2.0",
+    "sass-embedded": "^1.83.4",
+    "sass-loader": "^16.0.4",
     "source-map-loader": "^5.0.0",
     "style-loader": "^3.3.0",
     "stylus": "^0.64.0",