Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(nuxt): in dev mode, don't add links to css files that have been inlined #25822

Merged
merged 7 commits into from
Feb 16, 2024
Merged

fix(nuxt): in dev mode, don't add links to css files that have been inlined #25822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e267109
fix(nuxt): support for the ?inline query parameter for Vite version >…
OnlyWick Feb 16, 2024
968d288
Update packages/nuxt/src/core/runtime/nitro/renderer.ts
OnlyWick Feb 16, 2024
5a23380
Update packages/nuxt/src/core/runtime/nitro/renderer.ts
OnlyWick Feb 16, 2024
231e1dc
fix: use `getQuery` from `ufo`
danielroe Feb 16, 2024
bf00f33
docs: add some comments
danielroe Feb 16, 2024
f434d7b
test: add basic test case
danielroe Feb 16, 2024
852c715
Merge branch 'main' into fix-#24932
OnlyWick Feb 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 9 additions & 1 deletion packages/nuxt/src/core/runtime/nitro/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -392,6 +392,14 @@ export default defineRenderHandler(async (event): Promise<Partial<RenderResponse
const link = []
for (const style in styles) {
const resource = styles[style]
// Do not add links to resources that are inlined (vite v5+)
if (import.meta.dev && 'inline' in getURLQuery(resource.file)) {
continue
}
// Add CSS links in <head> 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/'))) {
link.push({ rel: 'stylesheet', href: renderer.rendererContext.buildAssetsURL(resource.file) })
}
Expand Down
9 changes: 9 additions & 0 deletions test/basic.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 3 additions & 0 deletions test/fixtures/basic/assets/inline-only.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
:root {
--inline-only: 'inline-only';
}
8 changes: 8 additions & 0 deletions test/fixtures/basic/pages/inline-only-css.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<script setup lang="ts">
import css from '~/assets/inline-only.css?inline'
</script>

<template>
<pre>{{ css }}</pre>
</template>