fix(css): inline css in all non-entry split chunks

fix #1356
vitejs · Jan 5, 2021 · e90ff76 · e90ff76
1 parent 3524e96
commit e90ff76
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 34 deletions.
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -214,17 +214,16 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         if (config.build.minify) {
           chunkCSS = await minifyCSS(chunkCSS, config)
         }
-        // for each dynamic entry chunk, collect its css and inline it as JS
-        // strings.
-        if (chunk.isDynamicEntry) {
+        // for non-entry chunks, collect its css and inline it as JS strings.
+        if (!chunk.isEntry) {
           const placeholder = `__VITE_CSS__`
           code =
             `let ${placeholder} = document.createElement('style');` +
             `${placeholder}.innerHTML = ${JSON.stringify(chunkCSS)};` +
             `document.head.appendChild(${placeholder});` +
             code
         } else {
-          // for normal entry chunks, emit corresponding css file
+          // for entry chunks, emit corresponding css file
           const fileHandle = this.emitFile({
             name: chunk.name + '.css',
             type: 'asset',

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
@@ -213,6 +213,41 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
     },
 
     async generateBundle(_, bundle) {
+      const getPreloadLinksForChunk = (
+        chunk: OutputChunk
+      ): HtmlTagDescriptor[] => {
+        const tags: HtmlTagDescriptor[] = chunk.imports.map((file) => ({
+          tag: 'link',
+          attrs: {
+            rel: 'modulepreload',
+            href: toPublicPath(file, config)
+          }
+        }))
+        chunk.imports.forEach((file) => {
+          tags.push(...getPreloadLinksForChunk(bundle[file] as OutputChunk))
+        })
+        return tags
+      }
+
+      const getCssTagsForChunk = (chunk: OutputChunk): HtmlTagDescriptor[] => {
+        const tags: HtmlTagDescriptor[] = []
+        const cssFileHandle = chunkToEmittedCssFileMap.get(chunk)
+        if (cssFileHandle) {
+          const file = this.getFileName(cssFileHandle)
+          tags.push({
+            tag: 'link',
+            attrs: {
+              rel: 'stylesheet',
+              href: toPublicPath(file, config)
+            }
+          })
+        }
+        chunk.imports.forEach((file) => {
+          tags.push(...getCssTagsForChunk(bundle[file] as OutputChunk))
+        })
+        return tags
+      }
+
       for (const [id, html] of processedHtml) {
         // resolve asset url references
         let result = html.replace(assetUrlRE, (_, fileId, postfix = '') => {
@@ -227,20 +262,6 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             chunk.facadeModuleId === id
         ) as OutputChunk | undefined
 
-        const getCssTagForChunk = (chunk: OutputChunk) => {
-          const cssFileHandle = chunkToEmittedCssFileMap.get(chunk)
-          if (cssFileHandle) {
-            const file = this.getFileName(cssFileHandle)
-            return {
-              tag: 'link',
-              attrs: {
-                rel: 'stylesheet',
-                href: toPublicPath(file, config)
-              }
-            }
-          }
-        }
-
         // inject chunk asset links
         if (chunk) {
           const assetTags = [
@@ -253,24 +274,10 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               }
             },
             // preload for imports
-            ...chunk.imports.map((file) => ({
-              tag: 'link',
-              attrs: {
-                rel: 'modulepreload',
-                href: toPublicPath(file, config)
-              }
-            }))
+            ...getPreloadLinksForChunk(chunk),
+            ...getCssTagsForChunk(chunk)
           ]
 
-          // inject css
-          const cssTag = getCssTagForChunk(chunk)
-          if (cssTag) assetTags.push(cssTag)
-          // also inject css from imported split chunks
-          chunk.imports.forEach((file) => {
-            const tag = getCssTagForChunk(bundle[file] as OutputChunk)
-            if (tag) assetTags.push(tag)
-          })
-
           result = injectToHead(result, assetTags)
         }