Skip to content

Commit efb9019

Browse files
authored
fix: update inline css url in dev (#13007)
1 parent 429bfb7 commit efb9019

File tree

2 files changed

+13
-12
lines changed

2 files changed

+13
-12
lines changed

.changeset/ninety-dragons-carry.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltejs/kit': patch
3+
---
4+
5+
fix: update inline css url generation for FOUC prevention in dev

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

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import { check_feature } from '../../../utils/features.js';
2121
import { escape_html } from '../../../utils/escape.js';
2222

2323
const cwd = process.cwd();
24+
// vite-specifc queries that we should skip handling for css urls
25+
const vite_css_query_regex = /(?:\?|&)(?:raw|url|inline)(?:&|$)/;
2426

2527
/**
2628
* @param {import('vite').ViteDevServer} vite
@@ -188,6 +190,7 @@ export async function dev(vite, vite_config, svelte_config) {
188190
// in dev we inline all styles to avoid FOUC. this gets populated lazily so that
189191
// components/stylesheets loaded via import() during `load` are included
190192
result.inline_styles = async () => {
193+
/** @type {Set<import('vite').ModuleNode>} */
191194
const deps = new Set();
192195

193196
for (const module_node of module_nodes) {
@@ -198,19 +201,12 @@ export async function dev(vite, vite_config, svelte_config) {
198201
const styles = {};
199202

200203
for (const dep of deps) {
201-
const url = new URL(dep.url, 'dummy:/');
202-
const query = url.searchParams;
203-
204-
if (
205-
(isCSSRequest(dep.file) ||
206-
(query.has('svelte') && query.get('type') === 'style')) &&
207-
!(query.has('raw') || query.has('url') || query.has('inline'))
208-
) {
204+
if (isCSSRequest(dep.url) && !vite_css_query_regex.test(dep.url)) {
205+
const inlineCssUrl = dep.url.includes('?')
206+
? dep.url.replace('?', '?inline&')
207+
: dep.url + '?inline';
209208
try {
210-
query.set('inline', '');
211-
const mod = await vite.ssrLoadModule(
212-
`${decodeURI(url.pathname)}${url.search}${url.hash}`
213-
);
209+
const mod = await vite.ssrLoadModule(inlineCssUrl);
214210
styles[dep.url] = mod.default;
215211
} catch {
216212
// this can happen with dynamically imported modules, I think

0 commit comments

Comments
 (0)