From 9ea834827f702c07273fd674657f154e4bfa7459 Mon Sep 17 00:00:00 2001 From: Adam Skoufis Date: Sun, 7 Dec 2025 15:41:23 +1100 Subject: [PATCH] `vite`: Pass through `build.assetsInlineLimit` --- .changeset/gentle-goats-guess.md | 7 ++ .changeset/hungry-radios-accept.md | 5 ++ packages/compiler/src/compiler.ts | 1 + tests/compiler/compiler.test.ts | 70 ++++++++++++++++++- .../fixtures/assets-inline-limit/assets.d.ts | 4 ++ .../fixtures/assets-inline-limit/square.svg | 5 ++ .../assets-inline-limit/styles.css.ts | 9 +++ 7 files changed, 100 insertions(+), 1 deletion(-) create mode 100644 .changeset/gentle-goats-guess.md create mode 100644 .changeset/hungry-radios-accept.md create mode 100644 tests/compiler/fixtures/assets-inline-limit/assets.d.ts create mode 100644 tests/compiler/fixtures/assets-inline-limit/square.svg create mode 100644 tests/compiler/fixtures/assets-inline-limit/styles.css.ts diff --git a/.changeset/gentle-goats-guess.md b/.changeset/gentle-goats-guess.md new file mode 100644 index 000000000..dc92b8193 --- /dev/null +++ b/.changeset/gentle-goats-guess.md @@ -0,0 +1,7 @@ +--- +'@vanilla-extract/vite-plugin': patch +--- + +Assets used in CSS generated by the plugin will now respect the [`build.assetsInlineLimit`] Vite configuration option + +[`build.assetsInlineLimit`]: https://vite.dev/config/build-options#build-assetsinlinelimit diff --git a/.changeset/hungry-radios-accept.md b/.changeset/hungry-radios-accept.md new file mode 100644 index 000000000..ce1f97504 --- /dev/null +++ b/.changeset/hungry-radios-accept.md @@ -0,0 +1,5 @@ +--- +'@vanilla-extract/compiler': patch +--- + +Pass through `viteConfig.build.assetsInlineLimit` to the compiler's `vite` server diff --git a/packages/compiler/src/compiler.ts b/packages/compiler/src/compiler.ts index 121a5bf08..31f2a0fef 100644 --- a/packages/compiler/src/compiler.ts +++ b/packages/compiler/src/compiler.ts @@ -123,6 +123,7 @@ const createViteServer = async ({ // Can be removed once https://github.com/vitejs/vite/pull/19247 is released. exclude: [/node_modules/], }, + assetsInlineLimit: viteConfig.build?.assetsInlineLimit, }, ssr: { noExternal: true, diff --git a/tests/compiler/compiler.test.ts b/tests/compiler/compiler.test.ts index 350ca31dd..b7ceb4de6 100644 --- a/tests/compiler/compiler.test.ts +++ b/tests/compiler/compiler.test.ts @@ -25,7 +25,9 @@ describe('compiler', () => { | 'vitePlugins' | 'tsconfigPaths' | 'basePath' - | 'getAllCss', + | 'getAllCss' + | 'assetsInlineLimit' + | 'assetsNoInlineLimit', ReturnType >; @@ -83,6 +85,22 @@ describe('compiler', () => { getAllCss: createCompiler({ root: __dirname, }), + assetsInlineLimit: createCompiler({ + root: __dirname, + viteConfig: { + build: { + assetsInlineLimit: 512, + }, + }, + }), + assetsNoInlineLimit: createCompiler({ + root: __dirname, + viteConfig: { + build: { + assetsInlineLimit: 0, + }, + }, + }), }; }); @@ -583,4 +601,54 @@ describe('compiler', () => { `); }); + + test('setting build.assetsInlineLimit = 0 should disable inlining', async () => { + const compiler = compilers.assetsNoInlineLimit; + + const cssPath = path.join( + __dirname, + 'fixtures/assets-inline-limit/styles.css.ts', + ); + const output = await compiler.processVanillaFile(cssPath); + const { css } = compiler.getCssForFile(cssPath); + + expect(output.source).toMatchInlineSnapshot(` + import '{{__dirname}}/fixtures/assets-inline-limit/styles.css.ts.vanilla.css'; + export var square = 'styles_square__upl4cj0'; + `); + + expect(css).toMatchInlineSnapshot(` + .styles_square__upl4cj0 { + width: 100px; + height: 100px; + background-image: url("/fixtures/assets-inline-limit/square.svg"); + background-size: cover; + } + `); + }); + + test('setting build.assetsInlineLimit = 512 should inline assets appropriately', async () => { + const compiler = compilers.assetsInlineLimit; + + const cssPath = path.join( + __dirname, + 'fixtures/assets-inline-limit/styles.css.ts', + ); + const output = await compiler.processVanillaFile(cssPath); + const { css } = compiler.getCssForFile(cssPath); + + expect(output.source).toMatchInlineSnapshot(` + import '{{__dirname}}/fixtures/assets-inline-limit/styles.css.ts.vanilla.css'; + export var square = 'styles_square__upl4cj0'; + `); + + expect(css).toMatchInlineSnapshot(` + .styles_square__upl4cj0 { + width: 100px; + height: 100px; + background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='1'%20y='1'%20width='14'%20height='14'%20fill='%23000000'/%3e%3c/svg%3e"); + background-size: cover; + } + `); + }); }); diff --git a/tests/compiler/fixtures/assets-inline-limit/assets.d.ts b/tests/compiler/fixtures/assets-inline-limit/assets.d.ts new file mode 100644 index 000000000..7d9f4da22 --- /dev/null +++ b/tests/compiler/fixtures/assets-inline-limit/assets.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + let ImageSrc: string; + export default ImageSrc; +} diff --git a/tests/compiler/fixtures/assets-inline-limit/square.svg b/tests/compiler/fixtures/assets-inline-limit/square.svg new file mode 100644 index 000000000..959658da6 --- /dev/null +++ b/tests/compiler/fixtures/assets-inline-limit/square.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/tests/compiler/fixtures/assets-inline-limit/styles.css.ts b/tests/compiler/fixtures/assets-inline-limit/styles.css.ts new file mode 100644 index 000000000..005313037 --- /dev/null +++ b/tests/compiler/fixtures/assets-inline-limit/styles.css.ts @@ -0,0 +1,9 @@ +import { style } from '@vanilla-extract/css'; +import asset from './square.svg'; + +export const square = style({ + width: '100px', + height: '100px', + backgroundImage: `url("${asset}")`, + backgroundSize: 'cover', +});