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

nuxt · Feb 16, 2024 · e817655 · e817655
1 parent 06352e3
commit e817655
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 1 deletion.
diff --git 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'
@@ -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) })
       }

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