From 00c97323b34f841d17add6c7ddaeb1ee710bd196 Mon Sep 17 00:00:00 2001 From: sunyiteng Date: Wed, 18 Dec 2024 14:20:51 +0800 Subject: [PATCH 1/7] feat(css): support asset in bundle --- .../src/assets/logo.svg | 7 ++++++ .../react-component-bundle/src/index.scss | 4 +++ examples/react-component-bundle/src/index.tsx | 1 + packages/core/src/asset/assetConfig.ts | 25 +++++++++++++++++++ packages/core/src/config.ts | 4 +++ packages/core/src/css/cssConfig.ts | 2 +- 6 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 examples/react-component-bundle/src/assets/logo.svg create mode 100644 packages/core/src/asset/assetConfig.ts diff --git a/examples/react-component-bundle/src/assets/logo.svg b/examples/react-component-bundle/src/assets/logo.svg new file mode 100644 index 000000000..6b60c1042 --- /dev/null +++ b/examples/react-component-bundle/src/assets/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/react-component-bundle/src/index.scss b/examples/react-component-bundle/src/index.scss index 2e506a0ac..9d9246087 100644 --- a/examples/react-component-bundle/src/index.scss +++ b/examples/react-component-bundle/src/index.scss @@ -1,3 +1,7 @@ .counter-text { font-size: 50px; } + +.title { + background: url('./assets/logo.svg'); +} diff --git a/examples/react-component-bundle/src/index.tsx b/examples/react-component-bundle/src/index.tsx index b7e472bb2..c802a0113 100644 --- a/examples/react-component-bundle/src/index.tsx +++ b/examples/react-component-bundle/src/index.tsx @@ -8,6 +8,7 @@ export const Counter: React.FC = () => { return (
+

Counter: {count}

diff --git a/packages/core/src/asset/assetConfig.ts b/packages/core/src/asset/assetConfig.ts new file mode 100644 index 000000000..d02ed2860 --- /dev/null +++ b/packages/core/src/asset/assetConfig.ts @@ -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 {} +}; \ No newline at end of file diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts index a7ababfed..1d0b03d93 100644 --- a/packages/core/src/config.ts +++ b/packages/core/src/config.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, diff --git a/packages/core/src/css/cssConfig.ts b/packages/core/src/css/cssConfig.ts index 1a6dca064..f4f67750f 100644 --- a/packages/core/src/css/cssConfig.ts +++ b/packages/core/src/css/cssConfig.ts @@ -155,7 +155,7 @@ export const composeCssConfig = ( bundle = true, ): RsbuildConfig => { if (bundle || rootDir === null) { - return {}; + return {} } return { From 2783967287fc4eef8a994c3a4801a790be2bf45c Mon Sep 17 00:00:00 2001 From: sunyiteng Date: Wed, 18 Dec 2024 14:22:01 +0800 Subject: [PATCH 2/7] chore: lint --- examples/react-component-bundle/src/index.tsx | 2 +- packages/core/src/asset/assetConfig.ts | 23 +++++++++---------- packages/core/src/config.ts | 2 +- packages/core/src/css/cssConfig.ts | 2 +- 4 files changed, 14 insertions(+), 15 deletions(-) diff --git a/examples/react-component-bundle/src/index.tsx b/examples/react-component-bundle/src/index.tsx index c802a0113..5360227a0 100644 --- a/examples/react-component-bundle/src/index.tsx +++ b/examples/react-component-bundle/src/index.tsx @@ -8,7 +8,7 @@ export const Counter: React.FC = () => { return (
-

+

Counter: {count}

diff --git a/packages/core/src/asset/assetConfig.ts b/packages/core/src/asset/assetConfig.ts index d02ed2860..3d26c8e64 100644 --- a/packages/core/src/asset/assetConfig.ts +++ b/packages/core/src/asset/assetConfig.ts @@ -1,25 +1,24 @@ -import { RsbuildConfig } from "@rsbuild/core"; -import { Format } from "../types"; +import type { RsbuildConfig } from '@rsbuild/core'; +import type { Format } from '../types'; export const composeAssetConfig = ( bundle: boolean, - format: Format + format: Format, ): RsbuildConfig => { - if(format === 'esm' || format === 'cjs') { - if(bundle) { + 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 + assetPrefix: 'auto', // we currently not support import asset in js because of 'auto' publicPath runtime }, - } - } else { - // TODO: bundleless - return {} + }; } + // TODO: bundleless + return {}; } // mf and umd etc - return {} -}; \ No newline at end of file + return {}; +}; diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts index 1d0b03d93..2b99c8866 100644 --- a/packages/core/src/config.ts +++ b/packages/core/src/config.ts @@ -1,6 +1,5 @@ import fs from 'node:fs'; import path, { dirname, extname, isAbsolute, join } from 'node:path'; -import { composeAssetConfig } from './asset/assetConfig' import { type EnvironmentConfig, type RsbuildConfig, @@ -12,6 +11,7 @@ import { rspack, } from '@rsbuild/core'; import { glob } from 'tinyglobby'; +import { composeAssetConfig } from './asset/assetConfig'; import { DEFAULT_CONFIG_EXTENSIONS, DEFAULT_CONFIG_NAME, diff --git a/packages/core/src/css/cssConfig.ts b/packages/core/src/css/cssConfig.ts index f4f67750f..1a6dca064 100644 --- a/packages/core/src/css/cssConfig.ts +++ b/packages/core/src/css/cssConfig.ts @@ -155,7 +155,7 @@ export const composeCssConfig = ( bundle = true, ): RsbuildConfig => { if (bundle || rootDir === null) { - return {} + return {}; } return { From f6f98b82fec0a4f5d6805adc2f8f81a0897c9b6a Mon Sep 17 00:00:00 2001 From: sunyiteng Date: Wed, 18 Dec 2024 16:00:33 +0800 Subject: [PATCH 3/7] chore: update --- examples/react-component-bundle/src/index.scss | 11 +++++++---- examples/react-component-bundle/src/index.tsx | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/examples/react-component-bundle/src/index.scss b/examples/react-component-bundle/src/index.scss index 9d9246087..f4c82dce4 100644 --- a/examples/react-component-bundle/src/index.scss +++ b/examples/react-component-bundle/src/index.scss @@ -1,7 +1,10 @@ -.counter-text { - font-size: 50px; +.counter-title { + width: 100px; + height: 100px; + background: no-repeat url('./assets/logo.svg'); + background-size: cover; } -.title { - background: url('./assets/logo.svg'); +.counter-text { + font-size: 50px; } diff --git a/examples/react-component-bundle/src/index.tsx b/examples/react-component-bundle/src/index.tsx index 5360227a0..40b402601 100644 --- a/examples/react-component-bundle/src/index.tsx +++ b/examples/react-component-bundle/src/index.tsx @@ -8,7 +8,7 @@ export const Counter: React.FC = () => { return (
-

+

Counter React Component

Counter: {count}

From 613168c0ef57981e6a3fdf2cbe6f0400c4350ff6 Mon Sep 17 00:00:00 2001 From: sunyiteng Date: Wed, 18 Dec 2024 16:19:33 +0800 Subject: [PATCH 4/7] chore: update the example --- examples/react-component-bundle/src/index.tsx | 2 +- tests/e2e/react-component/index.pw.test.ts | 18 +++++++++++++++--- tests/e2e/react-component/rsbuild.config.ts | 1 + 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/examples/react-component-bundle/src/index.tsx b/examples/react-component-bundle/src/index.tsx index 40b402601..b9ceb8718 100644 --- a/examples/react-component-bundle/src/index.tsx +++ b/examples/react-component-bundle/src/index.tsx @@ -8,7 +8,7 @@ export const Counter: React.FC = () => { return (
-

Counter React Component

+

React

Counter: {count}

diff --git a/tests/e2e/react-component/index.pw.test.ts b/tests/e2e/react-component/index.pw.test.ts index c5ba1b514..fc0adde17 100644 --- a/tests/e2e/react-component/index.pw.test.ts +++ b/tests/e2e/react-component/index.pw.test.ts @@ -2,6 +2,7 @@ import fs from 'node:fs'; import path from 'node:path'; import { type Page, expect, test } from '@playwright/test'; import { dev } from 'test-helper/rsbuild'; +import assert from 'node:assert'; function getCwdByExample(exampleName: string) { return path.join(__dirname, '../../../examples', exampleName); @@ -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(); }); diff --git a/tests/e2e/react-component/rsbuild.config.ts b/tests/e2e/react-component/rsbuild.config.ts index 75d709864..54298e789 100644 --- a/tests/e2e/react-component/rsbuild.config.ts +++ b/tests/e2e/react-component/rsbuild.config.ts @@ -62,6 +62,7 @@ export default defineConfig({ }, output: { target: 'web', + dataUriLimit: 0 }, plugins: [ pluginReact({ From 36048f864c6963b05f502f238cd39ab9a3ea62a3 Mon Sep 17 00:00:00 2001 From: sunyiteng Date: Wed, 18 Dec 2024 16:34:59 +0800 Subject: [PATCH 5/7] chore: update the example --- examples/react-component-bundle/rslib.config.ts | 1 + packages/core/src/asset/assetConfig.ts | 2 +- packages/core/tests/__snapshots__/config.test.ts.snap | 2 ++ tests/e2e/react-component/index.pw.test.ts | 2 +- tests/e2e/react-component/rsbuild.config.ts | 2 +- 5 files changed, 6 insertions(+), 3 deletions(-) diff --git a/examples/react-component-bundle/rslib.config.ts b/examples/react-component-bundle/rslib.config.ts index 59d42518d..9ffb5d47c 100644 --- a/examples/react-component-bundle/rslib.config.ts +++ b/examples/react-component-bundle/rslib.config.ts @@ -25,6 +25,7 @@ export default defineConfig({ ], output: { target: 'web', + assetPrefix: 'auto', // FIXME: move this line to packages/core/src/asset/assetConfig.ts }, plugins: [pluginReact(), pluginSass()], }); diff --git a/packages/core/src/asset/assetConfig.ts b/packages/core/src/asset/assetConfig.ts index 3d26c8e64..00ba8b1d7 100644 --- a/packages/core/src/asset/assetConfig.ts +++ b/packages/core/src/asset/assetConfig.ts @@ -11,7 +11,7 @@ export const composeAssetConfig = ( output: { // default: no inline asset dataUriLimit: 0, - assetPrefix: 'auto', // we currently not support import asset in js because of 'auto' publicPath runtime + // assetPrefix: 'auto', // will turn on this with `preserveImport` }, }; } diff --git a/packages/core/tests/__snapshots__/config.test.ts.snap b/packages/core/tests/__snapshots__/config.test.ts.snap index f99920850..0e4cbf584 100644 --- a/packages/core/tests/__snapshots__/config.test.ts.snap +++ b/packages/core/tests/__snapshots__/config.test.ts.snap @@ -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": "./", diff --git a/tests/e2e/react-component/index.pw.test.ts b/tests/e2e/react-component/index.pw.test.ts index fc0adde17..54935d837 100644 --- a/tests/e2e/react-component/index.pw.test.ts +++ b/tests/e2e/react-component/index.pw.test.ts @@ -1,8 +1,8 @@ +import assert from 'node:assert'; import fs from 'node:fs'; import path from 'node:path'; import { type Page, expect, test } from '@playwright/test'; import { dev } from 'test-helper/rsbuild'; -import assert from 'node:assert'; function getCwdByExample(exampleName: string) { return path.join(__dirname, '../../../examples', exampleName); diff --git a/tests/e2e/react-component/rsbuild.config.ts b/tests/e2e/react-component/rsbuild.config.ts index 54298e789..94e159263 100644 --- a/tests/e2e/react-component/rsbuild.config.ts +++ b/tests/e2e/react-component/rsbuild.config.ts @@ -62,7 +62,7 @@ export default defineConfig({ }, output: { target: 'web', - dataUriLimit: 0 + dataUriLimit: 0, // always emit asset for test }, plugins: [ pluginReact({ From f69454dc7176ee6f2c2c14510077973c48ddb3c1 Mon Sep 17 00:00:00 2001 From: sunyiteng Date: Wed, 18 Dec 2024 16:44:19 +0800 Subject: [PATCH 6/7] chore: update the example --- examples/react-component-bundle/rslib.config.ts | 2 +- packages/core/src/asset/assetConfig.ts | 5 ++--- .../style/sass/__fixtures__/src/foundation/index.scss | 2 +- tests/integration/style/sass/__fixtures__/src/index.scss | 9 ++++----- tests/integration/style/sass/bundle/rslib.config.ts | 4 +--- 5 files changed, 9 insertions(+), 13 deletions(-) diff --git a/examples/react-component-bundle/rslib.config.ts b/examples/react-component-bundle/rslib.config.ts index 9ffb5d47c..c00c22eb5 100644 --- a/examples/react-component-bundle/rslib.config.ts +++ b/examples/react-component-bundle/rslib.config.ts @@ -25,7 +25,7 @@ export default defineConfig({ ], output: { target: 'web', - assetPrefix: 'auto', // FIXME: move this line to packages/core/src/asset/assetConfig.ts + assetPrefix: 'auto', // TODO: move this line to packages/core/src/asset/assetConfig.ts }, plugins: [pluginReact(), pluginSass()], }); diff --git a/packages/core/src/asset/assetConfig.ts b/packages/core/src/asset/assetConfig.ts index 00ba8b1d7..908913af9 100644 --- a/packages/core/src/asset/assetConfig.ts +++ b/packages/core/src/asset/assetConfig.ts @@ -9,9 +9,8 @@ export const composeAssetConfig = ( if (bundle) { return { output: { - // default: no inline asset - dataUriLimit: 0, - // assetPrefix: 'auto', // will turn on this with `preserveImport` + dataUriLimit: 0, // default: no inline asset + // assetPrefix: 'auto', // TODO: will turn on this with js support together in the future }, }; } diff --git a/tests/integration/style/sass/__fixtures__/src/foundation/index.scss b/tests/integration/style/sass/__fixtures__/src/foundation/index.scss index 274a0d5b8..6717afb6c 100644 --- a/tests/integration/style/sass/__fixtures__/src/foundation/index.scss +++ b/tests/integration/style/sass/__fixtures__/src/foundation/index.scss @@ -1,3 +1,3 @@ body { - // background: url(./logo.svg); + background: url(./logo.svg); } diff --git a/tests/integration/style/sass/__fixtures__/src/index.scss b/tests/integration/style/sass/__fixtures__/src/index.scss index 7c777ffc6..595e03e02 100644 --- a/tests/integration/style/sass/__fixtures__/src/index.scss +++ b/tests/integration/style/sass/__fixtures__/src/index.scss @@ -3,13 +3,12 @@ // @import '~lib1/index.css'; @import './foundation/index.scss'; -// TODO: asset support -// $url: './foundation/logo.svg'; +$url: './foundation/logo.svg'; $border-dark: rgba($base-color, 0.88); -// .url-variable { -// background: url($url); -// } +.url-variable { + background: url($url); +} .alert { border: 1px solid $border-dark; diff --git a/tests/integration/style/sass/bundle/rslib.config.ts b/tests/integration/style/sass/bundle/rslib.config.ts index dc80e308a..8d05f9f82 100644 --- a/tests/integration/style/sass/bundle/rslib.config.ts +++ b/tests/integration/style/sass/bundle/rslib.config.ts @@ -18,8 +18,6 @@ export default defineConfig({ ], output: { target: 'web', - // dataUriLimit: { - // svg: 0, - // }, + assetPrefix: 'auto', // TODO: move this line to packages/core/src/asset/assetConfig.ts }, }); From f6cc88130802515a4e43c4db75681cc1bb98e48d Mon Sep 17 00:00:00 2001 From: sunyiteng Date: Wed, 18 Dec 2024 17:19:43 +0800 Subject: [PATCH 7/7] chore: update the test --- tests/integration/asset/limit/rslib.config.ts | 9 ++++++--- tests/integration/style/sass/index.test.ts | 2 ++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/tests/integration/asset/limit/rslib.config.ts b/tests/integration/asset/limit/rslib.config.ts index b82c816c1..0d0ead07a 100644 --- a/tests/integration/asset/limit/rslib.config.ts +++ b/tests/integration/asset/limit/rslib.config.ts @@ -8,6 +8,9 @@ export default defineConfig({ distPath: { root: './dist/esm/inline', }, + dataUriLimit: { + svg: 4096, + }, }, }), generateBundleEsmConfig({ @@ -15,9 +18,6 @@ export default defineConfig({ 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({ diff --git a/tests/integration/style/sass/index.test.ts b/tests/integration/style/sass/index.test.ts index 2f4a28920..f85366bda 100644 --- a/tests/integration/style/sass/index.test.ts +++ b/tests/integration/style/sass/index.test.ts @@ -29,6 +29,7 @@ test('should extract css with pluginSass in bundle-false', async () => { [ "/tests/integration/style/sass/bundle-false/dist/esm/foundation/_code.css", "/tests/integration/style/sass/bundle-false/dist/esm/foundation/_lists.css", + "/tests/integration/style/sass/bundle-false/dist/esm/foundation/index.css", "/tests/integration/style/sass/bundle-false/dist/esm/index.css", ] `); @@ -38,6 +39,7 @@ test('should extract css with pluginSass in bundle-false', async () => { [ "/tests/integration/style/sass/bundle-false/dist/cjs/foundation/_code.css", "/tests/integration/style/sass/bundle-false/dist/cjs/foundation/_lists.css", + "/tests/integration/style/sass/bundle-false/dist/cjs/foundation/index.css", "/tests/integration/style/sass/bundle-false/dist/cjs/index.css", ] `);