feature #335 Add option to configure the CSS loader (XWB)

This PR was merged into the master branch.

Discussion
----------

Add option to configure the CSS loader

Disabling the URL handler can be handy for importing legacy CSS.

Fixes #334

Commits
-------

64935f1 Add css-loader configuration callback

Author: weaverryan

index.js

@@ -581,6 +581,25 @@ class Encore {
         return this;
     }
 
+    /**
+     * Configure the css-loader.
+     *
+     * https://github.com/webpack-contrib/css-loader#options
+     *
+     * Encore.configureCssLoader(function(config) {
+     *      // change the config
+     *      // config.minimize = true;
+     * });
+     *
+     * @param {function} callback
+     * @returns {Encore}
+     */
+    configureCssLoader(callback) {
+        webpackConfig.configureCssLoader(callback);
+
+        return this;
+    }
+
     /**
      * If enabled, the react preset is added to Babel.
      *

lib/WebpackConfig.js

@@ -86,6 +86,7 @@ class WebpackConfig {
         this.lessLoaderOptionsCallback = () => {};
         this.stylusLoaderOptionsCallback = () => {};
         this.babelConfigurationCallback = () => {};
+        this.cssLoaderConfigurationCallback = () => {};
         this.vueLoaderOptionsCallback = () => {};
         this.eslintLoaderOptionsCallback = () => {};
         this.tsConfigurationCallback = () => {};
@@ -319,6 +320,14 @@ class WebpackConfig {
         this.babelConfigurationCallback = callback;
     }
 
+    configureCssLoader(callback) {
+        if (typeof callback !== 'function') {
+            throw new Error('Argument 1 to configureCssLoader() must be a callback function.');
+        }
+
+        this.cssLoaderConfigurationCallback = callback;
+    }
+
     createSharedEntry(name, files) {
         // don't allow to call this twice
         if (this.sharedCommonsEntryName) {

lib/loaders/css.js

@@ -21,18 +21,20 @@ module.exports = {
     getLoaders(webpackConfig, skipPostCssLoader) {
         const usePostCssLoader = webpackConfig.usePostCssLoader && !skipPostCssLoader;
 
+        const options = {
+            minimize: webpackConfig.isProduction(),
+            sourceMap: webpackConfig.useSourceMaps,
+            // when using @import, how many loaders *before* css-loader should
+            // be applied to those imports? This defaults to 0. When postcss-loader
+            // is used, we set it to 1, so that postcss-loader is applied
+            // to @import resources.
+            importLoaders: usePostCssLoader ? 1 : 0
+        };
+
         const cssLoaders = [
             {
                 loader: 'css-loader',
-                options: {
-                    minimize: webpackConfig.isProduction(),
-                    sourceMap: webpackConfig.useSourceMaps,
-                    // when using @import, how many loaders *before* css-loader should
-                    // be applied to those imports? This defaults to 0. When postcss-loader
-                    // is used, we set it to 1, so that postcss-loader is applied
-                    // to @import resources.
-                    importLoaders: usePostCssLoader ? 1 : 0
-                }
+                options: applyOptionsCallback(webpackConfig.cssLoaderConfigurationCallback, options)
             },
         ];
 

test/WebpackConfig.js

@@ -436,6 +436,23 @@ describe('WebpackConfig object', () => {
         });
     });
 
+    describe('configureCssLoader', () => {
+        it('Calling method sets it', () => {
+            const config = createConfig();
+            const testCallback = () => {};
+            config.configureCssLoader(testCallback);
+            expect(config.cssLoaderConfigurationCallback).to.equal(testCallback);
+        });
+
+        it('Calling with non-callback throws an error', () => {
+            const config = createConfig();
+
+            expect(() => {
+                config.configureCssLoader('FOO');
+            }).to.throw('must be a callback function');
+        });
+    });
+
     describe('enablePostCssLoader', () => {
         it('Call with no config', () => {
             const config = createConfig();

test/loaders/css.js

@@ -44,6 +44,20 @@ describe('loaders/css', () => {
         expect(actualLoaders[0].options.minimize).to.be.true;
     });
 
+    it('getLoaders() with options callback', () => {
+        const config = createConfig();
+
+        config.configureCssLoader(function(options) {
+            options.minimize = true;
+            options.url = false;
+        });
+
+        const actualLoaders = cssLoader.getLoaders(config);
+        expect(actualLoaders).to.have.lengthOf(1);
+        expect(actualLoaders[0].options.minimize).to.be.true;
+        expect(actualLoaders[0].options.url).to.be.false;
+    });
+
     describe('getLoaders() with PostCSS', () => {
         it('without options callback', () => {
             const config = createConfig();