add localIdentName support

Author: YiSiWang

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)
     })
   }
 

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()
     })