fix: avoid inlining raw/url CSS imports (#9925)

* fix: use transformRequest for CSS modules

* just avoid raw or url

* test and changeset

* use parsed query

* remove only

* Update packages/kit/test/apps/basics/test/cross-platform/test.js

* drive by test speed up

.changeset/eleven-ravens-turn.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: avoid trying to inline raw or url css imports

packages/kit/src/exports/vite/dev/index.js

@@ -176,20 +176,17 @@ export async function dev(vite, vite_config, svelte_config) {
 							const styles = {};
 
 							for (const dep of deps) {
-								const url = new URL(dep.url, 'http://localhost/');
+								const url = new URL(dep.url, 'dummy:/');
 								const query = url.searchParams;
 
 								if (
-									isCSSRequest(dep.file) ||
-									(query.has('svelte') && query.get('type') === 'style')
+									(isCSSRequest(dep.file) ||
+										(query.has('svelte') && query.get('type') === 'style')) &&
+									!(query.has('raw') || query.has('url') || query.has('inline'))
 								) {
-									// setting `?inline` to load CSS modules as css string
-									query.set('inline', '');
-
 									try {
-										const mod = await loud_ssr_load_module(
-											`${url.pathname}${url.search}${url.hash}`
-										);
+										query.set('inline', '');
+										const mod = await vite.ssrLoadModule(`${url.pathname}${url.search}${url.hash}`);
 										styles[dep.url] = mod.default;
 									} catch {
 										// this can happen with dynamically imported modules, I think

packages/kit/test/apps/basics/src/routes/css/+page.svelte

@@ -1,18 +1,17 @@
 <script>
 	import './_styles.css';
+	import './_manual.css?url';
+	import './_manual.css?raw';
+	import './_manual.css?inline';
 </script>
 
-<div class="styled">
-	this text is red
-</div>
+<div class="styled">this text is red</div>
 
-<div class="also-styled">
-	this text is blue
-</div>
+<div class="also-styled">this text is blue</div>
 
-<div class="overridden">
-	this text is green
-</div>
+<div class="overridden">this text is green</div>
+
+<div class="not">this text is black</div>
 
 <a href="/css/other">other</a>
 

packages/kit/test/apps/basics/src/routes/css/_manual.css

@@ -0,0 +1,3 @@
+.not {
+	color: blue;
+}

packages/kit/test/apps/basics/test/cross-platform/test.js

@@ -6,29 +6,28 @@ import { test } from '../../../../utils.js';
 test.describe.configure({ mode: 'parallel' });
 
 test.describe('CSS', () => {
-	test('applies imported styles', async ({ page, get_computed_style }) => {
+	test('applies styles correctly', async ({ page, get_computed_style }) => {
 		await page.goto('/css');
 
-		expect(await get_computed_style('.styled', 'color')).toBe('rgb(255, 0, 0)');
-	});
-
-	test('applies layout styles', async ({ page, get_computed_style }) => {
-		await page.goto('/css');
-
-		expect(await get_computed_style('footer', 'color')).toBe('rgb(128, 0, 128)');
-	});
+		test.step('applies imported styles', async () => {
+			expect(await get_computed_style('.styled', 'color')).toBe('rgb(255, 0, 0)');
+		});
 
-	test('applies local styles', async ({ page, get_computed_style }) => {
-		await page.goto('/css');
+		test.step('applies imported styles in the correct order', async () => {
+			expect(await get_computed_style('.overridden', 'color')).toBe('rgb(0, 128, 0)');
+		});
 
-		expect(await get_computed_style('.also-styled', 'color')).toBe('rgb(0, 0, 255)');
-	});
+		test.step('applies layout styles', async () => {
+			expect(await get_computed_style('footer', 'color')).toBe('rgb(128, 0, 128)');
+		});
 
-	test('applies imported styles in the correct order', async ({ page, get_computed_style }) => {
-		await page.goto('/css');
+		test.step('applies local styles', async () => {
+			expect(await get_computed_style('.also-styled', 'color')).toBe('rgb(0, 0, 255)');
+		});
 
-		const color = await get_computed_style('.overridden', 'color');
-		expect(color).toBe('rgb(0, 128, 0)');
+		test.step('does not apply raw and url', async () => {
+			expect(await get_computed_style('.not', 'color')).toBe('rgb(0, 0, 0)');
+		});
 	});
 });