From 1c4951552efecd2ecbcf8a85d3ed3ea29f89cf79 Mon Sep 17 00:00:00 2001 From: gtmnayan Date: Mon, 15 May 2023 07:48:42 +0545 Subject: [PATCH 1/7] fix: use transformRequest for CSS modules --- packages/kit/src/exports/vite/dev/index.js | 28 +++++++++++++++------- 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/packages/kit/src/exports/vite/dev/index.js b/packages/kit/src/exports/vite/dev/index.js index b77c163d9aca..2b79f86e6772 100644 --- a/packages/kit/src/exports/vite/dev/index.js +++ b/packages/kit/src/exports/vite/dev/index.js @@ -176,21 +176,33 @@ export async function dev(vite, vite_config, svelte_config) { const styles = {}; for (const dep of deps) { - const url = new URL(dep.url, 'http://localhost/'); + const url = new URL(dep.url, 'dummy:/'); 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( - `${url.pathname}${url.search}${url.hash}` - ); - styles[dep.url] = mod.default; + if (query.has('svelte')) { + // Hashes are different when using transformRequest + // which causes FOUC + const mod = await loud_ssr_load_module( + `${url.pathname}${url.search}${url.hash}` + ); + styles[dep.url] = mod.default; + } else { + // Pretend it's a client request so that it gets what the client would get + query.set('direct', '') + + const result = await vite.transformRequest( + `${url.pathname}${url.search}${url.hash}` + ); + + if (result?.code) { + styles[dep.url] = result.code; + } + } } catch { // this can happen with dynamically imported modules, I think // because the Vite module graph doesn't distinguish between From 7fef50e3628b1f60bcc38917379d0bb19b1a4949 Mon Sep 17 00:00:00 2001 From: gtmnayan Date: Mon, 15 May 2023 12:41:37 +0545 Subject: [PATCH 2/7] just avoid raw or url --- packages/kit/src/exports/vite/dev/index.js | 24 +++++----------------- 1 file changed, 5 insertions(+), 19 deletions(-) diff --git a/packages/kit/src/exports/vite/dev/index.js b/packages/kit/src/exports/vite/dev/index.js index 2b79f86e6772..230091fb7d88 100644 --- a/packages/kit/src/exports/vite/dev/index.js +++ b/packages/kit/src/exports/vite/dev/index.js @@ -176,6 +176,8 @@ export async function dev(vite, vite_config, svelte_config) { const styles = {}; for (const dep of deps) { + if (/[?&](?:raw|url|inline)\b/.test(dep.url)) continue; + const url = new URL(dep.url, 'dummy:/'); const query = url.searchParams; @@ -184,25 +186,9 @@ export async function dev(vite, vite_config, svelte_config) { (query.has('svelte') && query.get('type') === 'style') ) { try { - if (query.has('svelte')) { - // Hashes are different when using transformRequest - // which causes FOUC - const mod = await loud_ssr_load_module( - `${url.pathname}${url.search}${url.hash}` - ); - styles[dep.url] = mod.default; - } else { - // Pretend it's a client request so that it gets what the client would get - query.set('direct', '') - - const result = await vite.transformRequest( - `${url.pathname}${url.search}${url.hash}` - ); - - if (result?.code) { - styles[dep.url] = result.code; - } - } + query.set('inline', ''); + const mod = await vite.ssrLoadModule(`${url.pathname}${url.search}${url.hash}`); + styles[dep.url] = mod.default; } catch { // this can happen with dynamically imported modules, I think // because the Vite module graph doesn't distinguish between From 37d42cd47f4d13202d74c777be03f802f33232d3 Mon Sep 17 00:00:00 2001 From: gtmnayan Date: Mon, 15 May 2023 12:54:34 +0545 Subject: [PATCH 3/7] test and changeset --- .changeset/eleven-ravens-turn.md | 5 +++++ .../apps/basics/src/routes/css/+page.svelte | 17 ++++++++--------- .../test/apps/basics/src/routes/css/_manual.css | 3 +++ .../apps/basics/test/cross-platform/test.js | 6 ++++++ 4 files changed, 22 insertions(+), 9 deletions(-) create mode 100644 .changeset/eleven-ravens-turn.md create mode 100644 packages/kit/test/apps/basics/src/routes/css/_manual.css diff --git a/.changeset/eleven-ravens-turn.md b/.changeset/eleven-ravens-turn.md new file mode 100644 index 000000000000..0c0315069f61 --- /dev/null +++ b/.changeset/eleven-ravens-turn.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +fix: avoid trying to inline raw or url css imports diff --git a/packages/kit/test/apps/basics/src/routes/css/+page.svelte b/packages/kit/test/apps/basics/src/routes/css/+page.svelte index 45074c38b15c..fca01c864628 100644 --- a/packages/kit/test/apps/basics/src/routes/css/+page.svelte +++ b/packages/kit/test/apps/basics/src/routes/css/+page.svelte @@ -1,18 +1,17 @@ -
- this text is red -
+
this text is red
-
- this text is blue -
+
this text is blue
-
- this text is green -
+
this text is green
+ +
this text is black
other diff --git a/packages/kit/test/apps/basics/src/routes/css/_manual.css b/packages/kit/test/apps/basics/src/routes/css/_manual.css new file mode 100644 index 000000000000..a800732cbe85 --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/css/_manual.css @@ -0,0 +1,3 @@ +.not { + color: blue; +} diff --git a/packages/kit/test/apps/basics/test/cross-platform/test.js b/packages/kit/test/apps/basics/test/cross-platform/test.js index 1c34b889e302..fdfb5976f4fb 100644 --- a/packages/kit/test/apps/basics/test/cross-platform/test.js +++ b/packages/kit/test/apps/basics/test/cross-platform/test.js @@ -24,6 +24,12 @@ test.describe('CSS', () => { expect(await get_computed_style('.also-styled', 'color')).toBe('rgb(0, 0, 255)'); }); + test.only('does not apply raw and url', async ({ page, get_computed_style }) => { + await page.goto('/css'); + await page.pause(); + expect(await get_computed_style('.not', 'color')).toBe('rgb(0, 0, 0)'); + }); + test('applies imported styles in the correct order', async ({ page, get_computed_style }) => { await page.goto('/css'); From ec5bc78038312743fb16aa1c20e47d4790f16f8e Mon Sep 17 00:00:00 2001 From: gtmnayan Date: Mon, 15 May 2023 14:08:19 +0545 Subject: [PATCH 4/7] use parsed query --- packages/kit/src/exports/vite/dev/index.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/kit/src/exports/vite/dev/index.js b/packages/kit/src/exports/vite/dev/index.js index 230091fb7d88..cfa237b0fb73 100644 --- a/packages/kit/src/exports/vite/dev/index.js +++ b/packages/kit/src/exports/vite/dev/index.js @@ -176,14 +176,13 @@ export async function dev(vite, vite_config, svelte_config) { const styles = {}; for (const dep of deps) { - if (/[?&](?:raw|url|inline)\b/.test(dep.url)) continue; - const url = new URL(dep.url, 'dummy:/'); const query = url.searchParams; if ( - isCSSRequest(dep.file) || - (query.has('svelte') && query.get('type') === 'style') + (isCSSRequest(dep.file) || + (query.has('svelte') && query.get('type') === 'style')) && + !(query.has('raw') || query.has('url') || query.has('inline')) ) { try { query.set('inline', ''); From e74e086730c8d8128359e91d05299c7cd8abe417 Mon Sep 17 00:00:00 2001 From: gtmnayan Date: Mon, 15 May 2023 14:08:42 +0545 Subject: [PATCH 5/7] remove only --- packages/kit/test/apps/basics/test/cross-platform/test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kit/test/apps/basics/test/cross-platform/test.js b/packages/kit/test/apps/basics/test/cross-platform/test.js index fdfb5976f4fb..4388c92a89c5 100644 --- a/packages/kit/test/apps/basics/test/cross-platform/test.js +++ b/packages/kit/test/apps/basics/test/cross-platform/test.js @@ -24,7 +24,7 @@ test.describe('CSS', () => { expect(await get_computed_style('.also-styled', 'color')).toBe('rgb(0, 0, 255)'); }); - test.only('does not apply raw and url', async ({ page, get_computed_style }) => { + test('does not apply raw and url', async ({ page, get_computed_style }) => { await page.goto('/css'); await page.pause(); expect(await get_computed_style('.not', 'color')).toBe('rgb(0, 0, 0)'); From 852517d7716b490e7f4696afdb8a461901770242 Mon Sep 17 00:00:00 2001 From: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Date: Mon, 15 May 2023 15:55:15 +0545 Subject: [PATCH 6/7] Update packages/kit/test/apps/basics/test/cross-platform/test.js --- packages/kit/test/apps/basics/test/cross-platform/test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/kit/test/apps/basics/test/cross-platform/test.js b/packages/kit/test/apps/basics/test/cross-platform/test.js index 4388c92a89c5..9e7022523798 100644 --- a/packages/kit/test/apps/basics/test/cross-platform/test.js +++ b/packages/kit/test/apps/basics/test/cross-platform/test.js @@ -26,7 +26,6 @@ test.describe('CSS', () => { test('does not apply raw and url', async ({ page, get_computed_style }) => { await page.goto('/css'); - await page.pause(); expect(await get_computed_style('.not', 'color')).toBe('rgb(0, 0, 0)'); }); From 46897ae98cc8b3cdeab0f76a0fda225ecf94c9c5 Mon Sep 17 00:00:00 2001 From: gtmnayan Date: Mon, 15 May 2023 16:11:21 +0545 Subject: [PATCH 7/7] drive by test speed up --- .../apps/basics/test/cross-platform/test.js | 39 ++++++++----------- 1 file changed, 16 insertions(+), 23 deletions(-) diff --git a/packages/kit/test/apps/basics/test/cross-platform/test.js b/packages/kit/test/apps/basics/test/cross-platform/test.js index 4388c92a89c5..11f2fb270823 100644 --- a/packages/kit/test/apps/basics/test/cross-platform/test.js +++ b/packages/kit/test/apps/basics/test/cross-platform/test.js @@ -6,35 +6,28 @@ import { test } from '../../../../utils.js'; test.describe.configure({ mode: 'parallel' }); test.describe('CSS', () => { - test('applies imported styles', async ({ page, get_computed_style }) => { + test('applies styles correctly', async ({ page, get_computed_style }) => { await page.goto('/css'); - expect(await get_computed_style('.styled', 'color')).toBe('rgb(255, 0, 0)'); - }); - - test('applies layout styles', async ({ page, get_computed_style }) => { - await page.goto('/css'); - - expect(await get_computed_style('footer', 'color')).toBe('rgb(128, 0, 128)'); - }); - - test('applies local styles', async ({ page, get_computed_style }) => { - await page.goto('/css'); + test.step('applies imported styles', async () => { + expect(await get_computed_style('.styled', 'color')).toBe('rgb(255, 0, 0)'); + }); - expect(await get_computed_style('.also-styled', 'color')).toBe('rgb(0, 0, 255)'); - }); + test.step('applies imported styles in the correct order', async () => { + expect(await get_computed_style('.overridden', 'color')).toBe('rgb(0, 128, 0)'); + }); - test('does not apply raw and url', async ({ page, get_computed_style }) => { - await page.goto('/css'); - await page.pause(); - expect(await get_computed_style('.not', 'color')).toBe('rgb(0, 0, 0)'); - }); + test.step('applies layout styles', async () => { + expect(await get_computed_style('footer', 'color')).toBe('rgb(128, 0, 128)'); + }); - test('applies imported styles in the correct order', async ({ page, get_computed_style }) => { - await page.goto('/css'); + test.step('applies local styles', async () => { + expect(await get_computed_style('.also-styled', 'color')).toBe('rgb(0, 0, 255)'); + }); - const color = await get_computed_style('.overridden', 'color'); - expect(color).toBe('rgb(0, 128, 0)'); + test.step('does not apply raw and url', async () => { + expect(await get_computed_style('.not', 'color')).toBe('rgb(0, 0, 0)'); + }); }); });