@nx/rspack 20.5.0-beta.4 → 20.5.0-beta.5

package/migrations.json

@@ -96,8 +96,16 @@
       }
     },
     "20.5.0": {
-      "version": "20.5.0-beta.3",
+      "version": "20.5.0-beta.4",
       "packages": {
+        "sass-embedded": {
+          "version": "^1.83.4",
+          "alwaysAddToPackageJson": true
+        },
+        "sass-loader": {
+          "version": "^16.0.4",
+          "alwaysAddToPackageJson": true
+        },
         "@rspack/core": {
           "version": "^1.2.2",
           "alwaysAddToPackageJson": false

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nx/rspack",
   "description": "The Nx Plugin for Rspack contains executors and generators that support building applications using Rspack.",
-  "version": "20.5.0-beta.4",
+  "version": "20.5.0-beta.5",
   "type": "commonjs",
   "repository": {
     "type": "git",
@@ -24,10 +24,10 @@
   "generators": "./generators.json",
   "executors": "./executors.json",
   "dependencies": {
-    "@nx/js": "20.5.0-beta.4",
-    "@nx/devkit": "20.5.0-beta.4",
-    "@nx/web": "20.5.0-beta.4",
-    "@nx/module-federation": "20.5.0-beta.4",
+    "@nx/js": "20.5.0-beta.5",
+    "@nx/devkit": "20.5.0-beta.5",
+    "@nx/web": "20.5.0-beta.5",
+    "@nx/module-federation": "20.5.0-beta.5",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@rspack/core": "^1.1.5",
     "@rspack/dev-server": "^1.0.9",
@@ -42,8 +42,9 @@
     "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": "^1.85.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",
@@ -55,8 +56,8 @@
     "webpack-node-externals": "^3.0.0"
   },
   "peerDependencies": {
-    "@module-federation/enhanced": "^0.8.8",
-    "@module-federation/node": "^2.6.21"
+    "@module-federation/enhanced": "^0.9.0",
+    "@module-federation/node": "^2.6.26"
   },
   "nx-migrations": {
     "migrations": "./migrations.json"

package/src/executors/rspack/lib/normalize-options.js

@@ -22,6 +22,7 @@ function normalizeOptions(options, root, projectRoot, sourceRoot) {
                 styles: options.optimization,
             }
             : options.optimization,
+        sassImplementation: options.sassImplementation ?? 'sass',
     };
     if (options.assets) {
         normalizedOptions.assets = (0, normalize_options_1.normalizeAssets)(options.assets, root, sourceRoot, projectRoot, false // executor assets are relative to workspace root for consistency

package/src/executors/rspack/schema.d.ts

@@ -35,7 +35,12 @@ export interface RspackExecutorSchema {
   sourceMap?: boolean | DevTool;
   standardRspackConfigFunction?: boolean;
   statsJson?: boolean;
-  stylePreprocessorOptions?: any;
+  stylePreprocessorOptions?: {
+    includePaths?: string[];
+    sassOptions?: Record<string, any>;
+    lessOptions?: Record<string, any>;
+  };
+  sassImplementation?: 'sass' | 'sass-embedded';
   styles?: Array<ExtraEntryPointClass | string>;
   target?: 'web' | 'node';
   transformers?: TransformerEntry[];

package/src/executors/rspack/schema.json

@@ -245,10 +245,24 @@
           "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
     },
+    "sassImplementation": {
+      "type": "string",
+      "description": "The implementation of the SASS compiler to use. Can be either `sass` or `sass-embedded`. Defaults to `sass-embedded`.",
+      "enum": ["sass", "sass-embedded"],
+      "default": "sass"
+    },
     "styles": {
       "type": "array",
       "description": "External Styles which will be included with the application",

package/src/generators/init/init.js

@@ -70,6 +70,10 @@ async function rspackInitGenerator(tree, schema) {
     if (schema.style === 'less') {
         devDependencies['less-loader'] = versions_1.lessLoaderVersion;
     }
+    if (schema.style === 'scss') {
+        devDependencies['sass-loader'] = versions_1.sassLoaderVersion;
+        devDependencies['sass-embedded'] = versions_1.sassEmbeddedVersion;
+    }
     if (schema.framework !== 'none' || schema.devServer) {
         devDependencies['@rspack/dev-server'] = versions_1.rspackDevServerVersion;
     }

package/src/plugins/utils/apply-web-config.js

@@ -54,6 +54,8 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
     const globalStylePaths = [];
     // Determine hashing format.
     const hashFormat = (0, hash_format_1.getOutputHashFormat)(options.outputHashing);
+    const sassOptions = options.stylePreprocessorOptions?.sassOptions;
+    const lessOptions = options.stylePreprocessorOptions?.lessOptions;
     const includePaths = [];
     if (options?.stylePreprocessorOptions?.includePaths?.length > 0) {
         options.stylePreprocessorOptions.includePaths.forEach((includePath) => includePaths.push((0, path_1.resolve)(options.root, includePath)));
@@ -88,11 +90,15 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                 {
                     loader: require.resolve('sass-loader'),
                     options: {
-                        implementation: require('sass'),
+                        implementation: options.sassImplementation === 'sass-embedded'
+                            ? require.resolve('sass-embedded')
+                            : require.resolve('sass'),
+                        api: 'modern-compiler',
                         sassOptions: {
                             fiber: false,
                             precision: 8,
                             includePaths,
+                            ...(sassOptions ?? {}),
                         },
                     },
                 },
@@ -108,6 +114,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                     options: {
                         lessOptions: {
                             paths: includePaths,
+                            ...(lessOptions ?? {}),
                         },
                     },
                 },
@@ -143,13 +150,17 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                 {
                     loader: require.resolve('sass-loader'),
                     options: {
-                        implementation: require('sass'),
+                        api: 'modern-compiler',
+                        implementation: options.sassImplementation === 'sass-embedded'
+                            ? require.resolve('sass-embedded')
+                            : require.resolve('sass'),
                         sourceMap: !!options.sourceMap,
                         sassOptions: {
                             fiber: false,
                             // bootstrap-sass requires a minimum precision of 8
                             precision: 8,
                             includePaths,
+                            ...(sassOptions ?? {}),
                         },
                     },
                 },
@@ -167,6 +178,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                         lessOptions: {
                             javascriptEnabled: true,
                             ...lessPathOptions,
+                            ...(lessOptions ?? {}),
                         },
                     },
                 },
@@ -203,13 +215,17 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                 {
                     loader: require.resolve('sass-loader'),
                     options: {
-                        implementation: require('sass'),
+                        api: 'modern-compiler',
+                        implementation: options.sassImplementation === 'sass-embedded'
+                            ? require.resolve('sass-embedded')
+                            : require.resolve('sass'),
                         sourceMap: !!options.sourceMap,
                         sassOptions: {
                             fiber: false,
                             // bootstrap-sass requires a minimum precision of 8
                             precision: 8,
                             includePaths,
+                            ...(sassOptions ?? {}),
                         },
                     },
                 },
@@ -227,6 +243,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                         lessOptions: {
                             javascriptEnabled: true,
                             ...lessPathOptions,
+                            ...(lessOptions ?? {}),
                         },
                     },
                 },

package/src/plugins/utils/models.d.ts

@@ -148,6 +148,10 @@ export interface NxAppRspackPluginOptions {
      * Add an additional chunk for the rspack runtime. Defaults to `true` when `target === 'web'`.
      */
     runtimeChunk?: boolean;
+    /**
+     * The implementation of the SASS compiler to use. Can be either `sass` or `sass-embedded`. Defaults to `sass-embedded`.
+     */
+    sassImplementation?: 'sass' | 'sass-embedded';
     /**
      * External scripts that will be included before the main application entry.
      */
@@ -183,7 +187,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.
      */

package/src/plugins/utils/plugins/normalize-options.js

@@ -77,6 +77,7 @@ function normalizeOptions(options) {
         projectRoot: projectNode.data.root,
         root: devkit_1.workspaceRoot,
         runtimeChunk: combinedPluginAndMaybeExecutorOptions.runtimeChunk ?? true,
+        sassImplementation: combinedPluginAndMaybeExecutorOptions.sassImplementation ?? 'sass',
         scripts: combinedPluginAndMaybeExecutorOptions.scripts ?? [],
         sourceMap: combinedPluginAndMaybeExecutorOptions.sourceMap ?? !isProd,
         sourceRoot,

package/src/utils/versions.d.ts

@@ -4,13 +4,14 @@ export declare const rspackDevServerVersion = "1.0.9";
 export declare const rspackPluginMinifyVersion = "^0.7.5";
 export declare const rspackPluginReactRefreshVersion = "^1.0.0";
 export declare const lessLoaderVersion = "~11.1.3";
+export declare const sassLoaderVersion = "^16.0.4";
+export declare const sassEmbeddedVersion = "^1.83.4";
 export declare const reactRefreshVersion = "~0.14.0";
 export declare const nestjsCommonVersion = "~9.0.0";
 export declare const nestjsCoreVersion = "~9.0.0";
 export declare const nestjsPlatformExpressVersion = "~9.0.0";
 export declare const nestjsMicroservicesVersion = "~9.0.0";
 export declare const lessVersion = "4.1.3";
-export declare const sassVersion = "^1.42.1";
 export declare const stylusVersion = "^0.55.0";
 export declare const eslintPluginImportVersion = "2.27.5";
 export declare const eslintPluginJsxA11yVersion = "6.7.1";

package/src/utils/versions.js

@@ -1,19 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.stylusVersion = exports.sassVersion = exports.lessVersion = exports.nestjsMicroservicesVersion = exports.nestjsPlatformExpressVersion = exports.nestjsCoreVersion = exports.nestjsCommonVersion = exports.reactRefreshVersion = exports.lessLoaderVersion = exports.rspackPluginReactRefreshVersion = exports.rspackPluginMinifyVersion = exports.rspackDevServerVersion = exports.rspackCoreVersion = exports.nxVersion = void 0;
+exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.stylusVersion = exports.lessVersion = exports.nestjsMicroservicesVersion = exports.nestjsPlatformExpressVersion = exports.nestjsCoreVersion = exports.nestjsCommonVersion = exports.reactRefreshVersion = exports.sassEmbeddedVersion = exports.sassLoaderVersion = exports.lessLoaderVersion = exports.rspackPluginReactRefreshVersion = exports.rspackPluginMinifyVersion = exports.rspackDevServerVersion = exports.rspackCoreVersion = exports.nxVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
 exports.rspackCoreVersion = '1.2.2';
 exports.rspackDevServerVersion = '1.0.9';
 exports.rspackPluginMinifyVersion = '^0.7.5';
 exports.rspackPluginReactRefreshVersion = '^1.0.0';
 exports.lessLoaderVersion = '~11.1.3';
+exports.sassLoaderVersion = '^16.0.4';
+exports.sassEmbeddedVersion = '^1.83.4';
 exports.reactRefreshVersion = '~0.14.0';
 exports.nestjsCommonVersion = '~9.0.0';
 exports.nestjsCoreVersion = '~9.0.0';
 exports.nestjsPlatformExpressVersion = '~9.0.0';
 exports.nestjsMicroservicesVersion = '~9.0.0';
 exports.lessVersion = '4.1.3';
-exports.sassVersion = '^1.42.1';
 exports.stylusVersion = '^0.55.0';
 exports.eslintPluginImportVersion = '2.27.5';
 exports.eslintPluginJsxA11yVersion = '6.7.1';

package/src/utils/with-web.d.ts

@@ -8,10 +8,13 @@ export interface WithWebOptions {
     generateIndexHtml?: boolean;
     index?: string;
     postcssConfig?: string;
+    sassImplementation?: 'sass' | 'sass-embedded';
     scripts?: Array<ExtraEntryPointClass | string>;
     styles?: Array<ExtraEntryPointClass | string>;
     stylePreprocessorOptions?: {
         includePaths?: string[];
+        sassOptions?: Record<string, any>;
+        lessOptions?: Record<string, any>;
     };
     cssModules?: boolean;
     ssr?: boolean;