fix: preload stylesheets used on the page (#35)

Author: danielroe

src/runtime.ts

@@ -170,13 +170,6 @@ export function getAllDependencies (ids: Set<string>, rendererContext: RendererC
     }
   }
 
-  // Don't render preload links if we're adding them as stylesheets
-  for (const id in allDeps.styles) {
-    if (id in allDeps.preload) {
-      delete allDeps.preload[id]
-    }
-  }
-
   rendererContext._dependencySets[cacheKey] = allDeps
   return allDeps
 }

test/compat.test.ts

@@ -41,7 +41,9 @@ describe('renderer with vite manifest', () => {
         '<link rel="modulepreload" as="script" crossorigin href="/entry.mjs">',
         '<link rel="modulepreload" as="script" crossorigin href="/index.mjs">',
         '<link rel="modulepreload" as="script" crossorigin href="/vendor.mjs">',
-        '<link rel="prefetch" as="image" type="image/png" href="/entry.png">'
+        '<link rel="prefetch" as="image" type="image/png" href="/entry.png">',
+        '<link rel="preload" as="style" href="/index.css">',
+        '<link rel="preload" as="style" href="/test.css">'
       ]
     )
   })
@@ -90,7 +92,8 @@ describe('renderer with webpack manifest', () => {
         '<link rel="preload" as="script" href="/_nuxt/app.js">',
         '<link rel="preload" as="script" href="/_nuxt/commons/app.js">',
         '<link rel="preload" as="script" href="/_nuxt/pages/index.js">', // dynamic entrypoint
-        '<link rel="preload" as="script" href="/_nuxt/runtime.js">'
+        '<link rel="preload" as="script" href="/_nuxt/runtime.js">',
+        '<link rel="preload" as="style" href="/_nuxt/app.css">' // css used directly on the page
       ]
     )
   })

test/dependencies.test.ts

@@ -26,6 +26,7 @@ describe('dependencies', () => {
     expect(Object.values(preload).map(i => i.file)).toMatchInlineSnapshot(`
       [
         "entry.mjs",
+        "test.css",
         "vendor.mjs",
       ]
     `)
@@ -58,8 +59,10 @@ describe('dependencies', () => {
     expect(Object.values(preload).map(i => i.file)).toMatchInlineSnapshot(`
       [
         "entry.mjs",
+        "test.css",
         "vendor.mjs",
         "about.mjs",
+        "about.css",
       ]
     `)
     expect(Object.values(scripts).map(i => i.file)).toMatchInlineSnapshot(`

test/renderer.test.ts

@@ -54,6 +54,8 @@ describe('renderer', () => {
         "<link rel=\\"modulepreload\\" as=\\"script\\" crossorigin href=\\"/assets/index.mjs\\">",
         "<link rel=\\"modulepreload\\" as=\\"script\\" crossorigin href=\\"/assets/vendor.mjs\\">",
         "<link rel=\\"prefetch\\" as=\\"image\\" type=\\"image/png\\" href=\\"/assets/entry.png\\">",
+        "<link rel=\\"preload\\" as=\\"style\\" href=\\"/assets/index.css\\">",
+        "<link rel=\\"preload\\" as=\\"style\\" href=\\"/assets/test.css\\">",
       ]
     `)
   })
@@ -63,7 +65,7 @@ describe('renderer', () => {
     const result = renderResourceHeaders()
     expect(result).toMatchInlineSnapshot(`
       {
-        "link": "</assets/entry.mjs>; rel=\\"modulepreload\\"; as=\\"script\\"; crossorigin, </assets/vendor.mjs>; rel=\\"modulepreload\\"; as=\\"script\\"; crossorigin, </assets/index.mjs>; rel=\\"modulepreload\\"; as=\\"script\\"; crossorigin, </assets/entry.png>; rel=\\"prefetch\\"; as=\\"image\\"; type=\\"image/png\\"",
+        "link": "</assets/entry.mjs>; rel=\\"modulepreload\\"; as=\\"script\\"; crossorigin, </assets/test.css>; rel=\\"preload\\"; as=\\"style\\", </assets/vendor.mjs>; rel=\\"modulepreload\\"; as=\\"script\\"; crossorigin, </assets/index.mjs>; rel=\\"modulepreload\\"; as=\\"script\\"; crossorigin, </assets/index.css>; rel=\\"preload\\"; as=\\"style\\", </assets/entry.png>; rel=\\"prefetch\\"; as=\\"image\\"; type=\\"image/png\\"",
       }
     `)
   })
@@ -83,6 +85,8 @@ describe('renderer', () => {
         "<link rel=\\"prefetch\\" as=\\"image\\" type=\\"image/png\\" href=\\"/assets/entry.png\\">",
         "<link rel=\\"prefetch\\" as=\\"script\\" crossorigin href=\\"/assets/index.mjs\\">",
         "<link rel=\\"prefetch\\" as=\\"script\\" crossorigin href=\\"/assets/lazy-component.mjs\\">",
+        "<link rel=\\"preload\\" as=\\"style\\" href=\\"/assets/about.css\\">",
+        "<link rel=\\"preload\\" as=\\"style\\" href=\\"/assets/test.css\\">",
       ]
     `)
   })
@@ -110,6 +114,9 @@ describe('renderer', () => {
         "<link rel=\\"prefetch\\" as=\\"image\\" type=\\"image/x-icon\\" href=\\"/assets/lazy-component.ico\\">",
         "<link rel=\\"prefetch\\" as=\\"script\\" crossorigin href=\\"/assets/index.mjs\\">",
         "<link rel=\\"prefetch\\" as=\\"video\\" href=\\"/assets/lazy-component.mp4\\">",
+        "<link rel=\\"preload\\" as=\\"style\\" href=\\"/assets/about.css\\">",
+        "<link rel=\\"preload\\" as=\\"style\\" href=\\"/assets/lazy-component.css\\">",
+        "<link rel=\\"preload\\" as=\\"style\\" href=\\"/assets/test.css\\">",
       ]
     `)
   })