feat: support banner and footer in bundleless emitted css (#712)

Author: Timeless0911

packages/core/src/config.ts

@@ -1414,7 +1414,12 @@ async function composeLibRsbuildConfig(
     rootPath,
     cssModulesAuto,
   );
-  const cssConfig = composeCssConfig(lcp, config.bundle);
+  const cssConfig = composeCssConfig(
+    lcp,
+    config.bundle,
+    banner?.css,
+    footer?.css,
+  );
   const assetConfig = composeAssetConfig(bundle, format!);
 
   const entryChunkConfig = composeEntryChunkConfig({

packages/core/src/css/cssConfig.ts

@@ -130,7 +130,11 @@ export async function cssExternalHandler(
 
 const PLUGIN_NAME = 'rsbuild:lib-css';
 
-const pluginLibCss = (rootDir: string): RsbuildPlugin => ({
+const pluginLibCss = (
+  rootDir: string,
+  banner?: string,
+  footer?: string,
+): RsbuildPlugin => ({
   name: PLUGIN_NAME,
   setup(api) {
     api.modifyBundlerChain((config, { CHAIN_ID }) => {
@@ -149,6 +153,8 @@ const pluginLibCss = (rootDir: string): RsbuildPlugin => ({
             .loader(require.resolve('./libCssExtractLoader.js'))
             .options({
               rootDir,
+              banner,
+              footer,
             });
         }
       }
@@ -165,13 +171,15 @@ const pluginLibCss = (rootDir: string): RsbuildPlugin => ({
 export const composeCssConfig = (
   rootDir: string | null,
   bundle = true,
+  banner?: string,
+  footer?: string,
 ): EnvironmentConfig => {
   if (bundle || rootDir === null) {
     return {};
   }
 
   return {
-    plugins: [pluginLibCss(rootDir)],
+    plugins: [pluginLibCss(rootDir, banner, footer)],
     tools: {
       cssLoader: {
         // Otherwise, external variables will be executed by css-extract and cause an error.

packages/core/src/css/libCssExtractLoader.ts

@@ -38,6 +38,8 @@ export interface CssExtractRspackLoaderOptions {
   defaultExport?: boolean;
 
   rootDir?: string;
+  banner?: string;
+  footer?: string;
 }
 
 const LOADER_NAME = 'LIB_CSS_EXTRACT_LOADER';
@@ -87,6 +89,8 @@ export const pitch: Rspack.LoaderDefinition['pitch'] = function (
   const callback = this.async();
   const filepath = this.resourcePath;
   const rootDir = options.rootDir ?? this.rootContext;
+  const banner = options.banner;
+  const footer = options.footer;
 
   let { publicPath } = this._compilation!.outputOptions;
 
@@ -279,7 +283,16 @@ export const pitch: Rspack.LoaderDefinition['pitch'] = function (
         m.set(distFilepath, `${m.get(distFilepath)}\n${sourceMappingURL}`);
       }
     }
-    for (const [distFilepath, content] of m.entries()) {
+    for (let [distFilepath, content] of m.entries()) {
+      // add banner and footer to css files in bundleless mode
+      if (banner) {
+        content = `${banner}\n${content}`;
+      }
+
+      if (footer) {
+        content = `${content}\n${footer}\n`;
+      }
+
       this.emitFile(distFilepath, content);
     }
 

tests/integration/banner-footer/rslib.config.ts

@@ -51,10 +51,9 @@ export default defineConfig({
       dts: {
         bundle: false,
       },
-      // TODO: bundleless css
       source: {
         entry: {
-          index: ['./src/**/*.ts'],
+          index: ['./src/**'],
         },
       },
       ...bannerFooterConfig,
@@ -70,10 +69,9 @@ export default defineConfig({
       dts: {
         bundle: false,
       },
-      // TODO: bundleless css
       source: {
         entry: {
-          index: ['./src/**/*.ts'],
+          index: ['./src/**'],
         },
       },
       ...bannerFooterConfig,
@@ -97,4 +95,7 @@ export default defineConfig({
       index: './src/index.ts',
     },
   },
+  output: {
+    target: 'web',
+  },
 });

tests/integration/banner-footer/src/index.ts

@@ -1,4 +1,4 @@
-// import './index.css';
+import './index.css';
 import { foo } from './foo';
 
 export const text = foo;

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

@@ -24,8 +24,10 @@ test('should extract css-modules successfully in bundle', async () => {
 
 test('should extract css-modules successfully in bundle-false', async () => {
   const fixturePath = join(__dirname, 'bundle-false');
-  const { contents } = await buildAndGetResults({ fixturePath, type: 'css' });
-  const { contents: jsContents } = await buildAndGetResults({ fixturePath });
+  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(`
@@ -56,8 +58,10 @@ test('should extract css-modules successfully in bundle-false', async () => {
 
 test('should extract css-modules successfully in bundle-false with output.cssModules.auto config', async () => {
   const fixturePath = join(__dirname, 'bundle-false-auto');
-  const { contents } = await buildAndGetResults({ fixturePath, type: 'css' });
-  const { contents: jsContents } = await buildAndGetResults({ fixturePath });
+  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/stylus/index.test.ts

@@ -56,8 +56,10 @@ test('should extract css with pluginStylus in bundle', async () => {
 
 test('should extract css with pluginStylus in bundle-false', async () => {
   const fixturePath = join(__dirname, 'bundle-false');
-  const { contents } = await buildAndGetResults({ fixturePath, type: 'css' });
-  const { contents: jsContents } = await buildAndGetResults({ fixturePath });
+  const result = await buildAndGetResults({ fixturePath, type: 'all' });
+
+  const contents = result.css.contents;
+  const jsContents = result.js.contents;
 
   const esmCssFiles = Object.keys(contents.esm);
   const esmCssContents = Object.values(contents.esm);