From 21c95113dd4c34198ae7fdbfd019e5f8fb46460a Mon Sep 17 00:00:00 2001
From: YiSiWang <597222964@qq.com>
Date: Wed, 12 Oct 2016 17:13:25 +0800
Subject: [PATCH 1/6] add test

---
 test/fixtures/css-modules.vue | 20 ++++++++++++++++++++
 test/test.js                  | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 test/fixtures/css-modules.vue

diff --git a/test/fixtures/css-modules.vue b/test/fixtures/css-modules.vue
new file mode 100644
index 000000000..8646cb868
--- /dev/null
+++ b/test/fixtures/css-modules.vue
@@ -0,0 +1,20 @@
+<style module="style">
+.red {
+  color: red;
+}
+@keyframes fade {
+  from { opacity: 1; } to { opacity: 0; }
+}
+.animate {
+  animation: fade 1s;
+}
+</style>
+
+<style scoped lang="stylus" module>
+.red
+  color: red
+</style>
+
+<script>
+module.exports = {}
+</script>
diff --git a/test/test.js b/test/test.js
index c7327255f..3f546dff9 100644
--- a/test/test.js
+++ b/test/test.js
@@ -377,4 +377,37 @@ describe('vue-loader', function () {
       done()
     })
   })
+
+  it('css-modules', function (done) {
+    test({
+      entry: './test/fixtures/css-modules.vue'
+    }, function (window) {
+      var module = window.vueModule
+
+      // get local class name
+      var className = module.computed.style().red
+      expect(className).to.match(/^_/)
+
+      // class name in style
+      var style = [].slice.call(window.document.querySelectorAll('style')).map(function (style) {
+        return style.textContent
+      }).join('\n')
+      expect(style).to.contain('.' + className + ' {\n  color: red;\n}')
+
+      // animation name
+      var match = style.match(/@keyframes\s+(\S+)\s+{/)
+      expect(match).to.have.length(2)
+      var animationName = match[1]
+      expect(animationName).to.not.equal('fade')
+      expect(style).to.contain('animation: ' + animationName + ' 1s;')
+
+      // default module + pre-processor + scoped
+      var anotherClassName = module.computed.$style().red
+      expect(anotherClassName).to.match(/^_/).and.not.equal(className)
+      var id = '_v-' + hash(require.resolve('./fixtures/css-modules.vue'))
+      expect(style).to.contain('.' + anotherClassName + '[' + id + ']')
+
+      done()
+    })
+  })
 })

From e388186c571e5016e9386eb245e20910427a57a3 Mon Sep 17 00:00:00 2001
From: YiSiWang <597222964@qq.com>
Date: Wed, 19 Oct 2016 17:58:07 +0800
Subject: [PATCH 2/6] add css module support with parser hack

---
 lib/loader.js | 63 +++++++++++++++++++++++++++++++++++++++++++++++----
 test/test.js  |  5 ++--
 2 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/lib/loader.js b/lib/loader.js
index f2a61c005..8d66c42ab 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 option = loaderUtils.parseQuery($2)
+      option.modules = true
+      option.importLoaders = true
+      option.localIdentName = '[hash:base64]'
+      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.
+        option.localIdentName += '_' + index
+      }
+      return $1 + '?' + JSON.stringify(option)
+    })
+  }
+
+  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 injectString = (type === 'script' && query.inject) ? 'inject!' : ''
     if (loader !== undefined) {
+      // add css modules
+      if (type === 'styles') {
+        loader = addCssModulesToLoader(loader, part, index)
+      }
       // inject rewriter before css/html loader for
       // extractTextPlugin use cases
       if (rewriterInjectRE.test(loader)) {
@@ -121,7 +145,8 @@ module.exports = function (content) {
         case 'template':
           return defaultLoaders.html + '!' + templateLoaderPath + '?raw&engine=' + lang + '!'
         case 'styles':
-          return defaultLoaders.css + '!' + rewriter + lang + '!'
+          loader = addCssModulesToLoader(defaultLoaders.css, part, index)
+          return loader + '!' + rewriter + lang + '!'
         case 'script':
           return injectString + lang + '!'
       }
@@ -146,13 +171,31 @@ module.exports = function (content) {
   var hasScoped = parts.styles.some(function (s) { return s.scoped })
   var output = 'var __vue_exports__, __vue_options__\n'
 
+  // css modules
+  output += 'var __vue_styles__ = {}\n'
+  var cssModules = {}
+
   // add requires for styles
   if (!isServer && parts.styles.length) {
     output += '\n/* styles */\n'
     parts.styles.forEach(function (style, i) {
-      output += style.src
+      /* !HACK! */
+      style.module = i === 0 ? 'style' : '$style'
+      var requireString = style.src
         ? getRequireForImport('styles', style, style.scoped)
         : getRequire('styles', style, i, style.scoped)
+      // setCssModule
+      if (style.module) {
+        if (style.module in cssModules) {
+          loaderContext.emitError('CSS module name "' + style.module + '" is not unique!')
+          output += requireString
+        } else {
+          cssModules[style.module] = true
+          output += '__vue_styles__["' + style.module + '"] = ' + requireString + '\n'
+        }
+      } else {
+        output += requireString
+      }
     })
   }
 
@@ -205,6 +248,16 @@ module.exports = function (content) {
     exports += '__vue_options__._scopeId = "' + moduleId + '"\n'
   }
 
+  if (Object.keys(cssModules).length) {
+    // inject style modules as computed properties
+    exports +=
+      'if (!__vue_options__.computed) __vue_options__.computed = {}\n' +
+      'Object.keys(__vue_styles__).forEach(function (key) {\n' +
+        'var module = __vue_styles__[key]\n' +
+        '__vue_options__.computed[key] = function () { return module }\n' +
+      '})\n'
+  }
+
   if (!query.inject) {
     output += exports
     // hot reload
diff --git a/test/test.js b/test/test.js
index 3f546dff9..2a58cf5b2 100644
--- a/test/test.js
+++ b/test/test.js
@@ -40,6 +40,7 @@ function bundle (options, cb) {
       })
     }
     expect(stats.compilation.errors).to.be.empty
+    require('fs').writeFileSync('./test.build.js', mfs.readFileSync('/test.build.js').toString())
     cb(mfs.readFileSync('/test.build.js').toString())
   })
 }
@@ -378,7 +379,7 @@ describe('vue-loader', function () {
     })
   })
 
-  it('css-modules', function (done) {
+  it.only('css-modules', function (done) {
     test({
       entry: './test/fixtures/css-modules.vue'
     }, function (window) {
@@ -404,7 +405,7 @@ describe('vue-loader', function () {
       // default module + pre-processor + scoped
       var anotherClassName = module.computed.$style().red
       expect(anotherClassName).to.match(/^_/).and.not.equal(className)
-      var id = '_v-' + hash(require.resolve('./fixtures/css-modules.vue'))
+      var id = 'data-v-' + genId(require.resolve('./fixtures/css-modules.vue'))
       expect(style).to.contain('.' + anotherClassName + '[' + id + ']')
 
       done()

From e98edb22b81deb8b9657f3e727c268004f5bf575 Mon Sep 17 00:00:00 2001
From: YiSiWang <597222964@qq.com>
Date: Thu, 3 Nov 2016 11:20:17 +0800
Subject: [PATCH 3/6] add localIdentName support

---
 lib/loader.js | 13 +++++----
 test/test.js  | 76 +++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/lib/loader.js b/lib/loader.js
index 8d66c42ab..111d49fd8 100644
--- a/lib/loader.js
+++ b/lib/loader.js
@@ -101,21 +101,22 @@ module.exports = function (content) {
 
   function addCssModulesToLoader (loader, part, index) {
     if (!part.module) return loader
+    var option = options.cssModules || {}
     return loader.replace(/((?:^|!)css(?:-loader)?)(\?[^!]*)?/, function (m, $1, $2) {
       // $1: !css-loader
       // $2: ?a=b
-      var option = loaderUtils.parseQuery($2)
-      option.modules = true
-      option.importLoaders = true
-      option.localIdentName = '[hash:base64]'
+      var query = loaderUtils.parseQuery($2)
+      query.modules = true
+      query.importLoaders = true
+      query.localIdentName = option.localIdentName || '[hash:base64]'
       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.
-        option.localIdentName += '_' + index
+        query.localIdentName += '_' + index
       }
-      return $1 + '?' + JSON.stringify(option)
+      return $1 + '?' + JSON.stringify(query)
     })
   }
 
diff --git a/test/test.js b/test/test.js
index 2a58cf5b2..5223ee192 100644
--- a/test/test.js
+++ b/test/test.js
@@ -379,34 +379,68 @@ describe('vue-loader', function () {
     })
   })
 
-  it.only('css-modules', function (done) {
+  it('css-modules', function (done) {
+    function testWithIdent (localIdentName, regexToMatch, cb) {
+      test({
+        entry: './test/fixtures/css-modules.vue',
+        vue: {
+          cssModules: {
+            localIdentName: localIdentName
+          }
+        }
+      }, function (window) {
+        var module = window.vueModule
+
+        // get local class name
+        var className = module.computed.style().red
+        expect(className).to.match(regexToMatch)
+
+        // class name in style
+        var style = [].slice.call(window.document.querySelectorAll('style')).map(function (style) {
+          return style.textContent
+        }).join('\n')
+        expect(style).to.contain('.' + className + ' {\n  color: red;\n}')
+
+        // animation name
+        var match = style.match(/@keyframes\s+(\S+)\s+{/)
+        expect(match).to.have.length(2)
+        var animationName = match[1]
+        expect(animationName).to.not.equal('fade')
+        expect(style).to.contain('animation: ' + animationName + ' 1s;')
+
+        // default module + pre-processor + scoped
+        var anotherClassName = module.computed.$style().red
+        expect(anotherClassName).to.match(regexToMatch).and.not.equal(className)
+        var id = 'data-v-' + genId(require.resolve('./fixtures/css-modules.vue'))
+        expect(style).to.contain('.' + anotherClassName + '[' + id + ']')
+
+        cb()
+      })
+    }
+    // default localIdentName
+    testWithIdent(undefined, /^_\w{22}/, function () {
+      // specified localIdentName
+      var ident = '[path][name]---[local]---[hash:base64:5]'
+      var regex = /^test-fixtures-css-modules---red---\w{5}/
+      testWithIdent(ident, regex, done)
+    })
+  })
+
+  it.only('css-modules in SSR', function (done) {
     test({
-      entry: './test/fixtures/css-modules.vue'
+      entry: './test/fixtures/css-modules.vue',
+      vue: {
+        target: 'node'
+      }
     }, function (window) {
       var module = window.vueModule
 
-      // get local class name
+      // class name
       var className = module.computed.style().red
       expect(className).to.match(/^_/)
 
-      // class name in style
-      var style = [].slice.call(window.document.querySelectorAll('style')).map(function (style) {
-        return style.textContent
-      }).join('\n')
-      expect(style).to.contain('.' + className + ' {\n  color: red;\n}')
-
-      // animation name
-      var match = style.match(/@keyframes\s+(\S+)\s+{/)
-      expect(match).to.have.length(2)
-      var animationName = match[1]
-      expect(animationName).to.not.equal('fade')
-      expect(style).to.contain('animation: ' + animationName + ' 1s;')
-
-      // default module + pre-processor + scoped
-      var anotherClassName = module.computed.$style().red
-      expect(anotherClassName).to.match(/^_/).and.not.equal(className)
-      var id = 'data-v-' + genId(require.resolve('./fixtures/css-modules.vue'))
-      expect(style).to.contain('.' + anotherClassName + '[' + id + ']')
+      // no css
+      expect(window.document.querySelector('style')).to.not.exist()
 
       done()
     })

From 6659b040aad1fdeb9de1291879365f526e607840 Mon Sep 17 00:00:00 2001
From: YiSiWang <yisi.wang@ele.me>
Date: Fri, 4 Nov 2016 16:16:20 +0800
Subject: [PATCH 4/6] add SSR support with test case

---
 lib/loader.js | 16 ++++++++++++++--
 test/test.js  | 26 ++++++++++++++------------
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/lib/loader.js b/lib/loader.js
index 111d49fd8..8df00f2b0 100644
--- a/lib/loader.js
+++ b/lib/loader.js
@@ -58,7 +58,7 @@ module.exports = function (content) {
   var bubleOptions = hasBuble && options.buble ? '?' + JSON.stringify(options.buble) : ''
   var defaultLoaders = {
     html: templateCompilerPath + '?id=' + moduleId,
-    css: styleLoaderPath + '!css-loader' + (needCssSourceMap ? '?sourceMap' : ''),
+    css: (isServer ? '' : styleLoaderPath + '!') + 'css-loader' + (needCssSourceMap ? '?sourceMap' : ''),
     js: hasBuble ? ('buble-loader' + bubleOptions) : hasBabel ? 'babel-loader' : ''
   }
 
@@ -177,14 +177,18 @@ module.exports = function (content) {
   var cssModules = {}
 
   // add requires for styles
-  if (!isServer && parts.styles.length) {
+  if (parts.styles.length) {
     output += '\n/* styles */\n'
     parts.styles.forEach(function (style, i) {
       /* !HACK! */
       style.module = i === 0 ? 'style' : '$style'
+
+      // require style
+      if (isServer && !style.module) return
       var requireString = style.src
         ? getRequireForImport('styles', style, style.scoped)
         : getRequire('styles', style, i, style.scoped)
+
       // setCssModule
       if (style.module) {
         if (style.module in cssModules) {
@@ -192,6 +196,14 @@ module.exports = function (content) {
           output += requireString
         } else {
           cssModules[style.module] = true
+
+          // `style-loader` exposes the name-to-hash map directly
+          // `css-loader` exposes it in `.locals`
+          // We drop `style-loader` in SSR, and add `.locals` here.
+          if (isServer) {
+            requireString += '.locals'
+          }
+
           output += '__vue_styles__["' + style.module + '"] = ' + requireString + '\n'
         }
       } else {
diff --git a/test/test.js b/test/test.js
index 5223ee192..5cdbe9a3d 100644
--- a/test/test.js
+++ b/test/test.js
@@ -427,21 +427,23 @@ describe('vue-loader', function () {
   })
 
   it.only('css-modules in SSR', function (done) {
-    test({
+    bundle({
       entry: './test/fixtures/css-modules.vue',
-      vue: {
-        target: 'node'
+      target: 'node',
+      output: Object.assign({}, globalConfig.output, {
+        libraryTarget: 'commonjs2'
+      })
+    }, function (code) {
+      // http://stackoverflow.com/questions/17581830/load-node-js-module-from-string-in-memory
+      function requireFromString(src, filename) {
+        var Module = module.constructor;
+        var m = new Module();
+        m._compile(src, filename);
+        return m.exports;
       }
-    }, function (window) {
-      var module = window.vueModule
-
-      // class name
-      var className = module.computed.style().red
-      expect(className).to.match(/^_/)
-
-      // no css
-      expect(window.document.querySelector('style')).to.not.exist()
 
+      var output = requireFromString(code, './test.build.js')
+      expect(output.computed.style().red).to.match(/^_/)
       done()
     })
   })

From 0916675f28c8fc75e723f24e40ff4021209531a2 Mon Sep 17 00:00:00 2001
From: YiSiWang <yisi.wang@ele.me>
Date: Fri, 4 Nov 2016 18:03:41 +0800
Subject: [PATCH 5/6] use vue-template-compiler#dev and remove parse hack

---
 lib/loader.js | 15 +++++++--------
 package.json  |  2 +-
 test/test.js  |  6 +++---
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/lib/loader.js b/lib/loader.js
index 8df00f2b0..6588600bf 100644
--- a/lib/loader.js
+++ b/lib/loader.js
@@ -180,22 +180,21 @@ module.exports = function (content) {
   if (parts.styles.length) {
     output += '\n/* styles */\n'
     parts.styles.forEach(function (style, i) {
-      /* !HACK! */
-      style.module = i === 0 ? 'style' : '$style'
+      var moduleName = (style.module === true) ? '$style' : style.module
 
       // require style
-      if (isServer && !style.module) return
+      if (isServer && !moduleName) return
       var requireString = style.src
         ? getRequireForImport('styles', style, style.scoped)
         : getRequire('styles', style, i, style.scoped)
 
       // setCssModule
-      if (style.module) {
-        if (style.module in cssModules) {
-          loaderContext.emitError('CSS module name "' + style.module + '" is not unique!')
+      if (moduleName) {
+        if (moduleName in cssModules) {
+          loaderContext.emitError('CSS module name "' + moduleName + '" is not unique!')
           output += requireString
         } else {
-          cssModules[style.module] = true
+          cssModules[moduleName] = true
 
           // `style-loader` exposes the name-to-hash map directly
           // `css-loader` exposes it in `.locals`
@@ -204,7 +203,7 @@ module.exports = function (content) {
             requireString += '.locals'
           }
 
-          output += '__vue_styles__["' + style.module + '"] = ' + requireString + '\n'
+          output += '__vue_styles__["' + moduleName + '"] = ' + requireString + '\n'
         }
       } else {
         output += requireString
diff --git a/package.json b/package.json
index acc1240e1..f9a069b13 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "source-map": "^0.5.6",
     "vue-hot-reload-api": "^2.0.1",
     "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "^2.0.0-rc.3",
+    "vue-template-compiler": "git://github.com/YiSiWang/vue-template-compiler.git#fc2ce58",
     "vue-template-es2015-compiler": "^1.0.0"
   },
   "peerDependencies": {
diff --git a/test/test.js b/test/test.js
index 5cdbe9a3d..9b83eb3d5 100644
--- a/test/test.js
+++ b/test/test.js
@@ -40,7 +40,6 @@ function bundle (options, cb) {
       })
     }
     expect(stats.compilation.errors).to.be.empty
-    require('fs').writeFileSync('./test.build.js', mfs.readFileSync('/test.build.js').toString())
     cb(mfs.readFileSync('/test.build.js').toString())
   })
 }
@@ -426,7 +425,7 @@ describe('vue-loader', function () {
     })
   })
 
-  it.only('css-modules in SSR', function (done) {
+  it('css-modules in SSR', function (done) {
     bundle({
       entry: './test/fixtures/css-modules.vue',
       target: 'node',
@@ -443,7 +442,8 @@ describe('vue-loader', function () {
       }
 
       var output = requireFromString(code, './test.build.js')
-      expect(output.computed.style().red).to.match(/^_/)
+      expect(output.computed.style().red).to.exist
+
       done()
     })
   })

From 9bfc52202ea383c35fe329397ee5e18cb277d5b3 Mon Sep 17 00:00:00 2001
From: YiSiWang <yisi.wang@ele.me>
Date: Sat, 5 Nov 2016 10:52:49 +0800
Subject: [PATCH 6/6] use vue#2.0.4

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index f9a069b13..780736554 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "source-map": "^0.5.6",
     "vue-hot-reload-api": "^2.0.1",
     "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "git://github.com/YiSiWang/vue-template-compiler.git#fc2ce58",
+    "vue-template-compiler": "^2.0.4",
     "vue-template-es2015-compiler": "^1.0.0"
   },
   "peerDependencies": {
@@ -72,7 +72,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^2.0.0",
     "sugarss": "^0.1.3",
-    "vue": "^2.0.0-rc.4",
+    "vue": "^2.0.4",
     "webpack": "^1.12.2"
   }
 }