avoid FOUC when using CSS modules in dev (#9323)

sveltejs · Mar 6, 2023 · 5dada25 · 5dada25
1 parent ce0e9a4
commit 5dada25
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/.changeset/lemon-beers-yawn.md 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
@@ -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