autoprefixer for external CSS

meta.json

@@ -52,6 +52,7 @@
   },
   "filters": {
     ".eslintrc.js": "lint",
+    "build/webpack.test.unit.conf.js": "unit",
     "test/unit/**/*": "unit",
     "test/e2e/**/*": "e2e"
   },

template/build/utils.js

@@ -9,7 +9,8 @@ exports.assetsPath = function (_path) {
 exports.cssLoaders = function (options) {
   options = options || {}
   // generate loader string to be used with extract text plugin
-  function generateLoaders (loaders) {
+  function generateLoaders () {
+    var loaders = ['css', 'postcss'].concat(Array.from(arguments))
     var sourceLoader = loaders.map(function (loader) {
       var extraParamChar
       if (/\?/.test(loader)) {
@@ -31,13 +32,13 @@ exports.cssLoaders = function (options) {
 
   // http://vuejs.github.io/vue-loader/configurations/extract-css.html
   return {
-    css: generateLoaders(['css']),
-    postcss: generateLoaders(['css']),
-    less: generateLoaders(['css', 'less']),
-    sass: generateLoaders(['css', 'sass?indentedSyntax']),
-    scss: generateLoaders(['css', 'sass']),
-    stylus: generateLoaders(['css', 'stylus']),
-    styl: generateLoaders(['css', 'stylus'])
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass?indentedSyntax'),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
   }
 }
 

template/build/webpack.base.conf.js

@@ -2,6 +2,7 @@ var path = require('path')
 var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
+var autoprefixer = require('autoprefixer')
 
 module.exports = {
   entry: {
@@ -84,6 +85,9 @@ module.exports = {
   },
   {{/lint}}
   vue: {
-    loaders: utils.cssLoaders()
-  }
+    autoprefixer: false
+  },
+  postcss: [
+    autoprefixer({ browsers: config.build.browsers })
+  ]
 }

template/build/webpack.dev.conf.js

@@ -14,6 +14,9 @@ module.exports = merge(baseWebpackConfig, {
   module: {
     loaders: utils.styleLoaders()
   },
+  vue: {
+    loaders: utils.cssLoaders()
+  },
   // eval-source-map is faster for development
   devtool: '#eval-source-map',
   plugins: [

template/build/webpack.prod.conf.js

@@ -12,20 +12,23 @@ var env = process.env.NODE_ENV === 'testing'
 
 module.exports = merge(baseWebpackConfig, {
   module: {
-    loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
-  },
-  devtool: config.build.productionSourceMap ? '#source-map' : false,
-  output: {
-    path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+    loaders: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
   },
   vue: {
     loaders: utils.cssLoaders({
       sourceMap: config.build.productionSourceMap,
       extract: true
     })
   },
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
   plugins: [
     // http://vuejs.github.io/vue-loader/workflow/production.html
     new webpack.DefinePlugin({

template/build/webpack.test.unit.conf.js

@@ -0,0 +1,48 @@
+var path = require('path')
+var merge = require('webpack-merge')
+var baseConfig = require('./webpack.base.conf')
+var utils = require('./utils')
+var webpack = require('webpack')
+var projectRoot = path.resolve(__dirname, '../')
+
+var webpackConfig = merge(baseConfig, {
+  // use inline sourcemap for karma-sourcemap-loader
+  module: {
+    loaders: utils.styleLoaders()
+  },
+  devtool: '#inline-source-map',
+  vue: {
+    loaders: merge(
+      utils.cssLoaders(),
+      {
+        js: 'isparta'
+      }
+    )
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/test.env')
+    })
+  ]
+})
+
+// no need for app entry during tests
+delete webpackConfig.entry
+
+// make sure isparta loader is applied before eslint
+webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || []
+webpackConfig.module.preLoaders.unshift({
+  test: /\.js$/,
+  loader: 'isparta',
+  include: path.resolve(projectRoot, 'src')
+})
+
+// only apply babel for test files when using isparta
+webpackConfig.module.loaders.some(function (loader, i) {
+  if (loader.loader === 'babel') {
+    loader.include = path.resolve(projectRoot, 'test/unit')
+    return true
+  }
+})
+
+module.exports = webpackConfig

template/config/index.js

@@ -8,7 +8,8 @@ module.exports = {
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    productionSourceMap: true
+    productionSourceMap: true,
+    browsers: ['last 2 versions', 'ie 9-11']
   },
   dev: {
     env: require('./dev.env'),

template/package.json

@@ -28,6 +28,8 @@
     "babel-preset-stage-2": "^6.0.0",
     "connect-history-api-fallback": "^1.1.0",
     "css-loader": "^0.23.0",
+    "postcss-loader": "^0.8.2",
+    "autoprefixer": "^6.3.6",
     {{#lint}}
     "eslint": "^2.10.2",
     "eslint-friendly-formatter": "^2.0.5",

template/test/unit/karma.conf.js

@@ -3,49 +3,7 @@
 // we are also using it with karma-webpack
 //   https://github.com/webpack/karma-webpack
 
-var path = require('path')
-var merge = require('webpack-merge')
-var baseConfig = require('../../build/webpack.base.conf')
-var utils = require('../../build/utils')
-var webpack = require('webpack')
-var projectRoot = path.resolve(__dirname, '../../')
-
-var webpackConfig = merge(baseConfig, {
-  // use inline sourcemap for karma-sourcemap-loader
-  module: {
-    loaders: utils.styleLoaders()
-  },
-  devtool: '#inline-source-map',
-  vue: {
-    loaders: {
-      js: 'isparta'
-    }
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': require('../../config/test.env')
-    })
-  ]
-})
-
-// no need for app entry during tests
-delete webpackConfig.entry
-
-// make sure isparta loader is applied before eslint
-webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || []
-webpackConfig.module.preLoaders.unshift({
-  test: /\.js$/,
-  loader: 'isparta',
-  include: path.resolve(projectRoot, 'src')
-})
-
-// only apply babel for test files when using isparta
-webpackConfig.module.loaders.some(function (loader, i) {
-  if (loader.loader === 'babel') {
-    loader.include = path.resolve(projectRoot, 'test/unit')
-    return true
-  }
-})
+var webpackConfig = require('../../build/webpack.test.unit.conf')
 
 module.exports = function (config) {
   config.set({