feat: css external

Author: SoonIter

packages/core/src/config.ts

@@ -983,7 +983,8 @@ const composeBundlelessExternalConfig = (
 } => {
   if (bundle) return { config: {} };
 
-  const isStyleRedirected = redirect.style ?? true;
+  const styleRedirectPath = redirect.style?.path ?? true;
+  const styleRedirectExtension = redirect.style?.extension ?? true;
   const jsRedirectPath = redirect.js?.path ?? true;
   const jsRedirectExtension = redirect.js?.extension ?? true;
 
@@ -1002,60 +1003,57 @@ const composeBundlelessExternalConfig = (
             if (!request || !getResolve || !context || !contextInfo) {
               return callback();
             }
+            const { issuer } = contextInfo;
 
             if (!resolver) {
               resolver = (await getResolve()) as RspackResolver;
             }
 
+            async function redirectPath(request: string): Promise<string> {
+              try {
+                let resolvedRequest = request;
+                resolvedRequest = await resolver!(context!, resolvedRequest);
+                resolvedRequest = normalizeSlash(
+                  path.relative(path.dirname(issuer), resolvedRequest),
+                );
+                // Requests that fall through here cannot be matched by any other externals config ahead.
+                // Treat all these requests as relative import of source code. Node.js won't add the
+                // leading './' to the relative path resolved by `path.relative`. So add manually it here.
+                if (resolvedRequest[0] !== '.') {
+                  resolvedRequest = `./${resolvedRequest}`;
+                }
+                return resolvedRequest;
+              } catch (e) {
+                // e.g. A react component library importing and using 'react' but while not defining
+                // it in devDependencies and peerDependencies. Preserve 'react' as-is if so.
+                logger.debug(
+                  `Failed to resolve module ${color.green(`"${request}"`)} from ${color.green(issuer)}. If it's an npm package, consider adding it to dependencies or peerDependencies in package.json to make it externalized.`,
+                );
+                return request;
+              }
+            }
+
             // Issuer is not empty string when the module is imported by another module.
             // Prevent from externalizing entry modules here.
-            if (contextInfo.issuer) {
+            if (issuer) {
               let resolvedRequest: string = request;
 
-              const cssExternal = cssExternalHandler(
+              const cssExternal = await cssExternalHandler(
                 resolvedRequest,
                 callback,
                 jsExtension,
                 cssModulesAuto,
-                isStyleRedirected,
+                styleRedirectPath,
+                styleRedirectExtension,
+                redirectPath,
               );
 
               if (cssExternal !== false) {
                 return cssExternal;
               }
 
               if (jsRedirectPath) {
-                try {
-                  // use resolver to resolve the request
-                  resolvedRequest = await resolver(context, resolvedRequest);
-
-                  // only handle the request that is not in node_modules
-                  if (!resolvedRequest.includes('node_modules')) {
-                    resolvedRequest = normalizeSlash(
-                      path.relative(
-                        path.dirname(contextInfo.issuer),
-                        resolvedRequest,
-                      ),
-                    );
-                    // Requests that fall through here cannot be matched by any other externals config ahead.
-                    // Treat all these requests as relative import of source code. Node.js won't add the
-                    // leading './' to the relative path resolved by `path.relative`. So add manually it here.
-                    if (resolvedRequest[0] !== '.') {
-                      resolvedRequest = `./${resolvedRequest}`;
-                    }
-                  } else {
-                    // NOTE: If request is a phantom dependency, which means it can be resolved but not specified in dependencies or peerDependencies in package.json, the output will be incorrect to use when the package is published
-                    // return the original request instead of the resolved request
-                    return callback(undefined, request);
-                  }
-                } catch (e) {
-                  // catch error when request can not be resolved by resolver
-                  // e.g. A react component library importing and using 'react' but while not defining
-                  // it in devDependencies and peerDependencies. Preserve 'react' as-is if so.
-                  logger.debug(
-                    `Failed to resolve module ${color.green(`"${resolvedRequest}"`)} from ${color.green(contextInfo.issuer)}. If it's an npm package, consider adding it to dependencies or peerDependencies in package.json to make it externalized.`,
-                  );
-                }
+                resolvedRequest = await redirectPath(resolvedRequest);
               }
 
               // Node.js ECMAScript module loader does no extension searching.

packages/core/src/css/cssConfig.ts

@@ -79,32 +79,42 @@ export function isCssGlobalFile(
 
 type ExternalCallback = (arg0?: undefined, arg1?: string) => void;
 
-export function cssExternalHandler(
+export async function cssExternalHandler(
   request: string,
   callback: ExternalCallback,
   jsExtension: string,
   auto: CssLoaderOptionsAuto,
-  isStyleRedirect: boolean,
-): void | false {
-  const isCssModulesRequest = isCssModulesFile(request, auto);
-
+  styleRedirectPath: boolean,
+  styleRedirectExtension: boolean,
+  redirectPath: (request: string, emitWarning: boolean) => Promise<string>,
+): Promise<false | void> {
   // cssExtract would execute the file handled by css-loader, so we cannot external the "helper import" from css-loader
   // do not external @rsbuild/core/compiled/css-loader/noSourceMaps.js, sourceMaps.js, api.mjs etc.
   if (/compiled\/css-loader\//.test(request)) {
     return callback();
   }
 
+  let resolvedRequest = request;
+
+  if (styleRedirectPath) {
+    resolvedRequest = await redirectPath(request, false);
+  }
+
   // 1. css modules: import './CounterButton.module.scss' -> import './CounterButton.module.mjs'
   // 2. css global: import './CounterButton.scss' -> import './CounterButton.css'
-  if (request[0] === '.' && isCssFile(request)) {
+  if (resolvedRequest[0] === '.' && isCssFile(resolvedRequest)) {
     // preserve import './CounterButton.module.scss'
-    if (!isStyleRedirect) {
-      return callback(undefined, request);
+    if (!styleRedirectExtension) {
+      return callback(undefined, resolvedRequest);
     }
+    const isCssModulesRequest = isCssModulesFile(resolvedRequest, auto);
     if (isCssModulesRequest) {
-      return callback(undefined, request.replace(/\.[^.]+$/, jsExtension));
+      return callback(
+        undefined,
+        resolvedRequest.replace(/\.[^.]+$/, jsExtension),
+      );
     }
-    return callback(undefined, request.replace(/\.[^.]+$/, '.css'));
+    return callback(undefined, resolvedRequest.replace(/\.[^.]+$/, '.css'));
   }
 
   return false;

packages/core/src/types/config.ts

@@ -91,6 +91,19 @@ export type JsRedirect = {
   extension?: boolean;
 };
 
+export type StyleRedirect = {
+  /**
+   * Whether to automatically redirect the import paths of JavaScript output files.
+   * @defaultValue `true`
+   */
+  path?: boolean;
+  /**
+   * Whether to automatically add the file extension to import paths based on the JavaScript output files.
+   * @defaultValue `true`
+   */
+  extension?: boolean;
+};
+
 // @ts-expect-error TODO: support dts redirect in the future
 type DtsRedirect = {
   path?: boolean;
@@ -101,7 +114,7 @@ export type Redirect = {
   /** Controls the redirect of the import paths of output JavaScript files. */
   js?: JsRedirect;
   /** Whether to redirect the import path of the style file. */
-  style?: boolean;
+  style?: StyleRedirect;
   // TODO: support other redirects
   // asset?: boolean;
   // dts?: DtsRedirect;

pnpm-lock.yaml

@@ -6,23 +6,27 @@ export default defineConfig({
     generateBundleEsmConfig({
       bundle: false,
       redirect: {
-        style: false,
+        style: {
+          extension: false,
+        },
       },
     }),
     generateBundleCjsConfig({
       bundle: false,
       redirect: {
-        style: false,
+        style: {
+          extension: false,
+        },
       },
     }),
   ],
   source: {
     entry: {
-      index: ['./src/index.ts'],
+      index: ['./src/**', '!./src/**/*.less'],
     },
   },
   output: {
     target: 'web',
-    copy: [{ from: './src/index.less' }, { from: './src/style.module.less' }],
+    copy: [{ from: './**/*.less', context: './src' }],
   },
 });

tests/integration/redirect/style-false/package.json renamed to tests/integration/redirect/style-extension/package.json

@@ -0,0 +1 @@
+import './index.less';

tests/integration/redirect/style-false/rslib.config.ts renamed to tests/integration/redirect/style-extension/rslib.config.ts

@@ -0,0 +1,4 @@
+// @ts-ignore env.d.ts
+import styles from './index.module.less';
+
+styles;

tests/integration/redirect/style-false/src/index.less renamed to tests/integration/redirect/style-extension/src/less/index.less

@@ -0,0 +1,6 @@
+{
+  "name": "redirect-js-import-css-test",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module"
+}

tests/integration/redirect/style-extension/src/less/index.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [
+    generateBundleEsmConfig({
+      bundle: false,
+    }),
+    generateBundleCjsConfig({
+      bundle: false,
+    }),
+  ],
+  source: {
+    entry: {
+      index: ['./src/**'],
+    },
+  },
+  output: {
+    target: 'web',
+  },
+});

tests/integration/redirect/style-false/src/style.module.less renamed to tests/integration/redirect/style-extension/src/module/index.module.less

@@ -0,0 +1,3 @@
+.foo {
+  color: red;
+}

tests/integration/redirect/style-extension/src/module/index.ts

@@ -0,0 +1 @@
+import '@/css/index.css';

tests/integration/redirect/style-false/src/index.ts

@@ -0,0 +1,3 @@
+.foo {
+  color: red;
+}

tests/integration/redirect/style-path/package.json

@@ -0,0 +1,4 @@
+// @ts-ignore env.d.ts
+import styles from '@/module/index.module.css';
+
+styles;

tests/integration/redirect/style-path/rslib.config.ts

@@ -0,0 +1,10 @@
+{
+  "extends": "@rslib/tsconfig/base",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

tests/integration/redirect/style-path/src/css/index.css

@@ -0,0 +1,38 @@
+import path from 'node:path';
+import { buildAndGetResults, getFileBySuffix } from 'test-helper';
+import { expect, test } from 'vitest';
+
+test('should extract css successfully when using redirect.style = false', async () => {
+  const fixturePath = path.resolve(__dirname, './style-extension');
+  const { contents } = await buildAndGetResults({ fixturePath });
+  const esmFiles = Object.keys(contents.esm);
+  expect(esmFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/redirect/style-extension/dist/esm/less/index.js",
+      "<ROOT>/tests/integration/redirect/style-extension/dist/esm/module/index.js",
+    ]
+  `);
+  const lessIndexJs = getFileBySuffix(contents.esm, 'less/index.js');
+  expect(lessIndexJs).toMatchInlineSnapshot(`
+    "import "./index.less";
+    "
+  `);
+  const lessModuleIndexJs = getFileBySuffix(contents.esm, 'module/index.js');
+  expect(lessModuleIndexJs).toMatchInlineSnapshot(`
+    "import * as __WEBPACK_EXTERNAL_MODULE__index_module_less__ from "./index.module.less";
+    __WEBPACK_EXTERNAL_MODULE__index_module_less__["default"];
+    "
+  `);
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/redirect/style-extension/dist/cjs/less/index.cjs",
+      "<ROOT>/tests/integration/redirect/style-extension/dist/cjs/module/index.cjs",
+    ]
+  `);
+  const lessIndexCjs = getFileBySuffix(contents.cjs, 'less/index.cjs');
+  expect(lessIndexCjs).toContain('require("./index.less");');
+  const lessModuleIndexCjs = getFileBySuffix(contents.cjs, 'module/index.cjs');
+  expect(lessModuleIndexCjs).toContain('require("./index.module.less")');
+});