fix(nuxt): lazy-load entry CSS (#8278)

nuxt · Oct 18, 2022 · cfaa462 · cfaa462
1 parent 1c2d6e4
commit cfaa462
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 11 deletions.
diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts
@@ -10,7 +10,12 @@ import { useRuntimeConfig, useNitroApp, defineRenderHandler, getRouteRules } fro
 import type { NuxtApp, NuxtSSRContext } from '#app'
 
 // @ts-ignore
-import { buildAssetsURL } from '#paths'
+import { buildAssetsURL, publicAssetsURL } from '#paths'
+
+// @ts-ignore
+globalThis.__buildAssetsURL = buildAssetsURL
+// @ts-ignore
+globalThis.__publicAssetsURL = publicAssetsURL
 
 export interface NuxtRenderHTMLContext {
   htmlAttrs: string[]
@@ -198,7 +203,7 @@ export default defineRenderHandler(async (event) => {
   const renderedMeta = await ssrContext.renderMeta?.() ?? {}
 
   // Render inline styles
-  const inlinedStyles = process.env.NUXT_INLINE_STYLES && !(process.env.NUXT_NO_SSR || ssrContext.noSSR)
+  const inlinedStyles = process.env.NUXT_INLINE_STYLES
     ? await renderInlineStyles(ssrContext.modules ?? ssrContext._registeredComponents ?? [])
     : ''
 
@@ -284,6 +289,7 @@ function renderHTMLDocument (html: NuxtRenderHTMLContext) {
 }
 
 async function renderInlineStyles (usedModules: Set<string> | string[]) {
+  const { entryCSS } = await getClientManifest()
   const styleMap = await getSSRStyles()
   const inlinedStyles = new Set<string>()
   for (const mod of ['entry', ...usedModules]) {
@@ -293,6 +299,9 @@ async function renderInlineStyles (usedModules: Set<string> | string[]) {
       }
     }
   }
+  for (const css of entryCSS?.css || []) {
+    inlinedStyles.add(`<link rel="stylesheet" href=${JSON.stringify(buildAssetsURL(css))} media="print" onload="this.media='all'; this.onload=null;">`)
+  }
   return Array.from(inlinedStyles).join('')
 }
 

diff --git a/packages/nuxt/src/core/templates.ts b/packages/nuxt/src/core/templates.ts
@@ -240,8 +240,11 @@ export const publicPathTemplate: NuxtTemplate = {
       '  return path.length ? joinURL(publicBase, ...path) : publicBase',
       '}',
 
-      'globalThis.__buildAssetsURL = buildAssetsURL',
-      'globalThis.__publicAssetsURL = publicAssetsURL'
+      // On server these are registered directly in packages/nuxt/src/core/runtime/nitro/renderer.ts
+      'if (process.client) {',
+      '  globalThis.__buildAssetsURL = buildAssetsURL',
+      '  globalThis.__publicAssetsURL = publicAssetsURL',
+      '}'
     ].filter(Boolean).join('\n')
   }
 }

diff --git a/packages/vite/src/server.ts b/packages/vite/src/server.ts
@@ -129,13 +129,13 @@ export async function buildServer (ctx: ViteBuildContext) {
         }
         // Add entry CSS as prefetch (non-blocking)
         if (entry.isEntry) {
-          manifest[key + '-css'] = {
+          manifest.entryCSS = {
             file: '',
             css: entry.css
           }
           entry.css = []
           entry.dynamicImports = entry.dynamicImports || []
-          entry.dynamicImports.push(key + '-css')
+          entry.dynamicImports.push('entryCSS')
         }
       }
     })

diff --git a/test/basic.test.ts b/test/basic.test.ts
@@ -616,8 +616,7 @@ describe.skipIf(process.env.NUXT_TEST_DEV || process.env.TEST_WITH_WEBPACK)('inl
       `)
   })
 
-  // TODO: fix this in style inlining implementation: https://github.com/nuxt/framework/pull/8265#issuecomment-1282148407
-  it.skip('still downloads client-only styles', async () => {
+  it('still downloads client-only styles', async () => {
     const page = await createPage('/styles')
     await page.waitForLoadState('networkidle')
     expect(await page.$eval('.client-only-css', e => getComputedStyle(e).color)).toBe('rgb(50, 50, 50)')

diff --git a/test/fixtures/basic/extends/node_modules/foo/server/api/foo.ts b/test/fixtures/basic/extends/node_modules/foo/server/api/foo.ts
diff --git a/test/fixtures/basic/extends/node_modules/foo/server/middleware/foo.ts b/test/fixtures/basic/extends/node_modules/foo/server/middleware/foo.ts