improve css modules hot-reload

Author: yyx990803

lib/component-normalizer.js

@@ -45,7 +45,7 @@ module.exports = function normalizeComponent (
       }
       // inject component styles
       if (injectStyles) {
-        injectStyles(this, context)
+        injectStyles.call(this, context)
       }
       // register component module identifier for async chunk inferrence
       if (context && context._registeredComponents) {
@@ -56,19 +56,7 @@ module.exports = function normalizeComponent (
     // never gets called
     options._ssrRegister = hook
   } else if (injectStyles) {
-    var injected = false // only need to inject once on the client
-    var cssModules
-    hook = function () {
-      if (!injected) {
-        injected = true
-        cssModules = injectStyles({})
-      }
-      if (cssModules) {
-        for (var key in cssModules) {
-          this[key] = cssModules[key]
-        }
-      }
-    }
+    hook = injectStyles
   }
 
   if (hook) {

lib/loader.js

@@ -278,12 +278,23 @@ module.exports = function (content) {
   var output = ''
   var parts = parse(content, fileName, this.sourceMap)
   var hasScoped = parts.styles.some(function (s) { return s.scoped })
+  var needsHotReload = (
+    !isServer &&
+    !isProduction &&
+    (parts.script || parts.template)
+  )
+
+  if (needsHotReload) {
+    output += 'var disposed = false\n'
+  }
 
   // add requires for styles
   var cssModules
   if (parts.styles.length) {
-    var styleInjectionCode =
-      'function injectStyle (cssModuleTarget, ssrContext) {\n'
+    var styleInjectionCode = 'function injectStyle (ssrContext) {\n'
+    if (needsHotReload) {
+      styleInjectionCode += `  if (disposed) return\n`
+    }
     parts.styles.forEach(function (style, i) {
       // require style
       var requireString = style.src
@@ -301,7 +312,12 @@ module.exports = function (content) {
       var moduleName = (style.module === true) ? '$style' : style.module
       // setCssModule
       if (moduleName) {
-        cssModules = cssModules || {}
+        if (!cssModules) {
+          cssModules = {}
+          if (needsHotReload) {
+            output += `var cssModules = {}\n`
+          }
+        }
         if (moduleName in cssModules) {
           loaderContext.emitError('CSS module name "' + moduleName + '" is not unique!')
           styleInjectionCode += invokeStyle(requireString)
@@ -315,15 +331,36 @@ module.exports = function (content) {
             requireString += '.locals'
           }
 
-          styleInjectionCode += invokeStyle('cssModuleTarget["' + moduleName + '"] = ' + requireString)
+          if (!needsHotReload) {
+            styleInjectionCode += invokeStyle('this["' + moduleName + '"] = ' + requireString)
+          } else {
+            // handle hot reload for CSS modules.
+            // we store the exported locals in an object and proxy to it by
+            // defining getters inside component instances' lifecycle hook.
+            styleInjectionCode +=
+              invokeStyle(`cssModules["${moduleName}"] = ${requireString}`) +
+              `Object.defineProperty(this, "${moduleName}", { get: function () { return cssModules["${moduleName}"] }})\n`
+
+            var requirePath = getRequireString('styles', style, i, style.scoped)
+            output +=
+              `module.hot && module.hot.accept([${requirePath}], function () {\n` +
+              // 1. check if style has been injected
+              `  var oldLocals = cssModules["${moduleName}"]\n` +
+              `  if (!oldLocals) return\n` +
+              // 2. re-import (side effect: updates the <style>)
+              `  var newLocals = ${requireString}\n` +
+              // 3. compare new and old locals to see if selectors changed
+              `  if (JSON.stringify(newLocals) === JSON.stringify(oldLocals)) return\n` +
+              // 4. locals changed. Update and force re-render.
+              `  cssModules["${moduleName}"] = newLocals\n` +
+              `  require("${hotReloadAPIPath}").rerender("${moduleId}")\n` +
+              `})\n`
+          }
         }
       } else {
         styleInjectionCode += invokeStyle(requireString)
       }
     })
-    if (cssModules) {
-      styleInjectionCode += '  return cssModuleTarget\n'
-    }
     styleInjectionCode += '}\n'
     output += styleInjectionCode
   }
@@ -435,11 +472,7 @@ module.exports = function (content) {
 
   if (!query.inject) {
     // hot reload
-    if (
-      !isServer &&
-      !isProduction &&
-      (parts.script || parts.template)
-    ) {
+    if (needsHotReload) {
       output +=
         '\n/* hot reload */\n' +
         'if (module.hot) {(function () {\n' +
@@ -452,9 +485,21 @@ module.exports = function (content) {
         '    hotAPI.createRecord("' + moduleId + '", Component.options)\n' +
         '  } else {\n'
       // update
+      if (cssModules) {
+        output +=
+        '    if (module.hot.data.cssModules && Object.keys(module.hot.data.cssModules) !== Object.keys(cssModules)) {\n' +
+        '      delete Component.options._Ctor\n' +
+        '    }\n'
+      }
       output +=
         '    hotAPI.reload("' + moduleId + '", Component.options)\n' +
         '  }\n'
+      // dispose
+      output +=
+        '  module.hot.dispose(function (data) {\n' +
+        (cssModules ? '    data.cssModules = cssModules\n' : '') +
+        '    disposed = true\n' +
+        '  })\n'
       output += '})()}\n'
     }
     // final export