feat(css): support css asset in bundle mode and esm/cjs (#573)

Author: SoonIter

examples/react-component-bundle/rslib.config.ts

@@ -25,6 +25,7 @@ export default defineConfig({
   ],
   output: {
     target: 'web',
+    assetPrefix: 'auto', // TODO: move this line to packages/core/src/asset/assetConfig.ts
   },
   plugins: [pluginReact(), pluginSass()],
 });

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

@@ -1,3 +1,10 @@
+.counter-title {
+  width: 100px;
+  height: 100px;
+  background: no-repeat url('./assets/logo.svg');
+  background-size: cover;
+}
+
 .counter-text {
   font-size: 50px;
 }

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

@@ -8,6 +8,7 @@ export const Counter: React.FC = () => {
 
   return (
     <div>
+      <h1 className="counter-title">React</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,23 @@
+import type { RsbuildConfig } from '@rsbuild/core';
+import type { Format } from '../types';
+
+export const composeAssetConfig = (
+  bundle: boolean,
+  format: Format,
+): RsbuildConfig => {
+  if (format === 'esm' || format === 'cjs') {
+    if (bundle) {
+      return {
+        output: {
+          dataUriLimit: 0, // default: no inline asset
+          // assetPrefix: 'auto', // TODO: will turn on this with js support together in the future
+        },
+      };
+    }
+    // TODO: bundleless
+    return {};
+  }
+
+  // mf and umd etc
+  return {};
+};

packages/core/src/asset/assetConfig.ts

@@ -11,6 +11,7 @@ import {
   rspack,
 } from '@rsbuild/core';
 import { glob } from 'tinyglobby';
+import { composeAssetConfig } from './asset/assetConfig';
 import {
   DEFAULT_CONFIG_EXTENSIONS,
   DEFAULT_CONFIG_NAME,
@@ -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

@@ -9,6 +9,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config 1
       },
       "mode": "production",
       "output": {
+        "dataUriLimit": 0,
         "distPath": {
           "css": "./",
           "cssAsync": "./",
@@ -248,6 +249,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config 1
       },
       "mode": "production",
       "output": {
+        "dataUriLimit": 0,
         "distPath": {
           "css": "./",
           "cssAsync": "./",

packages/core/tests/__snapshots__/config.test.ts.snap

@@ -1,3 +1,4 @@
+import assert from 'node:assert';
 import fs from 'node:fs';
 import path from 'node:path';
 import { type Page, expect, test } from '@playwright/test';
@@ -27,9 +28,19 @@ async function styleShouldWork(page: Page) {
 
   const buttonEl = page.locator('#root button');
   const [subtractEl, addEl] = await buttonEl.all();
-  subtractEl &&
-    expect(subtractEl).toHaveCSS('background-color', 'rgb(255, 255, 0)');
-  addEl && expect(addEl).toHaveCSS('background-color', 'rgb(255, 255, 0)');
+  assert(subtractEl);
+  assert(addEl);
+  expect(subtractEl).toHaveCSS('background-color', 'rgb(255, 255, 0)');
+  expect(addEl).toHaveCSS('background-color', 'rgb(255, 255, 0)');
+}
+
+async function assetShouldWork(page: Page) {
+  // asset in css url('./logo.svg')
+  const h1El = page.locator('h1');
+  assert(h1El);
+  expect(h1El).toHaveCSS('background', /static\/svg\/logo/);
+
+  // TODO: asset in js
 }
 
 test('should render example "react-component-bundle" successfully', async ({
@@ -43,6 +54,7 @@ test('should render example "react-component-bundle" successfully', async ({
 
   await counterCompShouldWork(page);
   await styleShouldWork(page);
+  await assetShouldWork(page);
   await rsbuild.close();
 });
 

tests/e2e/react-component/index.pw.test.ts

@@ -62,6 +62,7 @@ export default defineConfig({
   },
   output: {
     target: 'web',
+    dataUriLimit: 0, // always emit asset for test
   },
   plugins: [
     pluginReact({

tests/e2e/react-component/rsbuild.config.ts

@@ -8,16 +8,16 @@ export default defineConfig({
         distPath: {
           root: './dist/esm/inline',
         },
+        dataUriLimit: {
+          svg: 4096,
+        },
       },
     }),
     generateBundleEsmConfig({
       output: {
         distPath: {
           root: './dist/esm/external',
         },
-        dataUriLimit: {
-          svg: 0,
-        },
       },
     }),
     generateBundleEsmConfig({
@@ -26,6 +26,9 @@ export default defineConfig({
         distPath: {
           root: './dist/esm/inline-bundleless',
         },
+        dataUriLimit: {
+          svg: 4096,
+        },
       },
     }),
     generateBundleEsmConfig({