feat: support ?inline query on svelte style virtual modules

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/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(

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 {

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
 	};
 }