Refactor options

This also adds support for custom PostCSS plugins.

mix.options({
   postCss: [require('postcss-css-variables')()]
});

setup/webpack.config.js

@@ -111,9 +111,7 @@ module.exports.module = {
                     stylus: 'vue-style-loader!css-loader!stylus-loader?paths[]=node_modules'
                 },
 
-                postcss: [
-                    require('autoprefixer')
-                ]
+                postcss: Mix.options.postCss
             }
         },
 
@@ -286,9 +284,7 @@ module.exports.plugins = (module.exports.plugins || []).concat([
     new webpack.LoaderOptionsPlugin({
         minimize: Mix.inProduction,
         options: {
-            postcss: [
-                require('autoprefixer')
-            ],
+            postcss: Mix.options.postCss,
             context: __dirname,
             output: { path: './' }
         }
@@ -358,13 +354,7 @@ if (Mix.inProduction) {
             }
         }),
 
-        new webpack.optimize.UglifyJsPlugin(Object.assign({
-            sourceMap: true,
-            compress: {
-                warnings: false,
-                drop_console: true
-            }
-        }, Mix.options.uglify))
+        new webpack.optimize.UglifyJsPlugin(Mix.options.uglify)
     );
 }
 

setup/webpack.mix.js

@@ -37,5 +37,6 @@ mix.js('src/app.js', 'dist/')
 // mix.options({
 //   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
 //   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
-//   uglify: {} // Uglify-specific options. https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
+//   uglify: {}, // Uglify-specific options. https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
+//   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
 // });

src/Mix.js

@@ -7,6 +7,7 @@ let Concat = require('./Concat');
 let mergeWith = require('lodash').mergeWith;
 let EntryBuilder = require('./EntryBuilder');
 let Dispatcher = require('./Dispatcher');
+let options = require('./Options');
 
 class Mix {
     /**
@@ -26,11 +27,7 @@ class Mix {
         this.inProduction = process.env.NODE_ENV === 'production';
         this.publicPath = './';
         this.resourceRoot = '/';
-        this.options = {
-            extractVueStyles: false,
-            processCssUrls: true,
-            uglify: {}
-        };
+        this.options = options;
     }
 
 

src/Options.js

@@ -0,0 +1,61 @@
+module.exports = {
+    /**
+     * Whether to extract .vue component styles into a dedicated file.
+     * You may provide a boolean, or a dedicated path to extract to.
+     *
+     * @type {Boolean|string}
+     */
+    extractVueStyles: false,
+
+
+    /**
+     * Determine if CSS url()s should be processed by Webpack.
+     *
+     * @type {Boolean}
+     */
+    processCssUrls: true,
+
+
+    /**
+     * Uglify-specific settings for Webpack.
+     *
+     * See: https://github.com/mishoo/UglifyJS2#compressor-options
+     *
+     * @type {Object}
+     */
+    uglify: {
+        sourceMap: true,
+        compress: {
+            warnings: false,
+            drop_console: true
+        }
+    },
+
+
+    /**
+     * PostCSS plugins to be applied to compiled CSS.
+     *
+     * See: https://github.com/postcss/postcss/blob/master/docs/plugins.md
+     *
+     * @type {Array}
+     */
+    postCss: [
+        require('autoprefixer')
+    ],
+
+
+    /**
+     * Merge the given options with the current defaults.
+     *
+     * @param {object} options
+     */
+    merge(options) {
+        let mergeWith = require('lodash').mergeWith;
+
+        mergeWith(this, options, (objValue, srcValue) => {
+            if (Array.isArray(objValue)) {
+                return objValue.concat(srcValue);
+            }
+        });
+    }
+};

src/index.js

@@ -338,7 +338,7 @@ module.exports.webpackConfig = (config) => {
  * @param {object} options
  */
 module.exports.options = (options) => {
-    Mix.options = Object.assign(Mix.options, options);
+    Mix.options.merge(options);
 
     return this;
 };

test/options.js

@@ -0,0 +1,49 @@
+import test from 'ava';
+import options from '../src/Options';
+
+
+test('that it merges options', t => {
+    t.is(true, options.processCssUrls);
+
+    options.merge({
+        processCssUrls: false
+    });
+
+    t.is(false, options.processCssUrls);
+});
+
+
+test('that it deeply merges options', t => {
+    t.deepEqual({
+        warnings: false,
+        drop_console: true
+    }, options.uglify.compress);
+
+    options.merge({
+        uglify: {
+            compress: {
+                drop_console: false
+            }
+        }
+    });
+
+    // It should merge in the drop_console change, without
+    // affecting any other default props on the object.
+    t.deepEqual({
+        warnings: false,
+        drop_console: false
+    }, options.uglify.compress);
+});
+
+
+test('that it appends to default arrays', t => {
+    options.postCss = ['stub'];
+
+    options.merge({
+        postCss: ['some-postcss-plugin']
+    });
+
+    t.deepEqual([
+        'stub', 'some-postcss-plugin'
+    ], options.postCss);
+});