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

Author: bluwy

.changeset/sixty-chefs-relate.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Support `?inline` query on Svelte style virtual modules

packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-inline-style.txt

@@ -0,0 +1,3 @@
+button.svelte-d8vj6a {
+  color: #000099;
+}

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'));
+	});
 });

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=$/, '');
+			}
+		}
+	};
+}

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(

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 {