Skip to content

Commit 5bab1d5

Browse files
SoonIterSoonIter
authored
feat(css): support css asset in bundle mode and esm/cjs (#573)
1 parent 2540150 commit 5bab1d5

File tree

14 files changed

+75
-15
lines changed

14 files changed

+75
-15
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export default defineConfig({
2525
],
2626
output: {
2727
target: 'web',
28+
assetPrefix: 'auto', // TODO: move this line to packages/core/src/asset/assetConfig.ts
2829
},
2930
plugins: [pluginReact(), pluginSass()],
3031
});

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

Lines changed: 7 additions & 0 deletions
Loading

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
.counter-title {
2+
width: 100px;
3+
height: 100px;
4+
background: no-repeat url('./assets/logo.svg');
5+
background-size: cover;
6+
}
7+
18
.counter-text {
29
font-size: 50px;
310
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const Counter: React.FC = () => {
88

99
return (
1010
<div>
11+
<h1 className="counter-title">React</h1>
1112
<h2 className="counter-text">Counter: {count}</h2>
1213
<CounterButton onClick={decrement} label="-" />
1314
<CounterButton onClick={increment} label="+" />

‎packages/core/src/asset/assetConfig.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import type { RsbuildConfig } from '@rsbuild/core';
2+
import type { Format } from '../types';
3+
4+
export const composeAssetConfig = (
5+
bundle: boolean,
6+
format: Format,
7+
): RsbuildConfig => {
8+
if (format === 'esm' || format === 'cjs') {
9+
if (bundle) {
10+
return {
11+
output: {
12+
dataUriLimit: 0, // default: no inline asset
13+
// assetPrefix: 'auto', // TODO: will turn on this with js support together in the future
14+
},
15+
};
16+
}
17+
// TODO: bundleless
18+
return {};
19+
}
20+
21+
// mf and umd etc
22+
return {};
23+
};

‎packages/core/src/config.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
rspack,
1212
} from '@rsbuild/core';
1313
import { glob } from 'tinyglobby';
14+
import { composeAssetConfig } from './asset/assetConfig';
1415
import {
1516
DEFAULT_CONFIG_EXTENSIONS,
1617
DEFAULT_CONFIG_NAME,
@@ -1221,6 +1222,8 @@ async function composeLibRsbuildConfig(
12211222
cssModulesAuto,
12221223
);
12231224
const cssConfig = composeCssConfig(lcp, config.bundle);
1225+
const assetConfig = composeAssetConfig(bundle, format!);
1226+
12241227
const entryChunkConfig = composeEntryChunkConfig({
12251228
enabledImportMetaUrlShim: enabledShims.cjs['import.meta.url'],
12261229
});
@@ -1251,6 +1254,7 @@ async function composeLibRsbuildConfig(
12511254
targetConfig,
12521255
entryConfig,
12531256
cssConfig,
1257+
assetConfig,
12541258
entryChunkConfig,
12551259
minifyConfig,
12561260
dtsConfig,

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config 1
99
},
1010
"mode": "production",
1111
"output": {
12+
"dataUriLimit": 0,
1213
"distPath": {
1314
"css": "./",
1415
"cssAsync": "./",
@@ -248,6 +249,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config 1
248249
},
249250
"mode": "production",
250251
"output": {
252+
"dataUriLimit": 0,
251253
"distPath": {
252254
"css": "./",
253255
"cssAsync": "./",

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import assert from 'node:assert';
12
import fs from 'node:fs';
23
import path from 'node:path';
34
import { type Page, expect, test } from '@playwright/test';
@@ -27,9 +28,19 @@ async function styleShouldWork(page: Page) {
2728

2829
const buttonEl = page.locator('#root button');
2930
const [subtractEl, addEl] = await buttonEl.all();
30-
subtractEl &&
31-
expect(subtractEl).toHaveCSS('background-color', 'rgb(255, 255, 0)');
32-
addEl && expect(addEl).toHaveCSS('background-color', 'rgb(255, 255, 0)');
31+
assert(subtractEl);
32+
assert(addEl);
33+
expect(subtractEl).toHaveCSS('background-color', 'rgb(255, 255, 0)');
34+
expect(addEl).toHaveCSS('background-color', 'rgb(255, 255, 0)');
35+
}
36+
37+
async function assetShouldWork(page: Page) {
38+
// asset in css url('./logo.svg')
39+
const h1El = page.locator('h1');
40+
assert(h1El);
41+
expect(h1El).toHaveCSS('background', /static\/svg\/logo/);
42+
43+
// TODO: asset in js
3344
}
3445

3546
test('should render example "react-component-bundle" successfully', async ({
@@ -43,6 +54,7 @@ test('should render example "react-component-bundle" successfully', async ({
4354

4455
await counterCompShouldWork(page);
4556
await styleShouldWork(page);
57+
await assetShouldWork(page);
4658
await rsbuild.close();
4759
});
4860

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export default defineConfig({
6262
},
6363
output: {
6464
target: 'web',
65+
dataUriLimit: 0, // always emit asset for test
6566
},
6667
plugins: [
6768
pluginReact({

‎tests/integration/asset/limit/rslib.config.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ export default defineConfig({
88
distPath: {
99
root: './dist/esm/inline',
1010
},
11+
dataUriLimit: {
12+
svg: 4096,
13+
},
1114
},
1215
}),
1316
generateBundleEsmConfig({
1417
output: {
1518
distPath: {
1619
root: './dist/esm/external',
1720
},
18-
dataUriLimit: {
19-
svg: 0,
20-
},
2121
},
2222
}),
2323
generateBundleEsmConfig({
@@ -26,6 +26,9 @@ export default defineConfig({
2626
distPath: {
2727
root: './dist/esm/inline-bundleless',
2828
},
29+
dataUriLimit: {
30+
svg: 4096,
31+
},
2932
},
3033
}),
3134
generateBundleEsmConfig({

‎tests/integration/style/sass/__fixtures__/src/foundation/index.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
body {
2-
// background: url(./logo.svg);
2+
background: url(./logo.svg);
33
}

‎tests/integration/style/sass/__fixtures__/src/index.scss

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@
33
// @import '~lib1/index.css';
44
@import './foundation/index.scss';
55

6-
// TODO: asset support
7-
// $url: './foundation/logo.svg';
6+
$url: './foundation/logo.svg';
87
$border-dark: rgba($base-color, 0.88);
98

10-
// .url-variable {
11-
// background: url($url);
12-
// }
9+
.url-variable {
10+
background: url($url);
11+
}
1312

1413
.alert {
1514
border: 1px solid $border-dark;

‎tests/integration/style/sass/bundle/rslib.config.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,6 @@ export default defineConfig({
1818
],
1919
output: {
2020
target: 'web',
21-
// dataUriLimit: {
22-
// svg: 0,
23-
// },
21+
assetPrefix: 'auto', // TODO: move this line to packages/core/src/asset/assetConfig.ts
2422
},
2523
});

‎tests/integration/style/sass/index.test.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ test('should extract css with pluginSass in bundle-false', async () => {
2929
[
3030
"<ROOT>/tests/integration/style/sass/bundle-false/dist/esm/foundation/_code.css",
3131
"<ROOT>/tests/integration/style/sass/bundle-false/dist/esm/foundation/_lists.css",
32+
"<ROOT>/tests/integration/style/sass/bundle-false/dist/esm/foundation/index.css",
3233
"<ROOT>/tests/integration/style/sass/bundle-false/dist/esm/index.css",
3334
]
3435
`);
@@ -38,6 +39,7 @@ test('should extract css with pluginSass in bundle-false', async () => {
3839
[
3940
"<ROOT>/tests/integration/style/sass/bundle-false/dist/cjs/foundation/_code.css",
4041
"<ROOT>/tests/integration/style/sass/bundle-false/dist/cjs/foundation/_lists.css",
42+
"<ROOT>/tests/integration/style/sass/bundle-false/dist/cjs/foundation/index.css",
4143
"<ROOT>/tests/integration/style/sass/bundle-false/dist/cjs/index.css",
4244
]
4345
`);

0 commit comments

Comments
 (0)