@nx/rspack 20.1.0-beta.1 → 20.1.0-beta.2

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.1.0-beta.1",
+  "version": "20.1.0-beta.2",
   "type": "commonjs",
   "repository": {
     "type": "git",
@@ -24,24 +24,31 @@
   "generators": "./generators.json",
   "executors": "./executors.json",
   "dependencies": {
-    "@nx/js": "20.1.0-beta.1",
-    "@nx/devkit": "20.1.0-beta.1",
-    "@nx/web": "20.1.0-beta.1",
+    "@nx/js": "20.1.0-beta.2",
+    "@nx/devkit": "20.1.0-beta.2",
+    "@nx/web": "20.1.0-beta.2",
     "@phenomnomnominal/tsquery": "~5.0.1",
+    "@rspack/core": "^1.0.4",
+    "@rspack/dev-server": "^1.0.4",
+    "@rspack/plugin-react-refresh": "^1.0.0",
+    "autoprefixer": "^10.4.9",
+    "chalk": "~4.1.0",
+    "css-loader": "^6.4.0",
     "enquirer": "~2.3.6",
     "express": "^4.19.2",
     "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",
-    "stylus-loader": "^7.1.0",
+    "style-loader": "^3.3.0",
+    "postcss-import": "~14.1.0",
     "postcss-loader": "^8.1.1",
-    "@rspack/core": "^1.0.4",
-    "@rspack/dev-server": "^1.0.4",
-    "@rspack/plugin-react-refresh": "^1.0.0",
-    "chalk": "~4.1.0",
+    "postcss": "^8.4.38",
     "tsconfig-paths": "^4.1.2",
-    "tslib": "^2.3.0"
+    "tslib": "^2.3.0",
+    "webpack-subresource-integrity": "^5.1.0"
   },
   "peerDependencies": {
     "@module-federation/enhanced": "~0.6.0",

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

@@ -6,8 +6,10 @@ export interface RspackExecutorSchema {
   index?: string;
   tsConfig?: string;
   typeCheck?: boolean;
+  skipTypeChecking?: boolean;
   outputPath?: string;
   outputFileName?: string;
+  index?: string;
   indexHtml?: string;
   mode?: Mode;
   watch?: boolean;
@@ -23,6 +25,13 @@ export interface RspackExecutorSchema {
   generatePackageJson?: boolean;
 }
 
+export interface AssetGlobPattern {
+  glob: string;
+  input: string;
+  output: string;
+  ignore?: string[];
+}
+
 export interface FileReplacement {
   replace: string;
   with: string;
@@ -32,3 +41,11 @@ export interface OptimizationOptions {
   scripts: boolean;
   styles: boolean;
 }
+
+export interface NormalizedRspackExecutorSchema extends RspackExecutorSchema {
+  outputFileName: string;
+  assets: AssetGlobPattern[];
+  root: string;
+  projectRoot: string;
+  sourceRoot: string;
+}

package/src/executors/rspack/schema.json

@@ -26,15 +26,13 @@
       "type": "string",
       "description": "The tsconfig file to build the project."
     },
-    "typeCheck": {
+    "skipTypeChecking": {
+      "alias": "typeCheck",
       "type": "boolean",
-      "description": "Skip the type checking."
-    },
-    "indexHtml": {
-      "type": "string",
-      "description": "The path to the index.html file."
+      "description": "Skip the type checking. Default is `false`."
     },
     "index": {
+      "alias": "indexHtml",
       "type": "string",
       "description": "HTML File which will be contain the application.",
       "x-completion-type": "file",

package/src/plugins/utils/apply-web-config.d.ts

@@ -0,0 +1,5 @@
+import { type Configuration } from '@rspack/core';
+import { NormalizedNxAppRspackPluginOptions } from './models';
+export declare function applyWebConfig(options: NormalizedNxAppRspackPluginOptions, config?: Configuration, { useNormalizedEntry, }?: {
+    useNormalizedEntry?: boolean;
+}): void;

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

@@ -0,0 +1,383 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyWebConfig = applyWebConfig;
+const core_1 = require("@rspack/core");
+const instantiate_script_plugins_1 = require("./instantiate-script-plugins");
+const path_1 = require("path");
+const webpack_subresource_integrity_1 = require("webpack-subresource-integrity");
+const hash_format_1 = require("./hash-format");
+const normalize_entry_1 = require("./normalize-entry");
+const stylesheet_loaders_1 = require("./loaders/stylesheet-loaders");
+function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
+    if (global.NX_GRAPH_CREATION)
+        return;
+    // Defaults that was applied from executor schema previously.
+    options.runtimeChunk ??= true; // need this for HMR and other things to work
+    options.extractCss ??= true;
+    options.generateIndexHtml ??= true;
+    options.index = options.index
+        ? (0, path_1.join)(options.root, options.index)
+        : (0, path_1.join)(options.root, options.projectGraph.nodes[options.projectName].data.sourceRoot, 'index.html');
+    options.styles ??= [];
+    options.scripts ??= [];
+    const isProd = process.env.NODE_ENV === 'production' || options.mode === 'production';
+    const plugins = [
+        new core_1.EnvironmentPlugin({
+            NODE_ENV: isProd ? 'production' : 'development',
+        }),
+    ];
+    const stylesOptimization = typeof options.optimization === 'object'
+        ? options.optimization.styles
+        : options.optimization;
+    if (Array.isArray(options.scripts)) {
+        plugins.push(...(0, instantiate_script_plugins_1.instantiateScriptPlugins)(options));
+    }
+    if (options.index && options.generateIndexHtml) {
+        plugins.push(new core_1.HtmlRspackPlugin({
+            template: options.index,
+            sri: options.subresourceIntegrity ? 'sha256' : undefined,
+            ...(options.baseHref ? { base: { href: options.baseHref } } : {}),
+        }));
+    }
+    if (options.subresourceIntegrity) {
+        plugins.push(new webpack_subresource_integrity_1.SubresourceIntegrityPlugin());
+    }
+    const minimizer = [];
+    if (stylesOptimization) {
+        minimizer.push(new core_1.LightningCssMinimizerRspackPlugin({
+            test: /\.(?:css|scss|sass|less|styl)$/,
+        }));
+    }
+    if (!options.ssr) {
+        plugins.push(new core_1.DefinePlugin(getClientEnvironment(process.env.NODE_ENV).stringified));
+    }
+    const entries = {};
+    const globalStylePaths = [];
+    // Determine hashing format.
+    const hashFormat = (0, hash_format_1.getOutputHashFormat)(options.outputHashing);
+    const includePaths = [];
+    if (options?.stylePreprocessorOptions?.includePaths?.length > 0) {
+        options.stylePreprocessorOptions.includePaths.forEach((includePath) => includePaths.push((0, path_1.resolve)(options.root, includePath)));
+    }
+    let lessPathOptions = {};
+    if (includePaths.length > 0) {
+        lessPathOptions = {
+            paths: includePaths,
+        };
+    }
+    // Process global styles.
+    if (options.styles.length > 0) {
+        (0, normalize_entry_1.normalizeExtraEntryPoints)(options.styles, 'styles').forEach((style) => {
+            const resolvedPath = style.input.startsWith('.')
+                ? style.input
+                : (0, path_1.resolve)(options.root, style.input);
+            // Add style entry points.
+            if (entries[style.bundleName]) {
+                entries[style.bundleName].import.push(resolvedPath);
+            }
+            else {
+                entries[style.bundleName] = { import: [resolvedPath] };
+            }
+            // Add global css paths.
+            globalStylePaths.push(resolvedPath);
+        });
+    }
+    const cssModuleRules = [
+        {
+            test: /\.module\.css$/,
+            exclude: globalStylePaths,
+            use: (0, stylesheet_loaders_1.getCommonLoadersForCssModules)(options, includePaths),
+        },
+        {
+            test: /\.module\.(scss|sass)$/,
+            exclude: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForCssModules)(options, includePaths),
+                {
+                    loader: require.resolve('sass-loader'),
+                    options: {
+                        implementation: require('sass'),
+                        sassOptions: {
+                            fiber: false,
+                            precision: 8,
+                            includePaths,
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            test: /\.module\.less$/,
+            exclude: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForCssModules)(options, includePaths),
+                {
+                    loader: require.resolve('less-loader'),
+                    options: {
+                        lessOptions: {
+                            paths: includePaths,
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            test: /\.module\.styl$/,
+            exclude: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForCssModules)(options, includePaths),
+                {
+                    loader: (0, path_1.join)(__dirname, '../../../utils/webpack/deprecated-stylus-loader.js'),
+                    options: {
+                        stylusOptions: {
+                            include: includePaths,
+                        },
+                    },
+                },
+            ],
+        },
+    ];
+    const globalCssRules = [
+        {
+            test: /\.css$/,
+            exclude: globalStylePaths,
+            use: (0, stylesheet_loaders_1.getCommonLoadersForGlobalCss)(options, includePaths),
+        },
+        {
+            test: /\.scss$|\.sass$/,
+            exclude: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForGlobalCss)(options, includePaths),
+                {
+                    loader: require.resolve('sass-loader'),
+                    options: {
+                        implementation: require('sass'),
+                        sourceMap: !!options.sourceMap,
+                        sassOptions: {
+                            fiber: false,
+                            // bootstrap-sass requires a minimum precision of 8
+                            precision: 8,
+                            includePaths,
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            test: /\.less$/,
+            exclude: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForGlobalCss)(options, includePaths),
+                {
+                    loader: require.resolve('less-loader'),
+                    options: {
+                        sourceMap: !!options.sourceMap,
+                        lessOptions: {
+                            javascriptEnabled: true,
+                            ...lessPathOptions,
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            test: /\.styl$/,
+            exclude: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForGlobalCss)(options, includePaths),
+                {
+                    loader: (0, path_1.join)(__dirname, '../../../utils/webpack/deprecated-stylus-loader.js'),
+                    options: {
+                        sourceMap: !!options.sourceMap,
+                        stylusOptions: {
+                            include: includePaths,
+                        },
+                    },
+                },
+            ],
+        },
+    ];
+    const globalStyleRules = [
+        {
+            test: /\.css$/,
+            include: globalStylePaths,
+            use: (0, stylesheet_loaders_1.getCommonLoadersForGlobalStyle)(options, includePaths),
+        },
+        {
+            test: /\.scss$|\.sass$/,
+            include: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForGlobalStyle)(options, includePaths),
+                {
+                    loader: require.resolve('sass-loader'),
+                    options: {
+                        implementation: require('sass'),
+                        sourceMap: !!options.sourceMap,
+                        sassOptions: {
+                            fiber: false,
+                            // bootstrap-sass requires a minimum precision of 8
+                            precision: 8,
+                            includePaths,
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            test: /\.less$/,
+            include: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForGlobalStyle)(options, includePaths),
+                {
+                    loader: require.resolve('less-loader'),
+                    options: {
+                        sourceMap: !!options.sourceMap,
+                        lessOptions: {
+                            javascriptEnabled: true,
+                            ...lessPathOptions,
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            test: /\.styl$/,
+            include: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForGlobalStyle)(options, includePaths),
+                {
+                    loader: (0, path_1.join)(__dirname, '../../../utils/webpack/deprecated-stylus-loader.js'),
+                    options: {
+                        sourceMap: !!options.sourceMap,
+                        stylusOptions: {
+                            include: includePaths,
+                        },
+                    },
+                },
+            ],
+        },
+    ];
+    const rules = [
+        {
+            test: /\.css$|\.scss$|\.sass$|\.less$|\.styl$/,
+            oneOf: [...cssModuleRules, ...globalCssRules, ...globalStyleRules],
+        },
+    ];
+    if (options.extractCss) {
+        plugins.push(
+        // extract global css from js files into own css file
+        new core_1.CssExtractRspackPlugin({
+            filename: `[name]${hashFormat.extract}.css`,
+        }));
+    }
+    config.output = {
+        ...(config.output ?? {}),
+        assetModuleFilename: '[name].[contenthash:20][ext]',
+        crossOriginLoading: options.subresourceIntegrity
+            ? 'anonymous'
+            : false,
+    };
+    // In case users customize their webpack config with unsupported entry.
+    if (typeof config.entry === 'function')
+        throw new Error('Entry function is not supported. Use an object.');
+    if (typeof config.entry === 'string')
+        throw new Error('Entry string is not supported. Use an object.');
+    if (Array.isArray(config.entry))
+        throw new Error('Entry array is not supported. Use an object.');
+    Object.entries(entries).forEach(([entryName, entryData]) => {
+        if (useNormalizedEntry) {
+            config.entry[entryName] = { import: entryData.import };
+        }
+        else {
+            config.entry[entryName] = entryData.import;
+        }
+    });
+    config.optimization = {
+        ...(config.optimization ?? {}),
+        minimizer: [...(config.optimization?.minimizer ?? []), ...minimizer],
+        emitOnErrors: false,
+        moduleIds: 'deterministic',
+        runtimeChunk: options.runtimeChunk ? { name: 'runtime' } : false,
+        splitChunks: {
+            defaultSizeTypes: config.optimization?.splitChunks !== false
+                ? config.optimization?.splitChunks?.defaultSizeTypes
+                : ['...'],
+            maxAsyncRequests: Infinity,
+            cacheGroups: {
+                default: !!options.commonChunk && {
+                    chunks: 'async',
+                    minChunks: 2,
+                    priority: 10,
+                },
+                common: !!options.commonChunk && {
+                    name: 'common',
+                    chunks: 'async',
+                    minChunks: 2,
+                    enforce: true,
+                    priority: 5,
+                },
+                vendors: false,
+                vendor: !!options.vendorChunk && {
+                    name: 'vendor',
+                    chunks: (chunk) => chunk.name === 'main',
+                    enforce: true,
+                    test: /[\\/]node_modules[\\/]/,
+                },
+            },
+        },
+    };
+    config.resolve.mainFields = ['browser', 'module', 'main'];
+    config.module = {
+        ...(config.module ?? {}),
+        rules: [
+            ...(config.module.rules ?? []),
+            // Images: Inline small images, and emit a separate file otherwise.
+            {
+                test: /\.(avif|bmp|gif|ico|jpe?g|png|webp)$/,
+                type: 'asset',
+                parser: {
+                    dataUrlCondition: {
+                        maxSize: 10_000, // 10 kB
+                    },
+                },
+            },
+            // SVG: same as image but we need to separate it so it can be swapped for SVGR in the React plugin.
+            {
+                test: /\.svg$/,
+                type: 'asset',
+                parser: {
+                    dataUrlCondition: {
+                        maxSize: 10_000, // 10 kB
+                    },
+                },
+            },
+            // Fonts: Emit separate file and export the URL.
+            {
+                test: /\.(eot|otf|ttf|woff|woff2)$/,
+                type: 'asset/resource',
+            },
+            ...rules,
+        ],
+    };
+    config.plugins ??= [];
+    config.plugins.push(...plugins);
+}
+function getClientEnvironment(mode) {
+    // Grab NODE_ENV and NX_PUBLIC_* environment variables and prepare them to be
+    // injected into the application via DefinePlugin in webpack configuration.
+    const nxPublicKeyRegex = /^NX_PUBLIC_/i;
+    const raw = Object.keys(process.env)
+        .filter((key) => nxPublicKeyRegex.test(key))
+        .reduce((env, key) => {
+        env[key] = process.env[key];
+        return env;
+    }, {});
+    // Stringify all values so we can feed into webpack DefinePlugin
+    const stringified = {
+        'process.env': Object.keys(raw).reduce((env, key) => {
+            env[key] = JSON.stringify(raw[key]);
+            return env;
+        }, {}),
+    };
+    return { stringified };
+}

package/src/plugins/utils/get-css-module-local-ident.d.ts

@@ -0,0 +1 @@
+export declare function getCSSModuleLocalIdent(ctx: any, localIdentName: any, localName: any, options: any): any;

package/src/plugins/utils/get-css-module-local-ident.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCSSModuleLocalIdent = getCSSModuleLocalIdent;
+const path_1 = require("path");
+const loader_utils_1 = require("loader-utils");
+function getCSSModuleLocalIdent(ctx, localIdentName, localName, options) {
+    // Use the filename or folder name, based on some uses the index.js / index.module.(css|scss|sass) project style
+    const fileNameOrFolder = ctx.resourcePath.match(/index\.module\.(css|scss|sass)$/)
+        ? '[folder]'
+        : '[name]';
+    // Create a hash based on a the file location and class name. Will be unique across a project, and close to globally unique.
+    const hash = (0, loader_utils_1.getHashDigest)(path_1.posix.relative(ctx.rootContext, ctx.resourcePath) + localName, 'md5', 'base64', 5);
+    // Use loaderUtils to find the file or folder name
+    const className = (0, loader_utils_1.interpolateName)(ctx, `${fileNameOrFolder}_${localName}__${hash}`, options);
+    // Remove the .module that appears in every classname when based on the file and replace all "." with "_".
+    return className.replace('.module_', '_').replace(/\./g, '_');
+}

package/src/plugins/utils/hash-format.d.ts

@@ -0,0 +1,7 @@
+export interface HashFormat {
+    chunk: string;
+    extract: string;
+    file: string;
+    script: string;
+}
+export declare function getOutputHashFormat(option: string, length?: number): HashFormat;

package/src/plugins/utils/hash-format.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOutputHashFormat = getOutputHashFormat;
+function getOutputHashFormat(option, length = 20) {
+    const hashFormats = {
+        none: { chunk: '', extract: '', file: '', script: '' },
+        media: { chunk: '', extract: '', file: `.[hash:${length}]`, script: '' },
+        bundles: {
+            chunk: `.[chunkhash:${length}]`,
+            extract: `.[contenthash:${length}]`,
+            file: '',
+            script: `.[contenthash:${length}]`,
+        },
+        all: {
+            chunk: `.[chunkhash:${length}]`,
+            extract: `.[contenthash:${length}]`,
+            file: `.[contenthash:${length}]`,
+            script: `.[contenthash:${length}]`,
+        },
+    };
+    return hashFormats[option] || hashFormats['none'];
+}

package/src/plugins/utils/instantiate-script-plugins.d.ts

@@ -0,0 +1,2 @@
+import type { RspackPluginInstance } from '@rspack/core';
+export declare function instantiateScriptPlugins(options: any): RspackPluginInstance[];

package/src/plugins/utils/instantiate-script-plugins.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.instantiateScriptPlugins = instantiateScriptPlugins;
+const tslib_1 = require("tslib");
+const path = tslib_1.__importStar(require("path"));
+const hash_format_1 = require("./hash-format");
+const scripts_rspack_plugin_1 = require("./plugins/scripts-rspack-plugin");
+const normalize_entry_1 = require("./normalize-entry");
+function instantiateScriptPlugins(options) {
+    // process global scripts
+    const globalScriptsByBundleName = (0, normalize_entry_1.normalizeExtraEntryPoints)(options.scripts || [], 'scripts').reduce((prev, curr) => {
+        const bundleName = curr.bundleName;
+        const resolvedPath = path.resolve(options.root, curr.input);
+        const existingEntry = prev.find((el) => el.bundleName === bundleName);
+        if (existingEntry) {
+            existingEntry.paths.push(resolvedPath);
+        }
+        else {
+            prev.push({
+                inject: curr.inject,
+                bundleName,
+                paths: [resolvedPath],
+            });
+        }
+        return prev;
+    }, []);
+    const hashFormat = (0, hash_format_1.getOutputHashFormat)(options.outputHashing);
+    const plugins = [];
+    // Add a new asset for each entry.
+    globalScriptsByBundleName.forEach((script) => {
+        const hash = script.inject ? hashFormat.script : '';
+        const bundleName = script.bundleName;
+        plugins.push(new scripts_rspack_plugin_1.ScriptsRspackPlugin({
+            name: bundleName,
+            sourceMap: !!options.sourceMap,
+            filename: `${path.basename(bundleName)}${hash}.js`,
+            scripts: script.paths,
+            basePath: options.sourceRoot,
+        }));
+    });
+    return plugins;
+}

package/src/plugins/utils/loaders/stylesheet-loaders.d.ts

@@ -0,0 +1,72 @@
+import { getCSSModuleLocalIdent } from '../get-css-module-local-ident';
+interface PostcssOptions {
+    (loader: any): any;
+    config?: string;
+}
+export declare function getCommonLoadersForCssModules(options: any, includePaths: string[]): ({
+    loader: string;
+    options?: undefined;
+} | {
+    loader: string;
+    options: {
+        modules: {
+            mode: string;
+            getLocalIdent: typeof getCSSModuleLocalIdent;
+        };
+        importLoaders: number;
+        implementation?: undefined;
+        postcssOptions?: undefined;
+    };
+} | {
+    loader: string;
+    options: {
+        implementation: any;
+        postcssOptions: PostcssOptions;
+        modules?: undefined;
+        importLoaders?: undefined;
+    };
+})[];
+export declare function getCommonLoadersForGlobalCss(options: any, includePaths: string[]): ({
+    loader: string;
+    options?: undefined;
+} | {
+    loader: string;
+    options: {
+        url: boolean;
+        implementation?: undefined;
+        postcssOptions?: undefined;
+    };
+} | {
+    loader: string;
+    options: {
+        implementation: any;
+        postcssOptions: PostcssOptions;
+        url?: undefined;
+    };
+})[];
+export declare function getCommonLoadersForGlobalStyle(options: any, includePaths: string[]): ({
+    loader: string;
+    options: {
+        esModule: boolean;
+        url?: undefined;
+        implementation?: undefined;
+        postcssOptions?: undefined;
+    };
+} | {
+    loader: string;
+    options: {
+        url: boolean;
+        esModule?: undefined;
+        implementation?: undefined;
+        postcssOptions?: undefined;
+    };
+} | {
+    loader: string;
+    options: {
+        implementation: any;
+        postcssOptions: PostcssOptions;
+        esModule?: undefined;
+        url?: undefined;
+    };
+})[];
+export {};