From 31325ef348eab8d450ea68edbbea924b3b43d872 Mon Sep 17 00:00:00 2001 From: bluwy Date: Fri, 15 Nov 2024 22:27:29 +0800 Subject: [PATCH 1/4] fix: update inline css url in dev --- packages/kit/src/exports/vite/dev/index.js | 23 ++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/kit/src/exports/vite/dev/index.js b/packages/kit/src/exports/vite/dev/index.js index 0dbc912940a2..74dd23306805 100644 --- a/packages/kit/src/exports/vite/dev/index.js +++ b/packages/kit/src/exports/vite/dev/index.js @@ -20,6 +20,10 @@ import { SCHEME } from '../../../utils/url.js'; import { check_feature } from '../../../utils/features.js'; const cwd = process.cwd(); +// vite-specifc queries that we should skip handling for css urls +const vite_css_query_regex = /(?:\?|&)(?:raw|url|inline)(?:&|$)/; +const svelte_query_regex = /(?:\?|&)svelte(?:&|$)/; +const type_css_query_regex = /(?:\?|&)type=css(?:&|$)/; /** * @param {import('vite').ViteDevServer} vite @@ -187,6 +191,7 @@ export async function dev(vite, vite_config, svelte_config) { // in dev we inline all styles to avoid FOUC. this gets populated lazily so that // components/stylesheets loaded via import() during `load` are included result.inline_styles = async () => { + /** @type {Set} */ const deps = new Set(); for (const module_node of module_nodes) { @@ -197,19 +202,17 @@ export async function dev(vite, vite_config, svelte_config) { const styles = {}; for (const dep of deps) { - const url = new URL(dep.url, 'dummy:/'); - const query = url.searchParams; - if ( - (isCSSRequest(dep.file) || - (query.has('svelte') && query.get('type') === 'style')) && - !(query.has('raw') || query.has('url') || query.has('inline')) + isCSSRequest(dep.url) && + svelte_query_regex.test(dep.url) && + type_css_query_regex.test(dep.url) && + !vite_css_query_regex.test(dep.url) ) { + const inlineCssUrl = dep.url.includes('?') + ? dep.url.replace('?', '?inline&') + : dep.url + '?inline'; try { - query.set('inline', ''); - const mod = await vite.ssrLoadModule( - `${decodeURI(url.pathname)}${url.search}${url.hash}` - ); + const mod = await vite.ssrLoadModule(inlineCssUrl); styles[dep.url] = mod.default; } catch { // this can happen with dynamically imported modules, I think From 27cbab44f53bd69595eecdad781e2366c5b16f71 Mon Sep 17 00:00:00 2001 From: bluwy Date: Fri, 15 Nov 2024 22:38:31 +0800 Subject: [PATCH 2/4] chore: add changeset --- .changeset/ninety-dragons-carry.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/ninety-dragons-carry.md diff --git a/.changeset/ninety-dragons-carry.md b/.changeset/ninety-dragons-carry.md new file mode 100644 index 000000000000..bf6bf5189b9b --- /dev/null +++ b/.changeset/ninety-dragons-carry.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +fix: update inline css url generation for FOUC prevention in dev From e2d95507b586ec596e8f352361b70fd7232736bd Mon Sep 17 00:00:00 2001 From: bluwy Date: Fri, 15 Nov 2024 23:03:11 +0800 Subject: [PATCH 3/4] chore: fix --- packages/kit/src/exports/vite/dev/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/kit/src/exports/vite/dev/index.js b/packages/kit/src/exports/vite/dev/index.js index 74dd23306805..05c5b9b28354 100644 --- a/packages/kit/src/exports/vite/dev/index.js +++ b/packages/kit/src/exports/vite/dev/index.js @@ -203,9 +203,8 @@ export async function dev(vite, vite_config, svelte_config) { for (const dep of deps) { if ( - isCSSRequest(dep.url) && - svelte_query_regex.test(dep.url) && - type_css_query_regex.test(dep.url) && + (isCSSRequest(dep.url) || + (svelte_query_regex.test(dep.url) && type_css_query_regex.test(dep.url))) && !vite_css_query_regex.test(dep.url) ) { const inlineCssUrl = dep.url.includes('?') From 41fe9e0e79ca49794501dd6aa57c959c2e68cb46 Mon Sep 17 00:00:00 2001 From: bluwy Date: Fri, 22 Nov 2024 18:16:21 +0800 Subject: [PATCH 4/4] chore: simplify --- packages/kit/src/exports/vite/dev/index.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/kit/src/exports/vite/dev/index.js b/packages/kit/src/exports/vite/dev/index.js index 05c5b9b28354..6ff56d904174 100644 --- a/packages/kit/src/exports/vite/dev/index.js +++ b/packages/kit/src/exports/vite/dev/index.js @@ -22,8 +22,6 @@ import { check_feature } from '../../../utils/features.js'; const cwd = process.cwd(); // vite-specifc queries that we should skip handling for css urls const vite_css_query_regex = /(?:\?|&)(?:raw|url|inline)(?:&|$)/; -const svelte_query_regex = /(?:\?|&)svelte(?:&|$)/; -const type_css_query_regex = /(?:\?|&)type=css(?:&|$)/; /** * @param {import('vite').ViteDevServer} vite @@ -202,11 +200,7 @@ export async function dev(vite, vite_config, svelte_config) { const styles = {}; for (const dep of deps) { - if ( - (isCSSRequest(dep.url) || - (svelte_query_regex.test(dep.url) && type_css_query_regex.test(dep.url))) && - !vite_css_query_regex.test(dep.url) - ) { + if (isCSSRequest(dep.url) && !vite_css_query_regex.test(dep.url)) { const inlineCssUrl = dep.url.includes('?') ? dep.url.replace('?', '?inline&') : dep.url + '?inline';