From af1a983c18db6f1778fcc49008febbe989c0c114 Mon Sep 17 00:00:00 2001 From: Timeless0911 <1604889533@qq.com> Date: Mon, 31 Mar 2025 19:46:42 +0800 Subject: [PATCH 1/2] fix: do not modify filename when `cssModules.auto: false` --- packages/core/src/config.ts | 1 + packages/core/src/css/cssConfig.ts | 5 ++- packages/core/src/css/libCssExtractLoader.ts | 8 +++- pnpm-lock.yaml | 2 + .../basic/src/button/index.module.scss | 4 +- .../bundle-false-auto-false/package.json | 6 +++ .../bundle-false-auto-false/rslib.config.ts | 28 ++++++++++++ .../style/css-modules/index.test.ts | 44 +++++++++++++++++++ 8 files changed, 95 insertions(+), 3 deletions(-) create mode 100644 tests/integration/style/css-modules/bundle-false-auto-false/package.json create mode 100644 tests/integration/style/css-modules/bundle-false-auto-false/rslib.config.ts diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts index ac43f318c..59600e8ca 100644 --- a/packages/core/src/config.ts +++ b/packages/core/src/config.ts @@ -1508,6 +1508,7 @@ async function composeLibRsbuildConfig( }); const cssConfig = composeCssConfig( outBase, + cssModulesAuto, config.bundle, banner?.css, footer?.css, diff --git a/packages/core/src/css/cssConfig.ts b/packages/core/src/css/cssConfig.ts index 5b6a2d3de..0c4028fbd 100644 --- a/packages/core/src/css/cssConfig.ts +++ b/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. diff --git a/packages/core/src/css/libCssExtractLoader.ts b/packages/core/src/css/libCssExtractLoader.ts index c3b21ba06..948a52463 100644 --- a/packages/core/src/css/libCssExtractLoader.ts +++ b/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) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 42165e037..9a98b5e32 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -887,6 +887,8 @@ importers: tests/integration/style/css-modules/bundle-false-auto: {} + tests/integration/style/css-modules/bundle-false-auto-false: {} + tests/integration/style/css/bundle: {} tests/integration/style/css/bundle-false: {} diff --git a/tests/integration/style/css-modules/__fixtures__/basic/src/button/index.module.scss b/tests/integration/style/css-modules/__fixtures__/basic/src/button/index.module.scss index 20f5fa0c2..0663bae00 100644 --- a/tests/integration/style/css-modules/__fixtures__/basic/src/button/index.module.scss +++ b/tests/integration/style/css-modules/__fixtures__/basic/src/button/index.module.scss @@ -1,3 +1,5 @@ +$border-dark: rgba($base-color, 0.88); + .content-wrapper { - background-color: #fff; + background-color: $border-dark; } diff --git a/tests/integration/style/css-modules/bundle-false-auto-false/package.json b/tests/integration/style/css-modules/bundle-false-auto-false/package.json new file mode 100644 index 000000000..8b6797894 --- /dev/null +++ b/tests/integration/style/css-modules/bundle-false-auto-false/package.json @@ -0,0 +1,6 @@ +{ + "name": "css-modules-bundle-false-auto-false-test", + "version": "1.0.0", + "private": true, + "type": "module" +} diff --git a/tests/integration/style/css-modules/bundle-false-auto-false/rslib.config.ts b/tests/integration/style/css-modules/bundle-false-auto-false/rslib.config.ts new file mode 100644 index 000000000..6ff1f75a9 --- /dev/null +++ b/tests/integration/style/css-modules/bundle-false-auto-false/rslib.config.ts @@ -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, + }, + }, +}); diff --git a/tests/integration/style/css-modules/index.test.ts b/tests/integration/style/css-modules/index.test.ts index bca115598..e95f35e9f 100644 --- a/tests/integration/style/css-modules/index.test.ts +++ b/tests/integration/style/css-modules/index.test.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(` + [ + "/tests/integration/style/css-modules/bundle-false-auto-false/dist/esm/button/index.module.css", + "/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(` + [ + "/tests/integration/style/css-modules/bundle-false-auto-false/dist/cjs/button/index.module.css", + "/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")', + ); +}); From 2ccc377e9e024e81c965798e796adcc7ac35f302 Mon Sep 17 00:00:00 2001 From: Timeless0911 <1604889533@qq.com> Date: Mon, 31 Mar 2025 19:48:15 +0800 Subject: [PATCH 2/2] chore: update --- packages/core/src/css/libCssExtractLoader.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/src/css/libCssExtractLoader.ts b/packages/core/src/css/libCssExtractLoader.ts index 948a52463..fea899ff6 100644 --- a/packages/core/src/css/libCssExtractLoader.ts +++ b/packages/core/src/css/libCssExtractLoader.ts @@ -268,7 +268,6 @@ export const pitch: Rspack.LoaderDefinition['pitch'] = function ( if (ext !== 'css') { distFilepath = distFilepath.replace(ext, '.css'); } - console.log(111, distFilepath, auto); if (isCssModulesFile(filepath, auto)) { distFilepath = distFilepath.replace(/\.module\.css/, '_module.css'); }