From 973ba7519a7fef05ae4a3ee2b83f96451aca4de0 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Mon, 25 Nov 2024 18:20:47 +0800
Subject: [PATCH] feat: support `?inline` query on svelte style virtual modules
 (#1024)

* feat: support `?inline` query on svelte style virtual modules

* chore: add workaround

* refactor: use query.inline
---
 .changeset/sixty-chefs-relate.md              |  5 ++++
 .../svelte-5/ssr-inline-style.txt             |  3 ++
 .../__tests__/import-queries.spec.ts          |  7 +++++
 packages/e2e-tests/kit-node/vite.config.js    | 28 +++++++++++++++++--
 packages/vite-plugin-svelte/src/index.js      |  6 +++-
 packages/vite-plugin-svelte/src/types/id.d.ts |  1 +
 6 files changed, 46 insertions(+), 4 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/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=$/, '');
+			}
+		}
+	};
+}
diff --git a/packages/vite-plugin-svelte/src/index.js b/packages/vite-plugin-svelte/src/index.js
index 4b27ffec6..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) {
+					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 25ff3616a..bbd4dd468 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 {