From 11201f4882d5b0ca32a326dee238f1ded72f8817 Mon Sep 17 00:00:00 2001
From: Victor Zakharenko <ponymtb@gmail.com>
Date: Thu, 3 Nov 2016 16:24:26 +0300
Subject: [PATCH 1/2] computed hash classNames at front and back sides

---
 lib/loader.js | 73 +++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 62 insertions(+), 11 deletions(-)

diff --git a/lib/loader.js b/lib/loader.js
index f2a61c005..c60c28f1b 100644
--- a/lib/loader.js
+++ b/lib/loader.js
@@ -77,7 +77,7 @@ module.exports = function (content) {
       // disable all configuration loaders
       '!!' +
       // get loader string for pre-processors
-      getLoaderString(type, part, scoped) +
+      getLoaderString(type, part, index, scoped) +
       // select the corresponding part from the vue file
       getSelectorString(type, index || 0) +
       // the url to the actual vuefile
@@ -94,17 +94,41 @@ module.exports = function (content) {
   function getRequireForImportString (type, impt, scoped) {
     return loaderUtils.stringifyRequest(loaderContext,
       '!!' +
-      getLoaderString(type, impt, scoped) +
+      getLoaderString(type, impt, -1, scoped) +
       impt.src
     )
   }
 
-  function getLoaderString (type, part, scoped) {
+  function addCssModulesToLoader (loader, part, index) {
+    if (!part.module) return loader
+    return loader.replace(/((?:^|!)css(?:-loader)?)(\?[^!]*)?/, function (m, $1, $2) {
+      // $1: !css-loader
+      // $2: ?a=b
+      var query = loaderUtils.parseQuery($2)
+      query.modules = true
+      query.importLoaders = true
+      query.localIdentName = query.localIdentName || '[hash:base64:7]'
+      if (index !== -1) {
+        // Note:
+        //   Class name is generated according to its filename.
+        //   Different <style> tags in the same .vue file may generate same names.
+        //   Append `_[index]` to class name to avoid this.
+        query.localIdentName += '_' + index
+      }
+      return $1 + '?' + JSON.stringify(query)
+    })
+  }
+
+  function getLoaderString (type, part, index, scoped) {
     var lang = part.lang || defaultLang[type]
     var loader = loaders[lang]
-    var rewriter = type === 'styles' ? styleRewriter + (scoped ? '&scoped=true!' : '!') : ''
+    var isStyles = type === 'styles'
+    var rewriter = isStyles ? styleRewriter + (scoped ? '&scoped=true!' : '!') : ''
     var injectString = (type === 'script' && query.inject) ? 'inject!' : ''
     if (loader !== undefined) {
+      if (isStyles) {
+        loader = addCssModulesToLoader(loader, part, index)
+      }
       // inject rewriter before css/html loader for
       // extractTextPlugin use cases
       if (rewriterInjectRE.test(loader)) {
@@ -121,7 +145,7 @@ module.exports = function (content) {
         case 'template':
           return defaultLoaders.html + '!' + templateLoaderPath + '?raw&engine=' + lang + '!'
         case 'styles':
-          return defaultLoaders.css + '!' + rewriter + lang + '!'
+          return addCssModulesToLoader(defaultLoaders.css, part, index) + '!' + rewriter + lang + '!'
         case 'script':
           return injectString + lang + '!'
       }
@@ -144,15 +168,31 @@ module.exports = function (content) {
 
   var parts = parse(content, fileName, this.sourceMap)
   var hasScoped = parts.styles.some(function (s) { return s.scoped })
-  var output = 'var __vue_exports__, __vue_options__\n'
+  var hasModules = parts.styles.some(function (s) { return s.module })
+  var output = 'var __vue_exports__, __vue_options__'
+
+  output += hasModules ? ', __vue_cssmodules__ = {}\n' : '\n'
 
   // add requires for styles
-  if (!isServer && parts.styles.length) {
-    output += '\n/* styles */\n'
+  var styles = parts.styles
+  if ((!isServer || hasModules) && styles.length) {
+    output += '/* styles */\n'
+
     parts.styles.forEach(function (style, i) {
-      output += style.src
-        ? getRequireForImport('styles', style, style.scoped)
-        : getRequire('styles', style, i, style.scoped)
+      var module = style.module
+
+      if(!isServer || module) {
+        var requireString = style.src
+          ? getRequireForImport('styles', style, style.scoped)
+          : getRequire('styles', style, i, style.scoped)
+
+        if (module) {
+          var name = module === true ? 'style' : module
+          output += '__vue_cssmodules__["' + name + '"] = ' + requireString + '\n'
+        } else {
+          output += requireString
+        }
+      }
     })
   }
 
@@ -205,6 +245,17 @@ module.exports = function (content) {
     exports += '__vue_options__._scopeId = "' + moduleId + '"\n'
   }
 
+  // define css modules
+  if (hasModules) {
+    // inject style modules as computed properties
+    exports +=
+      'if (!__vue_options__.computed) __vue_options__.computed = {}\n' +
+      'Object.keys(__vue_cssmodules__).forEach(function (key) {\n' +
+        'var module = __vue_cssmodules__[key]\n' +
+        '__vue_options__.computed[key] = function () { return module }\n' +
+      '})\n'
+  }
+
   if (!query.inject) {
     output += exports
     // hot reload

From 7bdc6c1bf0654cc65d2a8aa96d0af61f905febca Mon Sep 17 00:00:00 2001
From: Victor Zakharenko <ponymtb@gmail.com>
Date: Thu, 3 Nov 2016 16:55:01 +0300
Subject: [PATCH 2/2] fix code style "space after if"

---
 lib/loader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/loader.js b/lib/loader.js
index c60c28f1b..89de68cb0 100644
--- a/lib/loader.js
+++ b/lib/loader.js
@@ -181,7 +181,7 @@ module.exports = function (content) {
     parts.styles.forEach(function (style, i) {
       var module = style.module
 
-      if(!isServer || module) {
+      if (!isServer || module) {
         var requireString = style.src
           ? getRequireForImport('styles', style, style.scoped)
           : getRequire('styles', style, i, style.scoped)