Replace optimize-css-assets-webpack-plugin by css-minimizer-webpack-plugin

Author: Lyrkan

Diff for: index.js

@@ -192,25 +192,22 @@ class Encore {
     }
 
     /**
-     * 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
+     * Allows you to configure the options passed to the css-minimizer-webpack-plugin.
+     * A list of available options can be found at https://github.com/webpack-contrib/css-minimizer-webpack-plugin
      *
      * For example:
      *
      * ```
-     * Encore.configureOptimizeCssPlugin((options) => {
-     *     options.cssProcessor = require('cssnano');
-     *     options.cssProcessorPluginOptions = {
-     *         preset: ['default', { discardComments: { removeAll: true } }],
-     *     }
+     * Encore.configureCssMinimizerPlugin((options) => {
+     *     options.parallel = false;
      * })
      * ```
      *
-     * @param {function} optimizeCssPluginOptionsCallback
+     * @param {function} cssMinimizerPluginOptionsCallback
      * @returns {Encore}
      */
-    configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback = () => {}) {
-        webpackConfig.configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback);
+    configureCssMinimizerPlugin(cssMinimizerPluginOptionsCallback = () => {}) {
+        webpackConfig.configureCssMinimizerPlugin(cssMinimizerPluginOptionsCallback);
 
         return this;
     }

Diff for: lib/WebpackConfig.js

@@ -187,7 +187,7 @@ class WebpackConfig {
         this.friendlyErrorsPluginOptionsCallback = () => {};
         this.manifestPluginOptionsCallback = () => {};
         this.terserPluginOptionsCallback = () => {};
-        this.optimizeCssPluginOptionsCallback = () => {};
+        this.cssMinimizerPluginOptionsCallback = () => {};
         this.notifierPluginOptionsCallback = () => {};
     }
 
@@ -299,12 +299,12 @@ class WebpackConfig {
         this.terserPluginOptionsCallback = terserPluginOptionsCallback;
     }
 
-    configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback = () => {}) {
-        if (typeof optimizeCssPluginOptionsCallback !== 'function') {
-            throw new Error('Argument 1 to configureOptimizeCssPlugin() must be a callback function');
+    configureCssMinimizerPlugin(cssMinimizerPluginOptionsCallback = () => {}) {
+        if (typeof cssMinimizerPluginOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to configureCssMinimizerPlugin() must be a callback function');
         }
 
-        this.optimizeCssPluginOptionsCallback = optimizeCssPluginOptionsCallback;
+        this.cssMinimizerPluginOptionsCallback = cssMinimizerPluginOptionsCallback;
     }
 
     /**

Diff for: lib/plugins/optimize-css-assets.js

@@ -10,31 +10,19 @@
 'use strict';
 
 const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unused-vars
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const applyOptionsCallback = require('../utils/apply-options-callback');
 
 /**
  * @param {WebpackConfig} webpackConfig
  * @return {object}
  */
 module.exports = function(webpackConfig) {
-    const optimizePluginOptions = {
-        // see: https://github.com/NMFR/optimize-css-assets-webpack-plugin/issues/53#issuecomment-400294569
-        // we always use annotations: true, which is the setting if you're
-        // outputting to a separate file. This plugin is only
-        // used in production, and, in production, we always use the
-        // source-map option (a separate file) in config-generator.
-        cssProcessorOptions: {}
+    const minimizerPluginOptions = {
+        sourceMap: webpackConfig.useSourceMaps
     };
 
-    if (webpackConfig.useSourceMaps) {
-        optimizePluginOptions.cssProcessorOptions.map = {
-            inline: false,
-            annotation: true,
-        };
-    }
-
-    return new OptimizeCSSAssetsPlugin(
-        applyOptionsCallback(webpackConfig.optimizeCssPluginOptionsCallback, optimizePluginOptions)
+    return new CssMinimizerPlugin(
+        applyOptionsCallback(webpackConfig.cssMinimizerPluginOptionsCallback, minimizerPluginOptions)
     );
 };

Diff for: package.json

@@ -33,12 +33,12 @@
     "chalk": "^4.0.0",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.5.2",
+    "css-minimizer-webpack-plugin": "^1.1.5",
     "fast-levenshtein": "^2.0.6",
     "file-loader": "^6.0.0",
     "friendly-errors-webpack-plugin": "^2.0.0-beta.1",
     "loader-utils": "^2.0.0",
     "mini-css-extract-plugin": "^1.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "pkg-up": "^3.1.0",
     "pretty-error": "^2.1.1",
     "resolve-url-loader": "^3.1.2",

Diff for: test/WebpackConfig.js

@@ -322,21 +322,21 @@ describe('WebpackConfig object', () => {
         });
     });
 
-    describe('configureOptimizeCssPlugin', () => {
+    describe('configureCssMinimizerPlugin', () => {
         it('Setting callback', () => {
             const config = createConfig();
             const callback = () => {};
-            config.configureOptimizeCssPlugin(callback);
+            config.configureCssMinimizerPlugin(callback);
 
-            expect(config.optimizeCssPluginOptionsCallback).to.equal(callback);
+            expect(config.cssMinimizerPluginOptionsCallback).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');
+                config.configureCssMinimizerPlugin('foo');
+            }).to.throw('Argument 1 to configureCssMinimizerPlugin() must be a callback function');
         });
     });
 

Diff for: test/functional.js

@@ -2291,13 +2291,13 @@ module.exports = {
                 config.setPublicPath('/build');
                 config.copyFiles({ from: './copy' });
 
-                // By default the optimize-css-assets-webpack-plugin will
+                // By default the css-minimizer-webpack-plugin will
                 // run on ALL emitted CSS files, which includes the ones
                 // handled by `Encore.copyFiles()`.
                 // We disable it for this test since our CSS file will
                 // not be valid and can't be handled by this plugin.
-                config.configureOptimizeCssPlugin(options => {
-                    options.assetNameRegExp = /^$/;
+                config.configureCssMinimizerPlugin(options => {
+                    options.include = /^$/;
                 });
 
                 // By default the terser-webpack-plugin will run on
@@ -2353,13 +2353,13 @@ module.exports = {
                     pattern: /\.(?!(css|js)$)([^.]+$)/
                 });
 
-                // By default the optimize-css-assets-webpack-plugin will
+                // By default the css-minimizer-webpack-plugin will
                 // run on ALL emitted CSS files, which includes the ones
                 // handled by `Encore.copyFiles()`.
                 // We disable it for this test since our CSS file will
                 // not be valid and can't be handled by this plugin.
-                config.configureOptimizeCssPlugin(options => {
-                    options.assetNameRegExp = /^$/;
+                config.configureCssMinimizerPlugin(options => {
+                    options.include = /^$/;
                 });
 
                 // By default the terser-webpack-plugin will run on

Diff for: test/index.js

@@ -416,10 +416,10 @@ describe('Public API', () => {
 
     });
 
-    describe('configureOptimizeCssPlugin', () => {
+    describe('configureCssMinimizerPlugin', () => {
 
         it('should return the API object', () => {
-            const returnedValue = api.configureOptimizeCssPlugin(() => {});
+            const returnedValue = api.configureCssMinimizerPlugin(() => {});
             expect(returnedValue).to.equal(api);
         });