Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(nuxt): in dev, don't link `css` files with `?inline` query (#25822)

This commit is contained in:
OnlyWick 2024-02-17 01:04:37 +08:00 committed by GitHub
parent 06352e350d
commit e817655c14
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/nuxt/src/core/runtime/nitro/renderer.ts
View File

@ -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'
@ -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) })
}

9
test/basic.test.ts
View File

@ -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

3
test/fixtures/basic/assets/inline-only.css vendored Normal file
View File

@ -0,0 +1,3 @@
:root {
--inline-only: 'inline-only';
}

8
test/fixtures/basic/pages/inline-only-css.vue vendored Normal file
View File

@ -0,0 +1,8 @@
<script setup lang="ts">
import css from '~/assets/inline-only.css?inline'
</script>
<template>
<pre>{{ css }}</pre>
</template>