diff --git a/packages/core/src/css/LibCssExtractPlugin.ts b/packages/core/src/css/LibCssExtractPlugin.ts index 077d06db5..a22153f19 100644 --- a/packages/core/src/css/LibCssExtractPlugin.ts +++ b/packages/core/src/css/LibCssExtractPlugin.ts @@ -1,5 +1,4 @@ import { type Rspack, rspack } from '@rsbuild/core'; -import { RSLIB_CSS_ENTRY_FLAG } from './cssConfig'; import { ABSOLUTE_PUBLIC_PATH, AUTO_PUBLIC_PATH, @@ -20,21 +19,6 @@ class LibCssExtractPlugin implements Rspack.RspackPluginInstance { } apply(compiler: Rspack.Compiler): void { - // 1. mark and remove the normal css asset - // 2. preserve CSS Modules asset - compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { - compilation.hooks.chunkAsset.tap(pluginName, (_chunk, filename) => { - const asset = compilation.getAsset(filename); - if (!asset) { - return; - } - const needRemove = Boolean(asset.name.match(RSLIB_CSS_ENTRY_FLAG)); - if (needRemove) { - compilation.deleteAsset(filename); - } - }); - }); - /** * The following code is modified based on * https://github.com/webpack-contrib/mini-css-extract-plugin/blob/3effaa0319bad5cc1bf0ae760553bf7abcbc35a4/src/index.js#L1597 diff --git a/packages/core/src/css/cssConfig.ts b/packages/core/src/css/cssConfig.ts index 512a6e799..5b6a2d3de 100644 --- a/packages/core/src/css/cssConfig.ts +++ b/packages/core/src/css/cssConfig.ts @@ -130,6 +130,8 @@ export async function cssExternalHandler( const PLUGIN_NAME = 'rsbuild:lib-css'; +// 1. replace CssExtractPlugin.loader with libCssExtractLoader +// 2. replace CssExtractPlugin with LibCssExtractPlugin const pluginLibCss = ( rootDir: string, banner?: string, @@ -137,6 +139,19 @@ const pluginLibCss = ( ): RsbuildPlugin => ({ name: PLUGIN_NAME, setup(api) { + // 1. mark and remove the "normal css asset" (contain RSLIB_CSS_ENTRY_FLAG) + // 2. preserve CSS Modules asset + api.processAssets( + { stage: 'additional' }, // deleteAsset as soon as possible for small perf + ({ assets, compilation }) => { + for (const key of Object.keys(assets)) { + if (key.match(RSLIB_CSS_ENTRY_FLAG)) { + compilation.deleteAsset(key); + } + } + }, + ); + api.modifyBundlerChain((config, { CHAIN_ID }) => { let isUsingCssExtract = false; for (const ruleId of [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ef981ce75..e18ba9f95 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -870,6 +870,8 @@ importers: tests/integration/style/css/bundle-false: {} + tests/integration/style/css/node-bundle-false: {} + tests/integration/style/less/bundle: {} tests/integration/style/less/bundle-false: {} diff --git a/tests/integration/style/css/index.test.ts b/tests/integration/style/css/index.test.ts index 673b8ca3c..81f21281a 100644 --- a/tests/integration/style/css/index.test.ts +++ b/tests/integration/style/css/index.test.ts @@ -133,3 +133,15 @@ test('should extract css successfully in bundle-false', async () => { } `); }); + +test('should not emit css and css related js in target: "node"', async () => { + const fixturePath = join(__dirname, 'node-bundle-false'); + const { js, css, dts } = await buildAndGetResults({ + fixturePath, + type: 'all', + }); + + expect(js.files).toMatchInlineSnapshot('{}'); + expect(css.files).toMatchInlineSnapshot('{}'); + expect(dts.files).toMatchInlineSnapshot('{}'); +}); diff --git a/tests/integration/style/css/node-bundle-false/package.json b/tests/integration/style/css/node-bundle-false/package.json new file mode 100644 index 000000000..0e1b52700 --- /dev/null +++ b/tests/integration/style/css/node-bundle-false/package.json @@ -0,0 +1,6 @@ +{ + "name": "node-css-bundle-false-test", + "version": "1.0.0", + "private": true, + "type": "module" +} diff --git a/tests/integration/style/css/node-bundle-false/rslib.config.ts b/tests/integration/style/css/node-bundle-false/rslib.config.ts new file mode 100644 index 000000000..73218ed2f --- /dev/null +++ b/tests/integration/style/css/node-bundle-false/rslib.config.ts @@ -0,0 +1,14 @@ +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/**/*.css'], + }, + }, +});