fix(ssr): render initial and used async css chunks (#7902)

compatibility with webpack 4 + mini CSS extraction

close #7897

Author: clarkdo

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 {

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 = {