[optimizer] upgrade to postcss+autoprefixer

package.json

@@ -88,7 +88,7 @@
     "angular-route": "1.4.7",
     "angular-sanitize": "1.5.7",
     "ansicolors": "0.3.2",
-    "autoprefixer": "6.3.7",
+    "autoprefixer": "6.5.4",
     "autoprefixer-loader": "2.0.0",
     "babel": "5.8.38",
     "babel-core": "5.8.38",
@@ -133,7 +133,7 @@
     "json-stringify-safe": "5.0.1",
     "jstimezonedetect": "1.0.5",
     "leaflet": "0.7.5",
-    "less": "2.7.0",
+    "less": "2.7.1",
     "less-loader": "2.2.3",
     "lodash": "3.10.1",
     "marked": "0.3.6",
@@ -146,6 +146,7 @@
     "node-sass": "3.8.0",
     "node-uuid": "1.4.7",
     "pegjs": "0.9.0",
+    "postcss-loader": "1.2.1",
     "querystring-browser": "1.0.4",
     "raw-loader": "0.5.1",
     "request": "2.61.0",

src/optimize/base_optimizer.js

@@ -1,3 +1,8 @@
+import { resolve } from 'path';
+import { writeFile } from 'fs';
+import { inherits } from 'util';
+import { format as formatUrl } from 'url';
+
 import webpack from 'webpack';
 import Boom from 'boom';
 import DirectoryNameAsMain from 'webpack-directory-name-as-main';
@@ -5,15 +10,14 @@ import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import CommonsChunkPlugin from 'webpack/lib/optimize/CommonsChunkPlugin';
 import DefinePlugin from 'webpack/lib/DefinePlugin';
 import UglifyJsPlugin from 'webpack/lib/optimize/UglifyJsPlugin';
+import { defaults, transform } from 'lodash';
 
 import fromRoot from '../utils/from_root';
 import babelOptions from './babel_options';
-import { inherits } from 'util';
-import { defaults, transform } from 'lodash';
-import { resolve } from 'path';
-import { writeFile } from 'fs';
-const babelExclude = [/[\/\\](webpackShims|node_modules|bower_components)[\/\\]/];
 import pkg from '../../package.json';
+import { setLoaderQueryParam, makeLoaderString } from './loaders';
+
+const babelExclude = [/[\/\\](webpackShims|node_modules|bower_components)[\/\\]/];
 
 class BaseOptimizer {
   constructor(opts) {
@@ -64,8 +68,38 @@ class BaseOptimizer {
   }
 
   getConfig() {
-    const mapQ = this.sourceMaps ? '?sourceMap' : '';
-    const mapQPre = mapQ ? mapQ + '&' : '?';
+    const loaderWithSourceMaps = (loader) =>
+      setLoaderQueryParam(loader, 'sourceMap', !!this.sourceMaps);
+
+    const makeStyleLoader = preprocessor => {
+      let loaders = [
+        loaderWithSourceMaps('css')
+      ];
+
+      if (preprocessor) {
+        loaders = [
+          ...loaders,
+          {
+            name: 'postcss',
+            query: {
+              config: require.resolve('./postcss.config')
+            }
+          },
+          loaderWithSourceMaps(preprocessor)
+        ];
+      }
+
+      return ExtractTextPlugin.extract(makeLoaderString(loaders));
+    };
+
+    const makeBabelLoader = query => {
+      return makeLoaderString([
+        {
+          name: 'babel',
+          query: defaults({}, query || {}, babelOptions.webpack)
+        }
+      ]);
+    };
 
     return {
       context: fromRoot('.'),
@@ -101,40 +135,24 @@ class BaseOptimizer {
 
       module: {
         loaders: [
-          {
-            test: /\.less$/,
-            loader: ExtractTextPlugin.extract(
-              'style',
-              `css${mapQ}!autoprefixer${mapQPre}{ "browsers": ["last 2 versions","> 5%"] }!less${mapQPre}dumpLineNumbers=comments`
-            )
-          },
-          {
-            test: /\.scss$/,
-            loader: ExtractTextPlugin.extract(
-              'style',
-              `css${mapQ}!autoprefixer${mapQPre}{ "browsers": ["last 2 versions","> 5%"] }!sass${mapQPre}`
-            )
-          },
-          { test: /\.css$/, loader: ExtractTextPlugin.extract('style', `css${mapQ}`) },
+          { test: /\.less$/, loader: makeStyleLoader('less') },
+          { test: /\.scss$/, loader: makeStyleLoader('sass') },
+          { test: /\.css$/, loader: makeStyleLoader() },
           { test: /\.jade$/, loader: 'jade' },
           { test: /\.json$/, loader: 'json' },
           { test: /\.(html|tmpl)$/, loader: 'raw' },
-          { test: /\.png$/, loader: 'url?limit=10000&name=[path][name].[ext]' },
-          { test: /\.(woff|woff2|ttf|eot|svg|ico)(\?|$)/, loader: 'file?name=[path][name].[ext]' },
-          { test: /[\/\\]src[\/\\](core_plugins|ui)[\/\\].+\.js$/, loader: `rjs-repack${mapQ}` },
+          { test: /\.png$/, loader: 'url' },
+          { test: /\.(woff|woff2|ttf|eot|svg|ico)(\?|$)/, loader: 'file' },
+          { test: /[\/\\]src[\/\\](core_plugins|ui)[\/\\].+\.js$/, loader: loaderWithSourceMaps('rjs-repack') },
           {
             test: /\.js$/,
             exclude: babelExclude.concat(this.env.noParse),
-            loader: 'babel',
-            query: babelOptions.webpack
+            loader: makeBabelLoader(),
           },
           {
             test: /\.jsx$/,
             exclude: babelExclude.concat(this.env.noParse),
-            loader: 'babel',
-            query: defaults({
-              nonStandard: true,
-            }, babelOptions.webpack)
+            loader: makeBabelLoader({ nonStandard: true }),
           }
         ].concat(this.env.loaders),
         postLoaders: this.env.postLoaders || [],

src/optimize/loaders.js

@@ -0,0 +1,48 @@
+import { parse as parseUrl, format as formatUrl } from 'url';
+
+class Loader {
+  constructor({ name, query } = {}) {
+    if (!name) {
+      throw new Error('Loaders must define a name');
+    }
+
+    this.name = name;
+    this.query = query || {};
+  }
+
+  static fromUrl(url) {
+    const parsed = parseUrl(url, true);
+    return new Loader({
+      name: parsed.pathname,
+      query: parsed.query
+    });
+  }
+
+  toString() {
+    return formatUrl({
+      pathname: this.name,
+      query: this.query
+    });
+  }
+
+  setQueryParam(name, value) {
+    this.query[name] = value;
+    return this;
+  }
+}
+
+function parseLoader(spec) {
+  if (typeof spec === 'string') {
+    return Loader.fromUrl(spec);
+  }
+
+  return new Loader(spec);
+}
+
+export const makeLoaderString = (loaders) => {
+  return loaders.map(parseLoader).map(l => l.toString()).join('!');
+};
+
+export const setLoaderQueryParam = (loader, name, value) => {
+  return parseLoader(loader).setQueryParam(name, value).toString();
+};

src/optimize/postcss.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')({
+      browsers: [
+        'last 2 versions',
+        '> 5%'
+      ]
+    })
+  ]
+};