From 5dada256dc05674a18946f8f19db1f25ba91aeaf Mon Sep 17 00:00:00 2001
From: DrLoopFall <120749263+DrLoopFall@users.noreply.github.com>
Date: Tue, 7 Mar 2023 01:04:15 +0530
Subject: [PATCH] avoid FOUC when using CSS modules in dev (#9323)

---
 .changeset/lemon-beers-yawn.md             |  5 +++++
 packages/kit/src/exports/vite/dev/index.js | 11 ++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/lemon-beers-yawn.md

diff --git a/.changeset/lemon-beers-yawn.md b/.changeset/lemon-beers-yawn.md
new file mode 100644
index 000000000000..291d57f4d7ad
--- /dev/null
+++ b/.changeset/lemon-beers-yawn.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: avoid FOUC when using CSS modules in dev
diff --git a/packages/kit/src/exports/vite/dev/index.js b/packages/kit/src/exports/vite/dev/index.js
index 27b3a1b5dace..1addb038e199 100644
--- a/packages/kit/src/exports/vite/dev/index.js
+++ b/packages/kit/src/exports/vite/dev/index.js
@@ -175,15 +175,20 @@ export async function dev(vite, vite_config, svelte_config) {
 							const styles = {};
 
 							for (const dep of deps) {
-								const parsed = new URL(dep.url, 'http://localhost/');
-								const query = parsed.searchParams;
+								const url = new URL(dep.url, 'http://localhost/');
+								const query = url.searchParams;
 
 								if (
 									isCSSRequest(dep.file) ||
 									(query.has('svelte') && query.get('type') === 'style')
 								) {
+									// setting `?inline` to load CSS modules as css string
+									query.set('inline', '');
+
 									try {
-										const mod = await loud_ssr_load_module(dep.url);
+										const mod = await loud_ssr_load_module(
+											`${url.pathname}${url.search}${url.hash}`
+										);
 										styles[dep.url] = mod.default;
 									} catch {
 										// this can happen with dynamically imported modules, I think