feat: output.filename.css allow function (#3752)

Author: gaoachao

e2e/cases/filename-function/rsbuild.config.ts

@@ -10,6 +10,12 @@ export default defineConfig({
 
         return '/some-path/[name].js';
       },
+      css: (pathData) => {
+        if (pathData.chunk?.name === 'index') {
+          return 'my-index.css';
+        }
+        return '/some-path/[name].css';
+      },
     },
   },
 });

packages/core/src/helpers/index.ts

@@ -221,7 +221,12 @@ export function getFilename(
 ): NonNullable<FilenameConfig['js']>;
 export function getFilename(
   config: NormalizedConfig | NormalizedEnvironmentConfig,
-  type: Exclude<keyof FilenameConfig, 'js'>,
+  type: 'css',
+  isProd: boolean,
+): NonNullable<FilenameConfig['css']>;
+export function getFilename(
+  config: NormalizedConfig | NormalizedEnvironmentConfig,
+  type: Exclude<keyof FilenameConfig, 'js' | 'css'>,
   isProd: boolean,
   isServer?: boolean,
 ): string;

packages/core/src/plugins/output.ts

@@ -141,6 +141,8 @@ export const pluginOutput = (): RsbuildPlugin => ({
 
           const cssPath = config.output.distPath.css;
           const cssFilename = getFilename(config, 'css', isProd);
+          const isCssFilenameFn = typeof cssFilename === 'function';
+
           const cssAsyncPath =
             config.output.distPath.cssAsync ??
             (cssPath ? `${cssPath}/async` : 'async');
@@ -149,8 +151,18 @@ export const pluginOutput = (): RsbuildPlugin => ({
             .plugin(CHAIN_ID.PLUGIN.MINI_CSS_EXTRACT)
             .use(getCssExtractPlugin(), [
               {
-                filename: posix.join(cssPath, cssFilename),
-                chunkFilename: posix.join(cssAsyncPath, cssFilename),
+                filename: isCssFilenameFn
+                  ? (...args) => {
+                      const name = cssFilename(...args);
+                      return posix.join(cssPath, name);
+                    }
+                  : posix.join(cssPath, cssFilename),
+                chunkFilename: isCssFilenameFn
+                  ? (...args) => {
+                      const name = cssFilename(...args);
+                      return posix.join(cssAsyncPath, name);
+                    }
+                  : posix.join(cssAsyncPath, cssFilename),
                 ...extractPluginOptions,
               },
             ]);

packages/core/src/types/config.ts

@@ -674,7 +674,7 @@ export type FilenameConfig = {
    * - dev: '[name].css'
    * - prod: '[name].[contenthash:8].css'
    */
-  css?: string;
+  css?: NonNullable<Rspack.Configuration['output']>['cssFilename'];
   /**
    * The name of the SVG images.
    * @default '[name].[contenthash:8].svg'

website/docs/en/config/output/filename.mdx

@@ -128,7 +128,7 @@ After specifying the module name as above, the generated file will be `dist/stat
 
 ## Using Function
 
-You can pass a function to `output.filename.js`, allowing you to dynamically generate filenames based on file information:
+You can pass a function to `output.filename.js` or `output.filename.css`, allowing you to dynamically generate filenames based on file information:
 
 ```js
 export default {
@@ -144,6 +144,14 @@ export default {
 
         return '/some-path/[name].js';
       },
+      css: (pathData, assetInfo) => {
+        if (pathData.chunk?.name === 'index') {
+          const isProd = process.env.NODE_ENV === 'production';
+          return isProd ? '[name].[contenthash:8].css' : '[name].css';
+        }
+
+        return '/some-path/[name].css';
+      },
     },
   },
 };

website/docs/zh/config/output/filename.mdx

@@ -8,7 +8,9 @@ type FilenameConfig = {
   js?:
     | string
     | ((pathData: Rspack.PathData, assetInfo: Rspack.JsAssetInfo) => string);
-  css?: string;
+  css?:
+    | string
+    | ((pathData: Rspack.PathData, assetInfo: Rspack.JsAssetInfo) => string);
   svg?: string;
   font?: string;
   image?: string;
@@ -127,7 +129,7 @@ const { add } = await import(
 
 ## 使用函数
 
-`output.filename.js` 可以传入一个函数，这允许你根据文件信息动态生成文件名：
+`output.filename.js` 和 `output.filename.css` 可以传入一个函数，这允许你根据文件信息动态生成文件名：
 
 ```js
 export default {
@@ -143,6 +145,14 @@ export default {
 
         return '/some-path/[name].js';
       },
+      css: (pathData, assetInfo) => {
+        if (pathData.chunk?.name === 'index') {
+          const isProd = process.env.NODE_ENV === 'production';
+          return isProd ? '[name].[contenthash:8].css' : '[name].css';
+        }
+
+        return '/some-path/[name].css';
+      },
     },
   },
 };