@nx/rspack 21.0.0-beta.1 → 21.0.0-beta.3

package/generators.json

@@ -28,6 +28,7 @@
       "description": "React application generator."
     },
     "convert-webpack": {
+      "alias": "convert-to-rspack",
       "factory": "./src/generators/convert-webpack/convert-webpack",
       "schema": "./src/generators/convert-webpack/schema.json",
       "description": "Convert a webpack application to use rspack."

package/migrations.json

@@ -94,6 +94,19 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "20.5.0": {
+      "version": "20.5.0-beta.4",
+      "packages": {
+        "sass-loader": {
+          "version": "^16.0.4",
+          "alwaysAddToPackageJson": false
+        },
+        "@rspack/core": {
+          "version": "^1.2.2",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   },
   "version": "0.1"

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": "21.0.0-beta.1",
+  "version": "21.0.0-beta.3",
   "type": "commonjs",
   "repository": {
     "type": "git",
@@ -24,10 +24,10 @@
   "generators": "./generators.json",
   "executors": "./executors.json",
   "dependencies": {
-    "@nx/js": "21.0.0-beta.1",
-    "@nx/devkit": "21.0.0-beta.1",
-    "@nx/web": "21.0.0-beta.1",
-    "@nx/module-federation": "21.0.0-beta.1",
+    "@nx/js": "21.0.0-beta.3",
+    "@nx/devkit": "21.0.0-beta.3",
+    "@nx/web": "21.0.0-beta.3",
+    "@nx/module-federation": "21.0.0-beta.3",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@rspack/core": "^1.1.5",
     "@rspack/dev-server": "^1.0.9",
@@ -37,13 +37,14 @@
     "css-loader": "^6.4.0",
     "enquirer": "~2.3.6",
     "express": "^4.21.2",
-    "fork-ts-checker-webpack-plugin": "7.2.13",
+    "ts-checker-rspack-plugin": "^1.1.1",
     "http-proxy-middleware": "^3.0.3",
     "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/dev-server/lib/get-dev-server-config.js

@@ -31,8 +31,7 @@ function getDevServerOptions(root, serveOptions, buildOptions) {
             htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
         },
         onListening(server) {
-            const isHttps = server.options.https ||
-                server.options.server?.type === 'https';
+            const isHttps = server.options.server?.type === 'https';
             devkit_1.logger.info(`NX Web Development Server is listening at ${isHttps ? 'https' : 'http'}://${server.options.host}:${server.options.port}${(0, serve_path_1.buildServePath)(buildOptions)}`);
         },
         open: false,

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/application/application.js

@@ -11,9 +11,6 @@ async function default_1(tree, _options) {
     const tasks = [];
     const initTask = await (0, init_1.default)(tree, {
         ..._options,
-        // TODO: Crystalize the default rspack.config.js file.
-        // The default setup isn't crystalized so don't add plugin.
-        addPlugin: false,
     });
     tasks.push(initTask);
     const options = await (0, normalize_options_1.normalizeOptions)(tree, _options);

package/src/generators/application/lib/normalize-options.js

@@ -1,24 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = normalizeOptions;
-const devkit_1 = require("@nx/devkit");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function normalizeOptions(host, options) {
-    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
-    const { projectName: appProjectName, projectRoot: appProjectRoot } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'application');
+    const { projectName, projectRoot: appProjectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
         ...options,
         projectType: 'application',
     });
     // --monorepo takes precedence over --rootProject
     // This won't be needed once we add --bundler=rspack to the @nx/react:app preset
     const rootProject = !options.monorepo && options.rootProject;
-    const e2eProjectName = options.rootProject
-        ? 'e2e'
-        : `${(0, devkit_1.names)(appProjectName).fileName}-e2e`;
+    const isTsSolutionSetup = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
+    const appProjectName = !isTsSolutionSetup || options.name ? projectName : importPath;
+    const e2eProjectName = options.rootProject ? 'e2e' : `${projectName}-e2e`;
     const normalized = {
         ...options,
         rootProject,
-        name: (0, devkit_1.names)(options.name).fileName,
+        name: appProjectName,
         projectName: appProjectName,
         appProjectRoot,
         e2eProjectName,

package/src/generators/configuration/configuration.js

@@ -10,9 +10,6 @@ const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-set
 async function configurationGenerator(tree, options) {
     const task = await (0, init_1.default)(tree, {
         ...options,
-        // TODO: Crystalize the default rspack.config.js file.
-        // The default setup isn't crystalized so don't add plugin.
-        addPlugin: false,
     });
     const { targets, root, projectType } = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const { target, framework } = (0, generator_utils_1.determineFrameworkAndTarget)(tree, options, root, targets);

package/src/generators/convert-webpack/convert-webpack.js

@@ -57,6 +57,29 @@ async function default_1(tree, options) {
         transformConfigFile(tree, rspackConfigPath);
     }
     (0, devkit_1.updateProjectConfiguration)(tree, options.project, project);
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    if (nxJson.plugins !== undefined && nxJson.plugins.length > 0) {
+        const nonRspackPlugins = nxJson.plugins.filter((plugin) => (typeof plugin !== 'string' && plugin.plugin !== '@nx/rspack/plugin') ||
+            (typeof plugin === 'string' && plugin !== '@nx/rspack/plugin'));
+        let rspackPlugins = nxJson.plugins.filter((plugin) => (typeof plugin !== 'string' && plugin.plugin === '@nx/rspack/plugin') ||
+            (typeof plugin === 'string' && plugin === '@nx/rspack/plugin'));
+        if (rspackPlugins.length === 0) {
+            rspackPlugins = rspackPlugins.map((plugin) => {
+                if (typeof plugin === 'string') {
+                    return {
+                        plugin: plugin,
+                        exclude: [`${project.root}/*`],
+                    };
+                }
+                return {
+                    ...plugin,
+                    exclude: [...(plugin.exclude ?? []), `${project.root}/*`],
+                };
+            });
+            nxJson.plugins = [...nonRspackPlugins, ...rspackPlugins];
+            (0, devkit_1.updateNxJson)(tree, nxJson);
+        }
+    }
     const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
         '@rspack/core': versions_1.rspackCoreVersion,
         '@rspack/dev-server': versions_1.rspackDevServerVersion,

package/src/generators/init/init.js

@@ -57,7 +57,6 @@ async function rspackInitGenerator(tree, schema) {
     const devDependencies = {
         '@rspack/core': versions_1.rspackCoreVersion,
         '@rspack/cli': versions_1.rspackCoreVersion,
-        '@rspack/plugin-minify': versions_1.rspackPluginMinifyVersion,
         '@rspack/plugin-react-refresh': versions_1.rspackPluginReactRefreshVersion,
         'react-refresh': versions_1.reactRefreshVersion,
     };
@@ -70,6 +69,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/index.d.ts

@@ -4,4 +4,5 @@ export * from './utils/config';
 export * from './utils/with-nx';
 export * from './utils/with-react';
 export * from './utils/with-web';
+export * from './utils/e2e-web-server-info-utils';
 export * from './plugins/use-legacy-nx-plugin/use-legacy-nx-plugin';

package/src/index.js

@@ -7,4 +7,5 @@ tslib_1.__exportStar(require("./utils/config"), exports);
 tslib_1.__exportStar(require("./utils/with-nx"), exports);
 tslib_1.__exportStar(require("./utils/with-react"), exports);
 tslib_1.__exportStar(require("./utils/with-web"), exports);
+tslib_1.__exportStar(require("./utils/e2e-web-server-info-utils"), exports);
 tslib_1.__exportStar(require("./plugins/use-legacy-nx-plugin/use-legacy-nx-plugin"), exports);

package/src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package.md

@@ -0,0 +1,30 @@
+#### Migrate withModuleFederation Import to New Package
+
+Update the withModuleFederation import to use @nx/module-federation/rspack.
+
+#### Sample Code Changes
+
+Update import paths for `withModuleFederation` and `withModuleFederationForSSR`.
+
+{% tabs %}
+{% tab label="Before" %}
+
+```ts {% fileName="apps/shell/rspack.config.ts" %}
+import {
+  withModuleFederation,
+  withModuleFederationForSSR,
+} from '@nx/rspack/module-federation';
+```
+
+{% /tab %}
+{% tab label="After" %}
+
+```ts {% fileName="apps/shell/rspack.config.ts" %}
+import {
+  withModuleFederation,
+  withModuleFederationForSSR,
+} from '@nx/module-federation/rspack';
+```
+
+{% /tab %}
+{% /tabs %}

package/src/migrations/update-20-3-0/ensure-nx-module-federation-package.md

@@ -0,0 +1,28 @@
+#### Ensure the @nx/module-federation Package is Installed
+
+If workspace includes Module Federation projects, ensure the new `@nx/module-federation` package is installed.
+
+#### Sample Code Changes
+
+{% tabs %}
+{% tab label="Before" %}
+
+```json {% fileName="package.json" %}
+{
+  "dependencies": {}
+}
+```
+
+{% /tab %}
+{% tab label="After" %}
+
+```json {% fileName="package.json" %}
+{
+  "dependencies": {
+    "@nx/module-federation": "20.3.0"
+  }
+}
+```
+
+{% /tab %}
+{% /tabs %}

package/src/plugins/nx-app-rspack-plugin/nx-app-rspack-plugin.js

@@ -27,6 +27,16 @@ class NxAppRspackPlugin {
         if (typeof target === 'string') {
             this.options.target = target;
         }
+        if (compiler.options.entry &&
+            compiler.options.entry['main'] &&
+            typeof compiler.options.entry['main'] === 'object' &&
+            Object.keys(compiler.options.entry['main']).length === 0) {
+            compiler.options.entry = {};
+        }
+        // Prefer `clean` option from Rspack config over our own.
+        if (typeof compiler.options.output.clean !== 'undefined') {
+            this.options.deleteOutputPath = false;
+        }
         (0, apply_base_config_1.applyBaseConfig)(this.options, compiler.options, {
             useNormalizedEntry: true,
         });

package/src/plugins/plugin.js

@@ -14,7 +14,14 @@ const resolve_user_defined_rspack_config_1 = require("../utils/resolve-user-defi
 const util_1 = require("@nx/js/src/plugins/typescript/util");
 const pmc = (0, devkit_1.getPackageManagerCommand)();
 function readTargetsCache(cachePath) {
-    return (0, fs_1.existsSync)(cachePath) ? (0, devkit_1.readJsonFile)(cachePath) : {};
+    try {
+        return process.env.NX_CACHE_PROJECT_GRAPH !== 'false'
+            ? (0, devkit_1.readJsonFile)(cachePath)
+            : {};
+    }
+    catch {
+        return {};
+    }
 }
 function writeTargetsToCache(cachePath, results) {
     (0, devkit_1.writeJsonFile)(cachePath, results);
@@ -52,16 +59,15 @@ async function createNodesInternal(configFilePath, options, context, targetsCach
         packageJson = (0, devkit_1.readJsonFile)((0, path_1.join)(context.workspaceRoot, projectRoot, 'package.json'));
     }
     const normalizedOptions = normalizeOptions(options);
-    // We do not want to alter how the hash is calculated, so appending the config file path to the hash
-    // to prevent vite/vitest files overwriting the target cache created by the other
+    const lockFileHash = (0, file_hasher_1.hashFile)((0, path_1.join)(context.workspaceRoot, (0, js_1.getLockFileName)((0, devkit_1.detectPackageManager)(context.workspaceRoot)))) ?? '';
     const nodeHash = (0, file_hasher_1.hashArray)([
-        ...[
-            (0, path_1.join)(context.workspaceRoot, configFilePath),
-            (0, path_1.join)(context.workspaceRoot, (0, js_1.getLockFileName)((0, devkit_1.detectPackageManager)(context.workspaceRoot))),
-        ].map(file_hasher_1.hashFile),
-        (0, file_hasher_1.hashObject)(options),
+        (0, file_hasher_1.hashFile)((0, path_1.join)(context.workspaceRoot, configFilePath)),
+        lockFileHash,
+        (0, file_hasher_1.hashObject)({ ...options, isTsSolutionSetup }),
         (0, file_hasher_1.hashObject)(packageJson),
     ]);
+    // We do not want to alter how the hash is calculated, so appending the config file path to the hash
+    // to prevent vite/vitest files overwriting the target cache created by the other
     const hash = `${nodeHash}_${configFilePath}`;
     targetsCache[hash] ??= await createRspackTargets(configFilePath, projectRoot, normalizedOptions, context, isTsSolutionSetup);
     const { targets, metadata } = targetsCache[hash];
@@ -86,9 +92,23 @@ async function createRspackTargets(configFilePath, projectRoot, options, context
         }
     }
     const targets = {};
+    const env = {};
+    const isTsConfig = ['.ts', '.cts', '.mts'].includes((0, path_1.extname)(configFilePath));
+    if (isTsConfig) {
+        // https://rspack.dev/config/#using-ts-node
+        env['TS_NODE_COMPILER_OPTIONS'] = JSON.stringify({
+            module: 'CommonJS',
+            moduleResolution: 'Node10',
+            customConditions: null,
+        });
+    }
     targets[options.buildTargetName] = {
         command: `rspack build`,
-        options: { cwd: projectRoot, args: ['--node-env=production'] },
+        options: {
+            cwd: projectRoot,
+            args: ['--node-env=production'],
+            env,
+        },
         cache: true,
         dependsOn: [`^${options.buildTargetName}`],
         inputs: 'production' in namedInputs
@@ -109,20 +129,25 @@ async function createRspackTargets(configFilePath, projectRoot, options, context
         outputs,
     };
     targets[options.serveTargetName] = {
+        continuous: true,
         command: `rspack serve`,
         options: {
             cwd: projectRoot,
             args: ['--node-env=development'],
+            env,
         },
     };
     targets[options.previewTargetName] = {
+        continuous: true,
         command: `rspack serve`,
         options: {
             cwd: projectRoot,
             args: ['--node-env=production'],
+            env,
         },
     };
     targets[options.serveStaticTargetName] = {
+        continuous: true,
         executor: '@nx/web:file-server',
         options: {
             buildTarget: options.buildTargetName,

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

@@ -13,6 +13,7 @@ const nx_tsconfig_paths_rspack_plugin_1 = require("./plugins/nx-tsconfig-paths-r
 const get_terser_ecma_version_1 = require("./get-terser-ecma-version");
 const nodeExternals = require("webpack-node-externals");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const is_lib_buildable_1 = require("./is-lib-buildable");
 const IGNORED_RSPACK_WARNINGS = [
     /The comment file/i,
     /could not find any license/i,
@@ -42,7 +43,7 @@ function applyNxIndependentConfig(options, config) {
     config.node = false;
     config.mode =
         // When the target is Node avoid any optimizations, such as replacing `process.env.NODE_ENV` with build time value.
-        config.target === 'node'
+        config.target === 'node' || config.target === 'async-node'
             ? 'none'
             : // Otherwise, make sure it matches `process.env.NODE_ENV`.
                 // When mode is development or production, rspack will automatically
@@ -59,13 +60,20 @@ function applyNxIndependentConfig(options, config) {
                         : 'none');
     // When target is Node, the Webpack mode will be set to 'none' which disables in memory caching and causes a full rebuild on every change.
     // So to mitigate this we enable in memory caching when target is Node and in watch mode.
-    config.cache = options.target === 'node' && options.watch ? true : undefined;
+    config.cache =
+        (options.target === 'node' || options.target === 'async-node') &&
+            options.watch
+            ? true
+            : undefined;
     config.devtool =
         options.sourceMap === true ? 'source-map' : options.sourceMap;
     config.output = {
         ...(config.output ?? {}),
-        libraryTarget: config.output?.libraryTarget ??
-            (options.target === 'node' ? 'commonjs' : undefined),
+        libraryTarget: options.target === 'node'
+            ? 'commonjs'
+            : options.target === 'async-node'
+                ? 'commonjs-module'
+                : undefined,
         path: config.output?.path ??
             (options.outputPath
                 ? // If path is relative, it is relative from project root (aka cwd).
@@ -81,7 +89,7 @@ function applyNxIndependentConfig(options, config) {
         hashFunction: config.output?.hashFunction ?? 'xxhash64',
         // Disabled for performance
         pathinfo: config.output?.pathinfo ?? false,
-        clean: options.deleteOutputPath,
+        clean: config.output?.clean ?? options.deleteOutputPath,
     };
     config.watch = options.watch;
     config.watchOptions = {
@@ -177,15 +185,18 @@ function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
     if (options.useTsconfigPaths) {
         plugins.push(new nx_tsconfig_paths_rspack_plugin_1.NxTsconfigPathsRspackPlugin({ ...options, tsConfig }));
     }
-    // New TS Solution already has a typecheck target
-    if (!options?.skipTypeChecking && !isUsingTsSolution) {
-        const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-        plugins.push(new ForkTsCheckerWebpackPlugin({
+    // New TS Solution already has a typecheck target but allow it to run during serve
+    if ((!options?.skipTypeChecking && !isUsingTsSolution) ||
+        (isUsingTsSolution &&
+            options?.skipTypeChecking === false &&
+            process.env['WEBPACK_SERVE'])) {
+        const { TsCheckerRspackPlugin } = require('ts-checker-rspack-plugin');
+        plugins.push(new TsCheckerRspackPlugin({
             typescript: {
                 configFile: path.isAbsolute(tsConfig)
                     ? tsConfig
                     : path.join(options.root, tsConfig),
-                memoryLimit: options.memoryLimit || 2018,
+                memoryLimit: options.memoryLimit || 8192, // default memory limit is 8192
             },
         }));
     }
@@ -263,9 +274,34 @@ function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
         plugins.push(new stats_json_plugin_1.StatsJsonPlugin());
     }
     const externals = [];
-    if (options.target === 'node' && options.externalDependencies === 'all') {
+    if ((options.target === 'node' || options.target === 'async-node') &&
+        options.externalDependencies === 'all') {
         const modulesDir = `${options.root}/node_modules`;
-        externals.push(nodeExternals({ modulesDir }));
+        const graph = options.projectGraph;
+        const projectName = options.projectName;
+        const deps = graph?.dependencies?.[projectName] ?? [];
+        // Collect non-buildable TS project references so that they are bundled
+        // in the final output. This is needed for projects that are not buildable
+        // but are referenced by buildable projects. This is needed for the new TS
+        // solution setup.
+        const nonBuildableWorkspaceLibs = isUsingTsSolution
+            ? deps
+                .filter((dep) => {
+                const node = graph.nodes?.[dep.target];
+                if (!node || node.type !== 'lib')
+                    return false;
+                const hasBuildTarget = 'build' in (node.data?.targets ?? {});
+                if (hasBuildTarget) {
+                    return false;
+                }
+                // If there is no build target we check the package exports to see if they reference
+                // source files
+                return !(0, is_lib_buildable_1.isBuildableLibrary)(node);
+            })
+                .map((dep) => graph.nodes?.[dep.target]?.data?.metadata?.js?.packageName)
+                .filter((name) => !!name)
+            : [];
+        externals.push(nodeExternals({ modulesDir, allowlist: nonBuildableWorkspaceLibs }));
     }
     else if (Array.isArray(options.externalDependencies)) {
         externals.push(function (ctx, callback) {
@@ -333,6 +369,8 @@ function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
                             tsx: true,
                         },
                         transform: {
+                            legacyDecorator: true,
+                            decoratorMetadata: true,
                             react: {
                                 runtime: 'automatic',
                                 pragma: 'React.createElement',

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/is-lib-buildable.d.ts

@@ -0,0 +1,7 @@
+import { type ProjectGraphProjectNode } from '@nx/devkit';
+/**
+ * Check if the library is buildable.
+ * @param node from the project graph
+ * @returns boolean
+ */
+export declare function isBuildableLibrary(node: ProjectGraphProjectNode): boolean;

package/src/plugins/utils/is-lib-buildable.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBuildableLibrary = isBuildableLibrary;
+function isSourceFile(path) {
+    return ['.ts', '.tsx', '.mts', '.cts'].some((ext) => path.endsWith(ext));
+}
+function isBuildableExportMap(packageExports) {
+    if (!packageExports || Object.keys(packageExports).length === 0) {
+        return false; // exports = {} → not buildable
+    }
+    const isCompiledExport = (value) => {
+        if (typeof value === 'string') {
+            return !isSourceFile(value);
+        }
+        if (typeof value === 'object' && value !== null) {
+            return Object.entries(value).some(([key, subValue]) => {
+                if (key === 'types' ||
+                    key === 'development' ||
+                    key === './package.json')
+                    return false;
+                return typeof subValue === 'string' && !isSourceFile(subValue);
+            });
+        }
+        return false;
+    };
+    if (packageExports['.']) {
+        return isCompiledExport(packageExports['.']);
+    }
+    return Object.entries(packageExports).some(([key, value]) => key !== '.' && isCompiledExport(value));
+}
+/**
+ * Check if the library is buildable.
+ * @param node from the project graph
+ * @returns boolean
+ */
+function isBuildableLibrary(node) {
+    if (!node.data.metadata?.js) {
+        return false;
+    }
+    const { packageExports, packageMain } = node.data.metadata.js;
+    // if we have exports only check this else fallback to packageMain
+    if (packageExports) {
+        return isBuildableExportMap(packageExports);
+    }
+    return (typeof packageMain === 'string' &&
+        packageMain !== '' &&
+        !isSourceFile(packageMain));
+}

package/src/plugins/utils/loaders/stylesheet-loaders.js

@@ -99,7 +99,7 @@ function postcssOptionsCreator(options, { includePaths, forCssModules = false, }
                 ? []
                 : [
                     (0, postcss_cli_resources_1.PostcssCliResources)({
-                        baseHref: options.baseHref,
+                        baseHref: options.baseHref ? options.baseHref : undefined,
                         deployUrl: options.deployUrl,
                         loader,
                         filename: `[name]${hashFormat.file}.[ext]`,

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

@@ -55,7 +55,7 @@ export interface NxAppRspackPluginOptions {
     /**
      * Set <base href> for the resulting index.html.
      */
-    baseHref?: string;
+    baseHref?: string | false;
     /**
      * Build the libraries from source. Default is `true`.
      */
@@ -63,6 +63,7 @@ export interface NxAppRspackPluginOptions {
     commonChunk?: boolean;
     /**
      * Delete the output path before building.
+     * @deprecated Use the `output.clean` option in Rspack. https://rspack.dev/config/output#outputclean
      */
     deleteOutputPath?: boolean;
     /**
@@ -148,6 +149,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 +188,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/e2e-web-server-info-utils.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export declare function getRspackE2EWebServerInfo(tree: Tree, projectName: string, configFilePath: string, isPluginBeingAdded: boolean, e2ePortOverride?: number): Promise<import("@nx/devkit/src/generators/e2e-web-server-info-utils").E2EWebServerDetails>;

package/src/utils/e2e-web-server-info-utils.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRspackE2EWebServerInfo = getRspackE2EWebServerInfo;
+const devkit_1 = require("@nx/devkit");
+const e2e_web_server_info_utils_1 = require("@nx/devkit/src/generators/e2e-web-server-info-utils");
+async function getRspackE2EWebServerInfo(tree, projectName, configFilePath, isPluginBeingAdded, e2ePortOverride) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    let e2ePort = e2ePortOverride ?? 4200;
+    if (nxJson.targetDefaults?.['serve'] &&
+        nxJson.targetDefaults?.['serve'].options?.port) {
+        e2ePort = nxJson.targetDefaults?.['serve'].options?.port;
+    }
+    return (0, e2e_web_server_info_utils_1.getE2EWebServerInfo)(tree, projectName, {
+        plugin: '@nx/rspack/plugin',
+        serveTargetName: 'serveTargetName',
+        serveStaticTargetName: 'previewTargetName',
+        configFilePath,
+    }, {
+        defaultServeTargetName: 'serve',
+        defaultServeStaticTargetName: 'preview',
+        defaultE2EWebServerAddress: `http://localhost:${e2ePort}`,
+        defaultE2ECiBaseUrl: 'http://localhost:4200',
+        defaultE2EPort: e2ePort,
+    }, isPluginBeingAdded);
+}

package/src/utils/versions.d.ts

@@ -1,16 +1,16 @@
 export declare const nxVersion: any;
-export declare const rspackCoreVersion = "^1.1.5";
+export declare const rspackCoreVersion = "1.2.2";
 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,19 @@
 "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.rspackDevServerVersion = exports.rspackCoreVersion = exports.nxVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
-exports.rspackCoreVersion = '^1.1.5';
+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;