tests for extractCSS option

yyx990803 · yyx990803 · commit d715da398c67 · 2017-04-25T15:26:15.000+08:00
diff --git a/lib/loader.js b/lib/loader.js
@@ -288,26 +288,24 @@ module.exports = function (content) {
   }
 
   function getCSSExtractLoader (lang) {
-    var extract
+    var extractor
     var op = options.extractCSS
     // extractCSS option is an instance of ExtractTextPlugin
     if (typeof op.extract === 'function') {
-      extract = op.extract
+      extractor = op
     } else {
-      var plugin = tryRequire('extract-text-webpack-plugin')
-      if (!plugin) {
+      extractor = tryRequire('extract-text-webpack-plugin')
+      if (!extractor) {
         throw new Error(
           '[vue-loader] extractCSS: true requires extract-text-webpack-plugin ' +
           'as a peer dependency.'
         )
-      } else {
-        extract = plugin.extract
       }
     }
     var langLoader = lang
       ? ensureBang(ensureLoader(lang))
       : ''
-    return extract({
+    return extractor.extract({
       use: 'css-loader' + cssLoaderOptions + '!' + langLoader,
       fallback: 'vue-style-loader'
     })
diff --git a/test/test.js b/test/test.js
@@ -293,6 +293,41 @@ describe('vue-loader', function () {
     })
   })
 
+  it('extract CSS using option', done => {
+    bundle({
+      entry: './test/fixtures/extract-css.vue',
+      vue: {
+        extractCSS: true
+      },
+      plugins: [
+        new ExtractTextPlugin('test.output.css')
+      ]
+    }, (code, warnings) => {
+      var css = mfs.readFileSync('/test.output.css').toString()
+      css = normalizeNewline(css)
+      expect(css).to.contain('h1 {\n  color: #f00;\n}\n\nh2 {\n  color: green;\n}')
+      done()
+    })
+  })
+
+  it('extract CSS using option (passing plugin instance)', done => {
+    const plugin = new ExtractTextPlugin('test.output.css')
+    bundle({
+      entry: './test/fixtures/extract-css.vue',
+      vue: {
+        extractCSS: plugin
+      },
+      plugins: [
+        plugin
+      ]
+    }, (code, warnings) => {
+      var css = mfs.readFileSync('/test.output.css').toString()
+      css = normalizeNewline(css)
+      expect(css).to.contain('h1 {\n  color: #f00;\n}\n\nh2 {\n  color: green;\n}')
+      done()
+    })
+  })
+
   it('dependency injection', done => {
     test({
       entry: './test/fixtures/inject.js'
