fix(webpack): include css/assets at top level of manifest (#36)

Author: danielroe

src/webpack.ts

@@ -101,6 +101,12 @@ export function normalizeWebpackManifest (manifest: WebpackClientManifest): Mani
       css: mappedIndexes.filter(isCSS),
       assets: mappedIndexes.filter(i => !isJS(i) && !isCSS(i))
     }
+
+    for (const key of ['css', 'assets'] as const) {
+      for (const file of clientManifest[moduleId as Identifier][key] || []) {
+        clientManifest[file] = clientManifest[file] || { file, ...parseResource(file) }
+      }
+    }
   }
 
   return clientManifest

test/compat.test.ts

@@ -79,7 +79,7 @@ describe('renderer with webpack manifest', () => {
   it('renders styles correctly', async () => {
     const { renderStyles } = await getRenderer()
     expect(renderStyles()).to.equal(
-      '<link rel="stylesheet" href="/_nuxt/app.css">'
+      '<link rel="stylesheet" href="/_nuxt/app.css"><link rel="stylesheet" href="/_nuxt/some.css">'
     )
   })
   it('renders resource hints correctly', async () => {
@@ -88,12 +88,14 @@ describe('renderer with webpack manifest', () => {
     expect(result).to.deep.equal(
       [
         '<link rel="prefetch stylesheet" href="/_nuxt/pages/another.css">', // dynamic import CSS
+        '<link rel="prefetch" as="image" type="image/svg+xml" href="/_nuxt/img/logo.41f2f89.svg">',
         '<link rel="prefetch" as="script" href="/_nuxt/pages/another.js">', // dynamic import
         '<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="style" href="/_nuxt/app.css">' // css used directly on the page
+        '<link rel="preload" as="style" href="/_nuxt/app.css">', // css used directly on the page
+        '<link rel="preload" as="style" href="/_nuxt/some.css">'
       ]
     )
   })

test/fixtures/webpack-manifest.json

@@ -10,7 +10,9 @@
     "pages/another.css",
     "pages/another.js",
     "pages/index.js",
-    "runtime.js"
+    "runtime.js",
+    "img/logo.41f2f89.svg",
+    "some.css"
   ],
   "initial": [
     "runtime.js",
@@ -24,8 +26,8 @@
     "pages/index.js"
   ],
   "modules": {
-    "4d87aad8": [3,4],
-    "630f1d84": [3,4],
-    "56940b2e": [8]
+    "4d87aad8": [3, 4],
+    "630f1d84": [3, 4],
+    "56940b2e": [8, 10, 11]
   }
 }

test/manifest.test.ts

@@ -19,8 +19,12 @@ describe('webpack manifest', () => {
       },
       '56940b2e': {
         file: '',
-        assets: [],
-        css: [],
+        assets: [
+          'img/logo.41f2f89.svg'
+        ],
+        css: [
+          'some.css'
+        ],
         imports: [
           '_pages/index.js'
         ]
@@ -85,9 +89,18 @@ describe('webpack manifest', () => {
         resourceType: 'style',
         file: 'app.css'
       },
+      'img/logo.41f2f89.svg': {
+        file: 'img/logo.41f2f89.svg',
+        mimeType: 'image/svg+xml',
+        resourceType: 'image'
+      },
       'pages/another.css': {
         resourceType: 'style',
         file: 'pages/another.css'
+      },
+      'some.css': {
+        file: 'some.css',
+        resourceType: 'style'
       }
     })
   })