fix compat with extract css plugin (close #51)

Author: yyx990803

lib/loader.js

@@ -65,10 +65,23 @@ module.exports = function (content) {
     var lang = part.lang || defaultLang[type]
     var loader = loaders[lang]
     var rewriter = getRewriter(type, scoped)
+    var cssRE = /\b(css!?)\b/
+    var htmlRE = /\b((vue-)?html!?)\b/
     if (loader !== undefined) {
-      // lang with default or pre-configured loader
-      if (loader) loader += '!'
-      return loader + rewriter
+      // inject rewriter before css/html loader for
+      // extractTextPlugin use cases
+      if (cssRE.test(loader)) {
+        loader = loader.replace(cssRE, function (m, $1) {
+          return ensureBang($1) + rewriter
+        })
+      } else if (htmlRE.test(loader)) {
+        loader = loader.replace(htmlRE, function (m, $1) {
+          return ensureBang($1) + rewriter
+        })
+      } else {
+        loader = ensureBang(loader) + rewriter
+      }
+      return ensureBang(loader)
     } else {
       // unknown lang, assume a loader for it is used
       switch (type) {
@@ -99,6 +112,14 @@ module.exports = function (content) {
       '&index=' + index + '!'
   }
 
+  function ensureBang (loader) {
+    if (loader.charAt(loader.length - 1) !== '!') {
+      return loader + '!'
+    } else {
+      return loader
+    }
+  }
+
   var url = '!!' + parserPath + '!' + vueUrl
   this.loadModule(url, function (err, source) {
     if (err) return cb(err)

package.json

@@ -45,7 +45,7 @@
     "chai": "^3.0.0",
     "css-loader": "^0.21.0",
     "eslint": "^1.6.0",
-    "vue-html-loader": "^1.0.0",
+    "extract-text-webpack-plugin": "^0.8.2",
     "jade": "^1.11.0",
     "jsdom": "^6.5.1",
     "mkdirp": "^0.5.1",
@@ -56,6 +56,7 @@
     "style-loader": "^0.13.0",
     "stylus-loader": "^1.4.0",
     "template-html-loader": "^0.0.3",
+    "vue-html-loader": "^1.0.0",
     "webpack": "^1.12.2"
   }
 }

test/fixtures/extract-css.js

@@ -0,0 +1 @@
+require('./extract-css.vue')

test/fixtures/extract-css.vue

@@ -0,0 +1,10 @@
+<style lang="stylus">
+h1
+  color red
+</style>
+
+<style>
+h2 {
+  color: green;
+}
+</style>

test/test.js

@@ -7,6 +7,7 @@ var assign = require('object-assign')
 var rimraf = require('rimraf')
 var hash = require('hash-sum')
 var SourceMapConsumer = require('source-map').SourceMapConsumer
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
 
 describe('vue-loader', function () {
 
@@ -170,4 +171,25 @@ describe('vue-loader', function () {
     })
   })
 
+  it('extract CSS', function (done) {
+    webpack(Object.assign({}, globalConfig, {
+      entry: './test/fixtures/extract-css.js',
+      vue: {
+        loaders: {
+          css: ExtractTextPlugin.extract('css'),
+          stylus: ExtractTextPlugin.extract('css!stylus')
+        }
+      },
+      plugins: [
+        new ExtractTextPlugin('test.output.css')
+      ]
+    }), function (err) {
+      expect(err).to.be.null
+      getFile('test.output.css', function (data) {
+        expect(data).to.contain('h1 {\n  color: #f00;\n}\nh2 {\n  color: green;\n}')
+        done()
+      })
+    })
+  })
+
 })