From e2671093bc1bcd0cb74970d59229ea3b10a0a832 Mon Sep 17 00:00:00 2001 From: OnlyWick Date: Fri, 16 Feb 2024 17:21:04 +0800 Subject: [PATCH 1/6] fix(nuxt): support for the ?inline query parameter for Vite version > 5.0 --- packages/nuxt/src/core/runtime/nitro/renderer.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts index abcaddbea3c4..5e41903a01b5 100644 --- a/packages/nuxt/src/core/runtime/nitro/renderer.ts +++ b/packages/nuxt/src/core/runtime/nitro/renderer.ts @@ -393,6 +393,9 @@ export default defineRenderHandler(async (event): Promise 5.0 + if (process.env.NUXT_VITE_NODE_OPTIONS && resource.file.endsWith("?inline")) break; + link.push({ rel: 'stylesheet', href: renderer.rendererContext.buildAssetsURL(resource.file) }) } } From 968d288b0eb90b024fa24159e5eb17c785a2761c Mon Sep 17 00:00:00 2001 From: OnlyWick Date: Fri, 16 Feb 2024 19:40:11 +0800 Subject: [PATCH 2/6] Update packages/nuxt/src/core/runtime/nitro/renderer.ts Co-authored-by: Daniel Roe --- packages/nuxt/src/core/runtime/nitro/renderer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts index 5e41903a01b5..b42ffc7a377b 100644 --- a/packages/nuxt/src/core/runtime/nitro/renderer.ts +++ b/packages/nuxt/src/core/runtime/nitro/renderer.ts @@ -394,7 +394,7 @@ export default defineRenderHandler(async (event): Promise 5.0 - if (process.env.NUXT_VITE_NODE_OPTIONS && resource.file.endsWith("?inline")) break; + if (import.meta.dev && resource.file.endsWith('?inline')) continue link.push({ rel: 'stylesheet', href: renderer.rendererContext.buildAssetsURL(resource.file) }) } From 5a23380a2d13a4173bda19e9b80404edf8a53c1a Mon Sep 17 00:00:00 2001 From: OnlyWick Date: Fri, 16 Feb 2024 19:45:29 +0800 Subject: [PATCH 3/6] Update packages/nuxt/src/core/runtime/nitro/renderer.ts Co-authored-by: Daniel Roe --- packages/nuxt/src/core/runtime/nitro/renderer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts index b42ffc7a377b..4aba879b1866 100644 --- a/packages/nuxt/src/core/runtime/nitro/renderer.ts +++ b/packages/nuxt/src/core/runtime/nitro/renderer.ts @@ -394,7 +394,7 @@ export default defineRenderHandler(async (event): Promise 5.0 - if (import.meta.dev && resource.file.endsWith('?inline')) continue + if (import.meta.dev && 'inline' in getQuery(resource.file)) continue link.push({ rel: 'stylesheet', href: renderer.rendererContext.buildAssetsURL(resource.file) }) } From 231e1dccd85db76460613c09e0913d17c30b5031 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Fri, 16 Feb 2024 12:01:01 +0000 Subject: [PATCH 4/6] fix: use `getQuery` from `ufo` --- packages/nuxt/src/core/runtime/nitro/renderer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts index 4aba879b1866..46077c56f06f 100644 --- a/packages/nuxt/src/core/runtime/nitro/renderer.ts +++ b/packages/nuxt/src/core/runtime/nitro/renderer.ts @@ -13,7 +13,7 @@ import { appendResponseHeader, createError, getQuery, getResponseStatus, getResp import devalue from '@nuxt/devalue' import { stringify, uneval } from 'devalue' import destr from 'destr' -import { joinURL, withoutTrailingSlash } from 'ufo' +import { getQuery as getURLQuery, joinURL, withoutTrailingSlash } from 'ufo' import { renderToString as _renderToString } from 'vue/server-renderer' import { hash } from 'ohash' import { renderSSRHead } from '@unhead/ssr' @@ -394,7 +394,7 @@ export default defineRenderHandler(async (event): Promise 5.0 - if (import.meta.dev && 'inline' in getQuery(resource.file)) continue + if (import.meta.dev && 'inline' in getURLQuery(resource.file)) continue link.push({ rel: 'stylesheet', href: renderer.rendererContext.buildAssetsURL(resource.file) }) } From bf00f3334da54d60120724e6f726a4c4a61fcff8 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Fri, 16 Feb 2024 12:13:48 +0000 Subject: [PATCH 5/6] docs: add some comments --- packages/nuxt/src/core/runtime/nitro/renderer.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts index 46077c56f06f..5fb732d0abcb 100644 --- a/packages/nuxt/src/core/runtime/nitro/renderer.ts +++ b/packages/nuxt/src/core/runtime/nitro/renderer.ts @@ -392,10 +392,15 @@ export default defineRenderHandler(async (event): Promise for CSS files + // - in production + // - in dev mode when not rendering an island + // - in dev mode when rendering an island and the file has scoped styles and is not a page if (!import.meta.dev || !isRenderingIsland || (resource.file.includes('scoped') && !resource.file.includes('pages/'))) { - // support for the ?inline query parameter for Vite version > 5.0 - if (import.meta.dev && 'inline' in getURLQuery(resource.file)) continue - link.push({ rel: 'stylesheet', href: renderer.rendererContext.buildAssetsURL(resource.file) }) } } From f434d7b85596416e92c95d64f4ce5936c7ee9b4d Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Fri, 16 Feb 2024 12:14:04 +0000 Subject: [PATCH 6/6] test: add basic test case --- test/basic.test.ts | 9 +++++++++ test/fixtures/basic/assets/inline-only.css | 3 +++ test/fixtures/basic/pages/inline-only-css.vue | 8 ++++++++ 3 files changed, 20 insertions(+) create mode 100644 test/fixtures/basic/assets/inline-only.css create mode 100644 test/fixtures/basic/pages/inline-only-css.vue diff --git a/test/basic.test.ts b/test/basic.test.ts index 42e0b86fe017..cc044801c7df 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -1414,6 +1414,15 @@ describe('automatically keyed composables', () => { }) }) +describe.runIf(isDev() && !isWebpack)('css links', () => { + it('should not inject links to CSS files that are inlined', async () => { + const html = await $fetch('/inline-only-css') + expect(html).toContain('--inline-only') + expect(html).not.toContain('inline-only.css') + expect(html).toContain('assets/plugin.css') + }) +}) + describe.skipIf(isDev() || isWebpack)('inlining component styles', () => { const inlinedCSS = [ '{--plugin:"plugin"}', // CSS imported ambiently in JS/TS diff --git a/test/fixtures/basic/assets/inline-only.css b/test/fixtures/basic/assets/inline-only.css new file mode 100644 index 000000000000..0e377e929e3b --- /dev/null +++ b/test/fixtures/basic/assets/inline-only.css @@ -0,0 +1,3 @@ +:root { + --inline-only: 'inline-only'; +} diff --git a/test/fixtures/basic/pages/inline-only-css.vue b/test/fixtures/basic/pages/inline-only-css.vue new file mode 100644 index 000000000000..44f8a78700e3 --- /dev/null +++ b/test/fixtures/basic/pages/inline-only-css.vue @@ -0,0 +1,8 @@ + + + +