autoprefixer + new configuration API

Author: yyx990803

lib/loader.js

@@ -1,4 +1,5 @@
 var loaderUtils = require('loader-utils')
+var assign = require('object-assign')
 var selectorPath = require.resolve('./selector')
 var parserPath = require.resolve('./parser')
 
@@ -15,23 +16,21 @@ var defaultLoaders = {
 }
 
 var rewriters = {
-  template: require.resolve('./template-rewriter') + '!',
-  style: require.resolve('./style-rewriter') + '!'
+  template: require.resolve('./template-rewriter'),
+  style: require.resolve('./style-rewriter')
 }
 
 module.exports = function (content) {
   var self = this
   this.cacheable()
   var cb = this.async()
   var output = ''
+  var options = this.options.vue || {}
   var vueUrl = loaderUtils.getRemainingRequest(this)
 
   // check if there are custom loaders specified with
   // vueLoader.withLoaders(), otherwise use defaults
-  var loaders = loaderUtils.parseQuery(this.query)
-  loaders.html = loaders.html || defaultLoaders.html
-  loaders.css = loaders.css || defaultLoaders.css
-  loaders.js = loaders.js || defaultLoaders.js
+  var loaders = assign({}, defaultLoaders, options.loaders)
 
   function getRequire (type, part, index, scoped) {
     return 'require(' +
@@ -64,8 +63,8 @@ module.exports = function (content) {
 
   function getLoaderString (type, part, scoped) {
     var lang = part.lang || defaultLang[type]
-    var rewriter = scoped ? rewriters[type] || '' : ''
     var loader = loaders[lang]
+    var rewriter = getRewriter(type, scoped)
     if (loader !== undefined) {
       // lang with default or pre-configured loader
       if (loader) loader += '!'
@@ -83,6 +82,17 @@ module.exports = function (content) {
     }
   }
 
+  function getRewriter (type, scoped) {
+    switch (type) {
+    case 'template':
+      return scoped ? (rewriters.template + '!') : ''
+    case 'style':
+      return rewriters.style + (scoped ? '?scoped=true!' : '!')
+    default:
+      return ''
+    }
+  }
+
   function getSelectorString (type, index) {
     return selectorPath +
       '?type=' + type +
@@ -164,10 +174,9 @@ module.exports = function (content) {
   })
 }
 
-/**
- * Expose a way to specify custom loaders to be used at the
- * end for the extracted parts of a component.
- */
-module.exports.withLoaders = function (opts) {
-  return 'vue?' + JSON.stringify(opts).replace(/!/g, '\\u0021')
+module.exports.withLoaders = function () {
+  throw new Error(
+    'vue.withLoaders has been deprecated in vue-loader 6.0. ' +
+    'Add a "vue" section to the webpack config instead.'
+  )
 }

lib/style-rewriter.js

@@ -1,6 +1,7 @@
 var postcss = require('postcss')
 var selectorParser = require('postcss-selector-parser')
 var hash = require('hash-sum')
+var loaderUtils = require('loader-utils')
 
 var currentId
 var addId = postcss.plugin('add-id', function () {
@@ -20,8 +21,23 @@ var addId = postcss.plugin('add-id', function () {
 module.exports = function (css) {
   this.cacheable()
   var cb = this.async()
+
+  var query = loaderUtils.parseQuery(this.query)
+  var options = this.options.vue || {}
+  var autoprefixOptions = options.autoprefix
+
+  var processors = []
+  if (query.scoped) {
+    processors.push(addId)
+  }
+  if (autoprefixOptions !== false) {
+    autoprefixOptions = autoprefixOptions || { remove: false }
+    var autoprefixer = require('autoprefixer')(autoprefixOptions)
+    processors.push(autoprefixer)
+  }
+
   currentId = '_v-' + hash(this.resourcePath)
-  postcss([addId])
+  postcss(processors)
     .process(css)
     .then(function (result) {
       cb(null, result)

package.json

@@ -23,10 +23,12 @@
     "test": "eslint lib && mocha test/test.js --slow 5000"
   },
   "dependencies": {
+    "autoprefixer": "^6.0.3",
     "hash-sum": "^1.0.2",
     "loader-utils": "^0.2.10",
+    "object-assign": "^3.0.0",
     "parse5": "^1.5.0",
-    "postcss": "^4.1.16",
+    "postcss": "^5.0.10",
     "postcss-selector-parser": "^1.1.2"
   },
   "peerDependencies": {
@@ -49,7 +51,6 @@
     "mkdirp": "^0.5.1",
     "mocha": "^2.2.5",
     "node-libs-browser": "^0.5.3",
-    "object-assign": "^3.0.0",
     "rimraf": "^2.4.0",
     "source-map": "^0.5.1",
     "style-loader": "^0.13.0",

test/fixtures/autoprefix.js

@@ -0,0 +1 @@
+window.testModule = require('./autoprefix.vue')

test/fixtures/autoprefix.vue

@@ -0,0 +1,5 @@
+<style>
+body {
+  transform: scale(1);
+}
+</style>

test/test.js

@@ -148,4 +148,14 @@ describe('vue-loader', function () {
     })
   })
 
+  it('autoprefix', function (done) {
+    test({
+      entry: './test/fixtures/autoprefix.js'
+    }, function (window) {
+      var style = window.document.querySelector('style').textContent
+      expect(style).to.contain('body {\n  -webkit-transform: scale(1);\n      -ms-transform: scale(1);\n          transform: scale(1);\n}')
+      done()
+    })
+  })
+
 })