From 50acb22caf2901283e044cdfda36db6f07b3e0ae Mon Sep 17 00:00:00 2001
From: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>
Date: Wed, 17 May 2023 00:24:07 +0545
Subject: [PATCH] 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              |  5 +++
 packages/kit/src/exports/vite/dev/index.js    | 15 ++++-----
 .../apps/basics/src/routes/css/+page.svelte   | 17 +++++-----
 .../apps/basics/src/routes/css/_manual.css    |  3 ++
 .../apps/basics/test/cross-platform/test.js   | 33 +++++++++----------
 5 files changed, 38 insertions(+), 35 deletions(-)
 create mode 100644 .changeset/eleven-ravens-turn.md
 create mode 100644 packages/kit/test/apps/basics/src/routes/css/_manual.css

diff --git a/.changeset/eleven-ravens-turn.md b/.changeset/eleven-ravens-turn.md
new file mode 100644
index 000000000000..0c0315069f61
--- /dev/null
+++ b/.changeset/eleven-ravens-turn.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: avoid trying to inline raw or url css imports
diff --git a/packages/kit/src/exports/vite/dev/index.js b/packages/kit/src/exports/vite/dev/index.js
index b77c163d9aca..cfa237b0fb73 100644
--- a/packages/kit/src/exports/vite/dev/index.js
+++ b/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
diff --git a/packages/kit/test/apps/basics/src/routes/css/+page.svelte b/packages/kit/test/apps/basics/src/routes/css/+page.svelte
index 45074c38b15c..fca01c864628 100644
--- a/packages/kit/test/apps/basics/src/routes/css/+page.svelte
+++ b/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>
 
diff --git a/packages/kit/test/apps/basics/src/routes/css/_manual.css b/packages/kit/test/apps/basics/src/routes/css/_manual.css
new file mode 100644
index 000000000000..a800732cbe85
--- /dev/null
+++ b/packages/kit/test/apps/basics/src/routes/css/_manual.css
@@ -0,0 +1,3 @@
+.not {
+	color: blue;
+}
diff --git a/packages/kit/test/apps/basics/test/cross-platform/test.js b/packages/kit/test/apps/basics/test/cross-platform/test.js
index 1c34b889e302..11f2fb270823 100644
--- a/packages/kit/test/apps/basics/test/cross-platform/test.js
+++ b/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)');
+		});
 	});
 });