feat(css): support asset in bundle

Author: SoonIter

examples/react-component-bundle/src/assets/logo.svg

@@ -1,3 +1,7 @@
 .counter-text {
   font-size: 50px;
 }
+
+.title {
+  background: url('./assets/logo.svg');
+}

examples/react-component-bundle/src/index.scss

@@ -8,6 +8,7 @@ export const Counter: React.FC = () => {
 
   return (
     <div>
+      <h1 className='title'></h1>
       <h2 className="counter-text">Counter: {count}</h2>
       <CounterButton onClick={decrement} label="-" />
       <CounterButton onClick={increment} label="+" />

examples/react-component-bundle/src/index.tsx

@@ -0,0 +1,16 @@
+import { RsbuildConfig } from "@rsbuild/core";
+
+export const composeAssetConfig = (
+  bundle: boolean,
+): RsbuildConfig => {
+  if(bundle) {
+    return {
+      output: {
+        // default: no inline asset
+        dataUriLimit: 0,
+      },
+    };
+  }
+  // TODO: bundleless
+  return  {}
+};

packages/core/src/asset/assetConfig.ts

@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path, { dirname, extname, isAbsolute, join } from 'node:path';
+import { composeAssetConfig } from './asset/assetConfig'
 import {
   type EnvironmentConfig,
   type RsbuildConfig,
@@ -1221,6 +1222,8 @@ async function composeLibRsbuildConfig(
     cssModulesAuto,
   );
   const cssConfig = composeCssConfig(lcp, config.bundle);
+  const assetConfig = composeAssetConfig(bundle);
+
   const entryChunkConfig = composeEntryChunkConfig({
     enabledImportMetaUrlShim: enabledShims.cjs['import.meta.url'],
   });
@@ -1251,6 +1254,7 @@ async function composeLibRsbuildConfig(
     targetConfig,
     entryConfig,
     cssConfig,
+    assetConfig,
     entryChunkConfig,
     minifyConfig,
     dtsConfig,

packages/core/src/config.ts

@@ -155,7 +155,18 @@ export const composeCssConfig = (
   bundle = true,
 ): RsbuildConfig => {
   if (bundle || rootDir === null) {
-    return {};
+    return {
+        tools: {
+          bundlerChain(chain, {CHAIN_ID}) {
+            chain.plugins.get(CHAIN_ID.PLUGIN.MINI_CSS_EXTRACT)?.tap(config => {
+              return [{
+                ...(config?.[0] ?? {}),
+                publicPath: 'auto',
+              }]
+            })
+          }
+      }
+    };
   }
 
   return {