Skip to content

Commit 5dada25

Browse files
authored
avoid FOUC when using CSS modules in dev (#9323)
1 parent ce0e9a4 commit 5dada25

File tree

2 files changed

+13
-3
lines changed

2 files changed

+13
-3
lines changed

.changeset/lemon-beers-yawn.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltejs/kit': patch
3+
---
4+
5+
fix: avoid FOUC when using CSS modules in dev

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

+8-3
Original file line numberDiff line numberDiff line change
@@ -175,15 +175,20 @@ export async function dev(vite, vite_config, svelte_config) {
175175
const styles = {};
176176

177177
for (const dep of deps) {
178-
const parsed = new URL(dep.url, 'http://localhost/');
179-
const query = parsed.searchParams;
178+
const url = new URL(dep.url, 'http://localhost/');
179+
const query = url.searchParams;
180180

181181
if (
182182
isCSSRequest(dep.file) ||
183183
(query.has('svelte') && query.get('type') === 'style')
184184
) {
185+
// setting `?inline` to load CSS modules as css string
186+
query.set('inline', '');
187+
185188
try {
186-
const mod = await loud_ssr_load_module(dep.url);
189+
const mod = await loud_ssr_load_module(
190+
`${url.pathname}${url.search}${url.hash}`
191+
);
187192
styles[dep.url] = mod.default;
188193
} catch {
189194
// this can happen with dynamically imported modules, I think

0 commit comments

Comments
 (0)