@nx/rspack 0.0.0-pr-3-e51e28c → 0.0.0-pr-30418-4e2b721

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

@@ -96,8 +96,12 @@
       }
     },
     "20.5.0": {
-      "version": "20.5.0-beta.3",
+      "version": "20.5.0-beta.4",
       "packages": {
+        "sass-loader": {
+          "version": "^16.0.4",
+          "alwaysAddToPackageJson": false
+        },
         "@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": "0.0.0-pr-3-e51e28c",
+  "version": "0.0.0-pr-30418-4e2b721",
   "type": "commonjs",
   "repository": {
     "type": "git",
@@ -24,10 +24,10 @@
   "generators": "./generators.json",
   "executors": "./executors.json",
   "dependencies": {
-    "@nx/js": "0.0.0-pr-3-e51e28c",
-    "@nx/devkit": "0.0.0-pr-3-e51e28c",
-    "@nx/web": "0.0.0-pr-3-e51e28c",
-    "@nx/module-federation": "0.0.0-pr-3-e51e28c",
+    "@nx/js": "0.0.0-pr-30418-4e2b721",
+    "@nx/devkit": "0.0.0-pr-30418-4e2b721",
+    "@nx/web": "0.0.0-pr-30418-4e2b721",
+    "@nx/module-federation": "0.0.0-pr-30418-4e2b721",
     "@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/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/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/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/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/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);
@@ -85,9 +92,24 @@ 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
+        const existingValue = process.env['TS_NODE_COMPILER_OPTIONS'];
+        env['TS_NODE_COMPILER_OPTIONS'] = JSON.stringify({
+            ...(existingValue ? JSON.parse(existingValue) : {}),
+            module: 'CommonJS',
+            moduleResolution: 'Node10',
+        });
+    }
     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
@@ -108,23 +130,22 @@ 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

@@ -179,13 +179,13 @@ function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
     }
     // New TS Solution already has a typecheck target
     if (!options?.skipTypeChecking && !isUsingTsSolution) {
-        const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-        plugins.push(new ForkTsCheckerWebpackPlugin({
+        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
             },
         }));
     }

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/plugins/utils/plugins/rspack-nx-build-coordination-plugin.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RspackNxBuildCoordinationPlugin = void 0;
 const child_process_1 = require("child_process");
 const client_1 = require("nx/src/daemon/client/client");
-const enabled_1 = require("nx/src/daemon/client/enabled");
 const watch_1 = require("nx/src/command-line/watch/watch");
 const output_1 = require("nx/src/utils/output");
 class RspackNxBuildCoordinationPlugin {
@@ -14,7 +13,7 @@ class RspackNxBuildCoordinationPlugin {
         if (!skipInitialBuild) {
             this.buildChangedProjects();
         }
-        if ((0, enabled_1.isDaemonEnabled)()) {
+        if ((0, client_1.isDaemonEnabled)()) {
             this.startWatchingBuildableLibs();
         }
         else {

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;