From c37151929ab9d9df0a8f4008e3ffe32430a6fef9 Mon Sep 17 00:00:00 2001
From: Clark Du <clark.duxin@gmail.com>
Date: Sat, 7 Apr 2018 12:22:22 +0800
Subject: [PATCH] fix(ssr): render initial and used async css chunks (#7902)

compatibility with webpack 4 + mini CSS extraction

close #7897
---
 src/server/template-renderer/index.js | 14 +++++++-------
 src/server/webpack-plugin/client.js   |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/server/template-renderer/index.js b/src/server/template-renderer/index.js
index dabc08a149c..a6a1570c6b7 100644
--- a/src/server/template-renderer/index.js
+++ b/src/server/template-renderer/index.js
@@ -108,13 +108,13 @@ export default class TemplateRenderer {
   }
 
   renderStyles (context: Object): string {
-    const cssFiles = this.clientManifest
-      ? this.clientManifest.all.filter(isCSS)
-      : []
+    const initial = this.preloadFiles || []
+    const async = this.getUsedAsyncFiles(context) || []
+    const cssFiles = initial.concat(async).filter(({ file }) => isCSS(file))
     return (
       // render links for css files
       (cssFiles.length
-        ? cssFiles.map(file => `<link rel="stylesheet" href="${this.publicPath}/${file}">`).join('')
+        ? cssFiles.map(({ file }) => `<link rel="stylesheet" href="${this.publicPath}/${file}">`).join('')
         : '') +
       // context.styles is a getter exposed by vue-style-loader which contains
       // the inline component styles collected during SSR
@@ -202,10 +202,10 @@ export default class TemplateRenderer {
 
   renderScripts (context: Object): string {
     if (this.clientManifest) {
-      const initial = this.preloadFiles
-      const async = this.getUsedAsyncFiles(context)
+      const initial = this.preloadFiles.filter(({ file }) => isJS(file))
+      const async = (this.getUsedAsyncFiles(context) || []).filter(({ file }) => isJS(file))
       const needed = [initial[0]].concat(async || [], initial.slice(1))
-      return needed.filter(({ file }) => isJS(file)).map(({ file }) => {
+      return needed.map(({ file }) => {
         return `<script src="${this.publicPath}/${file}" defer></script>`
       }).join('')
     } else {
diff --git a/src/server/webpack-plugin/client.js b/src/server/webpack-plugin/client.js
index d1acdb68d80..6f77b863b20 100644
--- a/src/server/webpack-plugin/client.js
+++ b/src/server/webpack-plugin/client.js
@@ -1,6 +1,6 @@
 const hash = require('hash-sum')
 const uniq = require('lodash.uniq')
-import { isJS } from './util'
+import { isJS, isCSS } from './util'
 
 export default class VueSSRClientPlugin {
   constructor (options = {}) {
@@ -19,10 +19,10 @@ export default class VueSSRClientPlugin {
       const initialFiles = uniq(Object.keys(stats.entrypoints)
         .map(name => stats.entrypoints[name].assets)
         .reduce((assets, all) => all.concat(assets), [])
-        .filter(isJS))
+        .filter((file) => isJS(file) || isCSS(file)))
 
       const asyncFiles = allFiles
-        .filter(isJS)
+        .filter((file) => isJS(file) || isCSS(file))
         .filter(file => initialFiles.indexOf(file) < 0)
 
       const manifest = {