Adds optimize-css-assets-webpack-plugin

This is needed for the latest version of css-loader, which does not
handle this

Author: weaverryan

index.js

@@ -226,6 +226,28 @@ class Encore {
         return this;
     }
 
+    /**
+     * Allows you to configure the options passed to the optimize-css-assets-webpack-plugin.
+     * A list of available options can be found at https://github.com/NMFR/optimize-css-assets-webpack-plugin
+     *
+     * For example:
+     *
+     *      Encore.configureOptimizeCssPlugin((options) => {
+     *          options.cssProcessor = require('cssnano');
+     *          options.cssProcessorPluginOptions = {
+     *              preset: ['default', { discardComments: { removeAll: true } }],
+     *          }
+     *      })
+     *
+     * @param {function} optimizeCssPluginOptionsCallback
+     * @returns {Encore}
+     */
+    configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback = () => {}) {
+        webpackConfig.configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback);
+
+        return this;
+    }
+
     /**
      * Adds a JavaScript file that should be webpacked:
      *

lib/WebpackConfig.js

@@ -110,6 +110,7 @@ class WebpackConfig {
         this.loaderOptionsPluginOptionsCallback = () => {};
         this.manifestPluginOptionsCallback = () => {};
         this.terserPluginOptionsCallback = () => {};
+        this.optimizeCssPluginOptionsCallback = () => {};
         this.notifierPluginOptionsCallback = () => {};
     }
 
@@ -217,6 +218,14 @@ class WebpackConfig {
         this.terserPluginOptionsCallback = terserPluginOptionsCallback;
     }
 
+    configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback = () => {}) {
+        if (typeof optimizeCssPluginOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to configureOptimizeCssPlugin() must be a callback function');
+        }
+
+        this.configureOptimizeCssPlugin = optimizeCssPluginOptionsCallback;
+    }
+
     /**
      * Returns the value that should be used as the publicPath,
      * which can be overridden by enabling the webpackDevServer

lib/config-generator.js

@@ -33,6 +33,7 @@ const variableProviderPluginUtil = require('./plugins/variable-provider');
 const cleanPluginUtil = require('./plugins/clean');
 const definePluginUtil = require('./plugins/define');
 const terserPluginUtil = require('./plugins/terser');
+const optimizeCssAssetsUtil = require('./plugins/optimize-css-assets');
 const vuePluginUtil = require('./plugins/vue');
 const friendlyErrorPluginUtil = require('./plugins/friendly-errors');
 const assetOutputDisplay = require('./plugins/asset-output-display');
@@ -388,7 +389,8 @@ class ConfigGenerator {
 
         if (this.webpackConfig.isProduction()) {
             optimization.minimizer = [
-                terserPluginUtil(this.webpackConfig)
+                terserPluginUtil(this.webpackConfig),
+                optimizeCssAssetsUtil(this.webpackConfig)
             ];
         } else {
             // see versioning.js: this gives us friendly module names,

lib/plugins/optimize-css-assets.js

@@ -0,0 +1,25 @@
+/*
+ * This file is part of the Symfony Webpack Encore package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const applyOptionsCallback = require('../utils/apply-options-callback');
+
+/**
+ * @param {WebpackConfig} webpackConfig
+ * @return {object}
+ */
+module.exports = function(webpackConfig) {
+    const optimizePluginOptions = {};
+
+    return new OptimizeCSSAssetsPlugin(
+        applyOptionsCallback(webpackConfig.optimizeCssPluginOptionsCallback, optimizePluginOptions)
+    );
+};

package.json

@@ -40,6 +40,7 @@
     "loader-utils": "^1.1.0",
     "lodash": ">=3.5 <5",
     "mini-css-extract-plugin": ">=0.4.0 <0.4.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "pkg-up": "^1.0.0",
     "pretty-error": "^2.1.1",
     "resolve-url-loader": "^2.3.0",

test/WebpackConfig.js

@@ -299,6 +299,24 @@ describe('WebpackConfig object', () => {
         });
     });
 
+    describe('configureOptimizeCssPlugin', () => {
+        it('Setting callback', () => {
+            const config = createConfig();
+            const callback = () => {};
+            config.configureOptimizeCssPlugin(callback);
+
+            expect(config.optimizeCssPluginOptionsCallback).to.equal(callback);
+        });
+
+        it('Setting invalid callback argument', () => {
+            const config = createConfig();
+
+            expect(() => {
+                config.configureOptimizeCssPlugin('foo');
+            }).to.throw('Argument 1 to configureOptimizeCssPlugin() must be a callback function');
+        });
+    });
+
     describe('addEntry', () => {
         it('Calling with a duplicate name throws an error', () => {
             const config = createConfig();

test/index.js

@@ -405,6 +405,15 @@ describe('Public API', () => {
 
     });
 
+    describe('configureOptimizeCssPlugin', () => {
+
+        it('should return the API object', () => {
+            const returnedValue = api.configureOptimizeCssPlugin(() => {});
+            expect(returnedValue).to.equal(api);
+        });
+
+    });
+
     describe('Runtime environment proxy', () => {
         beforeEach(() => {
             api.clearRuntimeEnvironment();