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,25 @@
+import { RsbuildConfig } from "@rsbuild/core";
+import { Format } from "../types";
+
+export const composeAssetConfig = (
+  bundle: boolean,
+  format: Format
+): RsbuildConfig => {
+  if(format === 'esm' || format === 'cjs') {
+    if(bundle) {
+      return {
+        output: {
+          // default: no inline asset
+          dataUriLimit: 0,
+          assetPrefix: 'auto' // we currently not support import asset in js because of 'auto' publicPath runtime
+        },
+      }
+    } else {
+      // TODO: bundleless
+      return {}
+    }
+  }
+
+  // mf and umd etc
+  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, format!);
+
   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,7 @@ export const composeCssConfig = (
   bundle = true,
 ): RsbuildConfig => {
   if (bundle || rootDir === null) {
-    return {};
+    return {}
   }
 
   return {