preserve old client-side behavior

Author: yyx990803

lib/component-normalizer.js

@@ -7,7 +7,8 @@ module.exports = function normalizeComponent (
   rawScriptExports,
   compiledTemplate,
   injectStyles,
-  scopeId
+  scopeId,
+  isServer
 ) {
   var esModule
   var scriptExports = rawScriptExports = rawScriptExports || {}
@@ -35,24 +36,38 @@ module.exports = function normalizeComponent (
     options._scopeId = scopeId
   }
 
-  var existing = options.beforeCreate
-  var registerComponent = function (context) {
-    if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-      context = __VUE_SSR_CONTEXT__
+  var hook
+  if (isServer) {
+    hook = function (context) {
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
+      }
+      if (injectStyles) {
+        injectStyles(this, context)
+      }
+      // TODO: register module identifier for async chunk inferrence
     }
-    if (injectStyles) {
-      injectStyles(this, context)
+    // used by ssr in case component is cached and beforeCreate
+    // never gets called
+    options._ssrRegister = hook
+  } else if (injectStyles) {
+    var cssModules = injectStyles({})
+    if (cssModules) {
+      hook = function () {
+        for (var key in cssModules) {
+          this[key] = cssModules[key]
+        }
+      }
     }
   }
 
-  // inject component registration as beforeCreate hook
-  options.beforeCreate = existing
-    ? [].concat(existing, registerComponent)
-    : [registerComponent]
-
-  // used by ssr in case component is cached and beforeCreate
-  // never gets called
-  options._ssrRegister = registerComponent
+  if (hook) {
+    // inject component registration as beforeCreate hook
+    var existing = options.beforeCreate
+    options.beforeCreate = existing
+      ? [].concat(existing, hook)
+      : [hook]
+  }
 
   return {
     esModule: esModule,

lib/loader.js

@@ -282,10 +282,10 @@ module.exports = function (content) {
   var hasScoped = parts.styles.some(function (s) { return s.scoped })
 
   // add requires for styles
+  var cssModules
   if (parts.styles.length) {
     var styleInjectionCode =
-      'function __injectVueStyle__ (vm, context) {\n'
-    var cssModules = {}
+      'function injectStyle (cssModuleTarget, ssrContext) {\n'
     parts.styles.forEach(function (style, i) {
       // require style
       var requireString = style.src
@@ -297,15 +297,16 @@ module.exports = function (content) {
       // vue-style-loader exposes inject functions during SSR so they are
       // always called
       var invokeStyle = isServer && hasVueStyleLoader
-        ? code => `;(${code}).__inject__(context)`
-        : code => code
+        ? code => `  ;(${code}).__inject__(ssrContext)\n`
+        : code => `  ${code}\n`
 
       var moduleName = (style.module === true) ? '$style' : style.module
       // setCssModule
       if (moduleName) {
+        cssModules = cssModules || {}
         if (moduleName in cssModules) {
           loaderContext.emitError('CSS module name "' + moduleName + '" is not unique!')
-          styleInjectionCode += invokeStyle(requireString) + '\n'
+          styleInjectionCode += invokeStyle(requireString)
         } else {
           cssModules[moduleName] = true
 
@@ -316,12 +317,15 @@ module.exports = function (content) {
             requireString += '.locals'
           }
 
-          styleInjectionCode += invokeStyle('vm["' + moduleName + '"] = ' + requireString) + '\n'
+          styleInjectionCode += invokeStyle('cssModuleTarget["' + moduleName + '"] = ' + requireString)
         }
       } else {
-        styleInjectionCode += invokeStyle(requireString) + '\n'
+        styleInjectionCode += invokeStyle(requireString)
       }
     })
+    if (cssModules) {
+      styleInjectionCode += '  return cssModuleTarget\n'
+    }
     styleInjectionCode += '}\n'
     output += styleInjectionCode
   }
@@ -331,7 +335,8 @@ module.exports = function (content) {
   //   scriptExports,
   //   compiledTemplate,
   //   injectStyles,
-  //   scopeId
+  //   scopeId,
+  //   isServer
   // )
   output += 'var Component = require(' +
     loaderUtils.stringifyRequest(loaderContext, '!' + componentNormalizerPath) +
@@ -367,11 +372,15 @@ module.exports = function (content) {
 
   // style
   output += '  /* styles */\n  '
-  output += (parts.styles.length ? '__injectVueStyle__' : 'null') + ',\n'
+  output += (parts.styles.length ? 'injectStyle' : 'null') + ',\n'
 
   // scopeId
   output += '  /* scopeId */\n  '
-  output += (hasScoped ? JSON.stringify(moduleId) : 'null') + '\n'
+  output += (hasScoped ? JSON.stringify(moduleId) : 'null') + ',\n'
+
+  // isServer
+  output += '  /* isServer */\n  '
+  output += (isServer ? 'true' : 'false') + '\n'
 
   // close normalizeComponent call
   output += ')\n'