fix(bundleless, css): in target: 'node', empty js files(css transform) should be deleted (#809)

Co-authored-by: Timeless0911 <[email protected]>

Author: SoonIter

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

packages/core/src/css/cssConfig.ts

@@ -130,13 +130,28 @@ 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,
   footer?: string,
 ): 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 [

pnpm-lock.yaml

@@ -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('{}');
+});

tests/integration/style/css/index.test.ts

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

tests/integration/style/css/node-bundle-false/package.json

@@ -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'],
+    },
+  },
+});