Rebase and fix merge conflict

tools/webpack.config.js

@@ -148,38 +148,53 @@ const config = {
     cachedAssets: VERBOSE,
   },
 
-  plugins: [
-    new webpack.optimize.OccurrenceOrderPlugin(),
-  ],
-
-  resolve: {
-    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx'],
-  },
-
-  module: {
-    loaders: [
-      {
-        test: /\.json$/,
-        loader: 'json-loader',
-      }, {
-        test: /\.txt$/,
-        loader: 'raw-loader',
-      }, {
-        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
-        loader: 'url-loader?limit=10000',
-      }, {
-        test: /\.(eot|ttf|wav|mp3)$/,
-        loader: 'file-loader',
-      },
-    ],
-  },
-
-  postcss: function plugins(bundler) {
-    return [
-      require('postcss-import')({ addDependencyTo: bundler }),
-      require('postcss-nested')(),
-      require('postcss-cssnext')({ autoprefixer: AUTOPREFIXER_BROWSERS }),
-    ];
+  postcss(bundler) {
+    return {
+      default: [
+        // Transfer @import rule by inlining content, e.g. @import 'normalize.css'
+        // https://github.com/postcss/postcss-import
+        require('postcss-import')({ addDependencyTo: bundler }),
+        // W3C variables, e.g. :root { --color: red; } div { background: var(--color); }
+        // https://github.com/postcss/postcss-custom-properties
+        require('postcss-custom-properties')(),
+        // W3C CSS Custom Media Queries, e.g. @custom-media --small-viewport (max-width: 30em);
+        // https://github.com/postcss/postcss-custom-media
+        require('postcss-custom-media')(),
+        // CSS4 Media Queries, e.g. @media screen and (width >= 500px) and (width <= 1200px) { }
+        // https://github.com/postcss/postcss-media-minmax
+        require('postcss-media-minmax')(),
+        // W3C CSS Custom Selectors, e.g. @custom-selector :--heading h1, h2, h3, h4, h5, h6;
+        // https://github.com/postcss/postcss-custom-selectors
+        require('postcss-custom-selectors')(),
+        // W3C calc() function, e.g. div { height: calc(100px - 2em); }
+        // https://github.com/postcss/postcss-calc
+        require('postcss-calc')(),
+        // Allows you to nest one style rule inside another
+        // https://github.com/jonathantneal/postcss-nesting
+        require('postcss-nesting')(),
+        // W3C color() function, e.g. div { background: color(red alpha(90%)); }
+        // https://github.com/postcss/postcss-color-function
+        require('postcss-color-function')(),
+        // Convert CSS shorthand filters to SVG equivalent, e.g. .blur { filter: blur(4px); }
+        // https://github.com/iamvdo/pleeease-filters
+        require('pleeease-filters')(),
+        // Generate pixel fallback for "rem" units, e.g. div { margin: 2.5rem 2px 3em 100%; }
+        // https://github.com/robwierzbowski/node-pixrem
+        require('pixrem')(),
+        // W3C CSS Level4 :matches() pseudo class, e.g. p:matches(:first-child, .special) { }
+        // https://github.com/postcss/postcss-selector-matches
+        require('postcss-selector-matches')(),
+        // Transforms :not() W3C CSS Level 4 pseudo class to :not() CSS Level 3 selectors
+        // https://github.com/postcss/postcss-selector-not
+        require('postcss-selector-not')(),
+        // Add vendor prefixes to CSS rules using values from caniuse.com
+        // https://github.com/postcss/autoprefixer
+        require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
+      ],
+      sass: [
+        require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
+      ],
+    };
   },
 };
 
@@ -214,7 +229,7 @@ const clientConfig = extend(true, {}, config, {
     // Assign the module and chunk ids by occurrence count
     // Consistent ordering of modules required if using any hashing ([hash] or [chunkhash])
     // https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
-    new webpack.optimize.OccurenceOrderPlugin(true),
+    new webpack.optimize.OccurrenceOrderPlugin(true),
 
     ...DEBUG ? [] : [