fix: do not modify filename when cssModules.auto: false

Author: Timeless0911

packages/core/src/config.ts

@@ -1508,6 +1508,7 @@ async function composeLibRsbuildConfig(
   });
   const cssConfig = composeCssConfig(
     outBase,
+    cssModulesAuto,
     config.bundle,
     banner?.css,
     footer?.css,

packages/core/src/css/cssConfig.ts

@@ -134,6 +134,7 @@ const PLUGIN_NAME = 'rsbuild:lib-css';
 // 2. replace CssExtractPlugin with LibCssExtractPlugin
 const pluginLibCss = (
   rootDir: string,
+  auto: CssLoaderOptionsAuto,
   banner?: string,
   footer?: string,
 ): RsbuildPlugin => ({
@@ -168,6 +169,7 @@ const pluginLibCss = (
             .loader(require.resolve('./libCssExtractLoader.js'))
             .options({
               rootDir,
+              auto,
               banner,
               footer,
             });
@@ -185,6 +187,7 @@ const pluginLibCss = (
 
 export const composeCssConfig = (
   rootDir: string | null,
+  auto: CssLoaderOptionsAuto,
   bundle = true,
   banner?: string,
   footer?: string,
@@ -194,7 +197,7 @@ export const composeCssConfig = (
   }
 
   return {
-    plugins: [pluginLibCss(rootDir, banner, footer)],
+    plugins: [pluginLibCss(rootDir, auto, banner, footer)],
     tools: {
       cssLoader: {
         // Otherwise, external variables will be executed by css-extract and cause an error.

packages/core/src/css/libCssExtractLoader.ts

@@ -7,6 +7,7 @@
  */
 import path, { extname } from 'node:path';
 import type { Rspack } from '@rsbuild/core';
+import { type CssLoaderOptionsAuto, isCssModulesFile } from './cssConfig';
 
 export const BASE_URI = 'webpack://';
 export const MODULE_TYPE = 'css/mini-extract';
@@ -38,6 +39,7 @@ export interface CssExtractRspackLoaderOptions {
   defaultExport?: boolean;
 
   rootDir?: string;
+  auto?: CssLoaderOptionsAuto;
   banner?: string;
   footer?: string;
 }
@@ -89,6 +91,7 @@ export const pitch: Rspack.LoaderDefinition['pitch'] = function (
   const callback = this.async();
   const filepath = this.resourcePath;
   const rootDir = options.rootDir ?? this.rootContext;
+  const auto = options.auto;
   const banner = options.banner;
   const footer = options.footer;
 
@@ -265,7 +268,10 @@ export const pitch: Rspack.LoaderDefinition['pitch'] = function (
       if (ext !== 'css') {
         distFilepath = distFilepath.replace(ext, '.css');
       }
-      distFilepath = distFilepath.replace(/\.module\.css/, '_module.css');
+      console.log(111, distFilepath, auto);
+      if (isCssModulesFile(filepath, auto)) {
+        distFilepath = distFilepath.replace(/\.module\.css/, '_module.css');
+      }
       const cssFilename = path.basename(distFilepath);
       if (content.trim()) {
         m.get(distFilepath)

pnpm-lock.yaml

@@ -1,3 +1,5 @@
+$border-dark: rgba($base-color, 0.88);
+
 .content-wrapper {
-  background-color: #fff;
+  background-color: $border-dark;
 }

tests/integration/style/css-modules/__fixtures__/basic/src/button/index.module.scss

@@ -0,0 +1,6 @@
+{
+  "name": "css-modules-bundle-false-auto-false-test",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module"
+}

tests/integration/style/css-modules/bundle-false-auto-false/package.json

@@ -0,0 +1,28 @@
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { defineConfig } from '@rslib/core';
+import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [
+    generateBundleEsmConfig({ bundle: false }),
+    generateBundleCjsConfig({ bundle: false }),
+  ],
+  source: {
+    entry: {
+      index: ['../__fixtures__/basic/src/**'],
+    },
+  },
+  plugins: [
+    pluginSass({
+      sassLoaderOptions: {
+        additionalData: '$base-color: #c6538c;',
+      },
+    }),
+  ],
+  output: {
+    target: 'web',
+    cssModules: {
+      auto: false,
+    },
+  },
+});

tests/integration/style/css-modules/bundle-false-auto-false/rslib.config.ts

@@ -85,3 +85,47 @@ test('should extract css-modules successfully in bundle-false with output.cssMod
     'require("./reset.css")',
   );
 });
+
+test('should extract css-modules successfully in bundle-false with output.cssModules.auto:false config', async () => {
+  const fixturePath = join(__dirname, 'bundle-false-auto-false');
+  const result = await buildAndGetResults({ fixturePath, type: 'all' });
+
+  const contents = result.css.contents;
+  const jsContents = result.js.contents;
+
+  const esmFiles = Object.keys(contents.esm);
+  expect(esmFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/css-modules/bundle-false-auto-false/dist/esm/button/index.module.css",
+      "<ROOT>/tests/integration/style/css-modules/bundle-false-auto-false/dist/esm/reset.css",
+    ]
+  `);
+  expectFileContainContent(
+    jsContents.esm,
+    'button/index.js',
+    'from "./index.module.css"',
+  );
+  expectFileContainContent(
+    jsContents.esm,
+    'dist/esm/index.js',
+    'import "./reset.css"',
+  );
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/css-modules/bundle-false-auto-false/dist/cjs/button/index.module.css",
+      "<ROOT>/tests/integration/style/css-modules/bundle-false-auto-false/dist/cjs/reset.css",
+    ]
+  `);
+  expectFileContainContent(
+    jsContents.cjs,
+    'button/index.cjs',
+    'require("./index.module.css")',
+  );
+  expectFileContainContent(
+    jsContents.cjs,
+    'dist/cjs/index.cjs',
+    'require("./reset.css")',
+  );
+});