From 8fd2058f2846953eb91891e4c8d7024787aa3a4f Mon Sep 17 00:00:00 2001 From: bluwy Date: Fri, 15 Nov 2024 23:15:04 +0800 Subject: [PATCH 1/3] feat: support `?inline` query on svelte style virtual modules --- .changeset/sixty-chefs-relate.md | 5 +++++ .../__tests__/__snapshots__/svelte-5/ssr-inline-style.txt | 3 +++ .../import-queries/__tests__/import-queries.spec.ts | 7 +++++++ packages/vite-plugin-svelte/src/index.js | 2 +- packages/vite-plugin-svelte/src/types/id.d.ts | 2 ++ packages/vite-plugin-svelte/src/utils/id.js | 3 ++- 6 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 .changeset/sixty-chefs-relate.md create mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-inline-style.txt diff --git a/.changeset/sixty-chefs-relate.md b/.changeset/sixty-chefs-relate.md new file mode 100644 index 000000000..637763489 --- /dev/null +++ b/.changeset/sixty-chefs-relate.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/vite-plugin-svelte': minor +--- + +Support `?inline` query on Svelte style virtual modules diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-inline-style.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-inline-style.txt new file mode 100644 index 000000000..2e590fb1d --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-inline-style.txt @@ -0,0 +1,3 @@ +button.svelte-d8vj6a { + color: #000099; +} \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts b/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts index c181b824b..698eabb19 100644 --- a/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts +++ b/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts @@ -162,4 +162,11 @@ describe.runIf(!isBuild)('ssrLoadModule', () => { const result = await ssrLoadDummy('?raw&svelte&type=style'); await expect(result).toMatchFileSnapshot(snapshotFilename('ssr-style')); }); + test('?inline&svelte&type=style&lang.css', async () => { + // Preload Dummy.svelte first so its CSS is processed in the module graph, otherwise loading + // its css inlined url directly will return the raw svelte file rather than the style + await ssrLoadDummy(''); + const result = await ssrLoadDummy('?inline&svelte&type=style&lang.css'); + await expect(result).toMatchFileSnapshot(snapshotFilename('ssr-inline-style')); + }); }); diff --git a/packages/vite-plugin-svelte/src/index.js b/packages/vite-plugin-svelte/src/index.js index 622a315d2..6fb84035a 100644 --- a/packages/vite-plugin-svelte/src/index.js +++ b/packages/vite-plugin-svelte/src/index.js @@ -124,7 +124,7 @@ export function svelte(inlineOptions) { const ssr = !!opts?.ssr; const svelteRequest = requestParser(importee, ssr); if (svelteRequest?.query.svelte) { - if (svelteRequest.query.type === 'style' && !svelteRequest.raw) { + if (svelteRequest.query.type === 'style' && !svelteRequest.raw && !svelteRequest.inline) { // return cssId with root prefix so postcss pipeline of vite finds the directory correctly // see https://github.com/sveltejs/vite-plugin-svelte/issues/14 log.debug( diff --git a/packages/vite-plugin-svelte/src/types/id.d.ts b/packages/vite-plugin-svelte/src/types/id.d.ts index 25ff3616a..3b46e223d 100644 --- a/packages/vite-plugin-svelte/src/types/id.d.ts +++ b/packages/vite-plugin-svelte/src/types/id.d.ts @@ -15,6 +15,7 @@ export interface RequestQuery { url?: boolean; raw?: boolean; direct?: boolean; + inline?: boolean; } export interface SvelteRequest { @@ -26,6 +27,7 @@ export interface SvelteRequest { timestamp: number; ssr: boolean; raw: boolean; + inline: boolean; } export interface SvelteModuleRequest { diff --git a/packages/vite-plugin-svelte/src/utils/id.js b/packages/vite-plugin-svelte/src/utils/id.js index cb420dd72..15ecaf735 100644 --- a/packages/vite-plugin-svelte/src/utils/id.js +++ b/packages/vite-plugin-svelte/src/utils/id.js @@ -50,7 +50,8 @@ function parseToSvelteRequest(id, filename, rawQuery, root, timestamp, ssr) { query, timestamp, ssr, - raw + raw, + inline: !!query.inline }; } From 9457d3e2c40670dd947b044dc280e19881753c23 Mon Sep 17 00:00:00 2001 From: bluwy Date: Thu, 21 Nov 2024 23:29:44 +0800 Subject: [PATCH 2/3] chore: add workaround --- packages/e2e-tests/kit-node/vite.config.js | 28 +++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/e2e-tests/kit-node/vite.config.js b/packages/e2e-tests/kit-node/vite.config.js index 773e66d2e..9154df4d8 100644 --- a/packages/e2e-tests/kit-node/vite.config.js +++ b/packages/e2e-tests/kit-node/vite.config.js @@ -2,7 +2,7 @@ import { sveltekit } from '@sveltejs/kit/vite'; import { transformValidation, writeResolvedConfig } from 'e2e-test-dep-vite-plugins'; /** @type {import('vite').UserConfig} */ -const config = { +export default { server: { watch: { // During tests we edit the files too fast and sometimes chokidar @@ -15,11 +15,33 @@ const config = { minify: false, sourcemap: true // must be true for hermetic build test! }, - plugins: [transformValidation(), sveltekit(), writeResolvedConfig()], + plugins: [ + transformValidation(), + sveltekit(), + writeResolvedConfig(), + workaroundInlineSvelteCssIssue() + ], optimizeDeps: { // eagerly include these, otherwise vite optimizer might interfere with restarting while the test is running include: ['svelte-i18n', 'e2e-test-dep-svelte-api-only'] } }; -export default config; +/** + * Workaround until https://github.com/sveltejs/kit/pull/13007 is merged + * @returns {import('vite').Plugin} + */ +function workaroundInlineSvelteCssIssue() { + return { + name: 'workaround-inline-svelte-css-issue', + enforce: 'pre', + resolveId(id) { + // SvelteKit relies on a previous behaviour in v-p-s where it strips out the inline + // query to get the CSS result, however this no longer works in Vite 6 and should be + // fixed in SvelteKit instead, otherwise FOUC will happen in dev. + if (id.includes('?svelte')) { + return id.replace(/&inline=$/, ''); + } + } + }; +} From a7a6c8931b55fba65a550602b272c1b4a4546d60 Mon Sep 17 00:00:00 2001 From: bluwy Date: Fri, 22 Nov 2024 22:44:27 +0800 Subject: [PATCH 3/3] refactor: use query.inline --- packages/vite-plugin-svelte/src/index.js | 6 +++++- packages/vite-plugin-svelte/src/types/id.d.ts | 1 - packages/vite-plugin-svelte/src/utils/id.js | 3 +-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/vite-plugin-svelte/src/index.js b/packages/vite-plugin-svelte/src/index.js index 2f7603622..9ec43e9ec 100644 --- a/packages/vite-plugin-svelte/src/index.js +++ b/packages/vite-plugin-svelte/src/index.js @@ -136,7 +136,11 @@ export function svelte(inlineOptions) { const ssr = !!opts?.ssr; const svelteRequest = requestParser(importee, ssr); if (svelteRequest?.query.svelte) { - if (svelteRequest.query.type === 'style' && !svelteRequest.raw && !svelteRequest.inline) { + if ( + svelteRequest.query.type === 'style' && + !svelteRequest.raw && + !svelteRequest.query.inline + ) { // return cssId with root prefix so postcss pipeline of vite finds the directory correctly // see https://github.com/sveltejs/vite-plugin-svelte/issues/14 log.debug( diff --git a/packages/vite-plugin-svelte/src/types/id.d.ts b/packages/vite-plugin-svelte/src/types/id.d.ts index 3b46e223d..bbd4dd468 100644 --- a/packages/vite-plugin-svelte/src/types/id.d.ts +++ b/packages/vite-plugin-svelte/src/types/id.d.ts @@ -27,7 +27,6 @@ export interface SvelteRequest { timestamp: number; ssr: boolean; raw: boolean; - inline: boolean; } export interface SvelteModuleRequest { diff --git a/packages/vite-plugin-svelte/src/utils/id.js b/packages/vite-plugin-svelte/src/utils/id.js index 15ecaf735..cb420dd72 100644 --- a/packages/vite-plugin-svelte/src/utils/id.js +++ b/packages/vite-plugin-svelte/src/utils/id.js @@ -50,8 +50,7 @@ function parseToSvelteRequest(id, filename, rawQuery, root, timestamp, ssr) { query, timestamp, ssr, - raw, - inline: !!query.inline + raw }; }