feat(webpack): replace optimize-css-assets-webpack-plugin with css-minimizer-webpack-plugin

packages/nuxt3/src/config/config/build.ts

@@ -7,7 +7,6 @@ import type { Options as FileLoaderOptions } from 'file-loader'
 import type { Options as HtmlMinifierOptions } from 'html-minifier'
 import type * as Less from 'less'
 import type { Options as SassOptions } from 'node-sass'
-import type { Options as OptimizeCssAssetsWebpackPluginOptions } from 'optimize-css-assets-webpack-plugin'
 import type { Plugin as PostcssPlugin } from 'postcss'
 import type { Options as PugOptions } from 'pug'
 import type { TerserPluginOptions } from 'terser-webpack-plugin'
@@ -287,6 +286,7 @@ export default () => ({
     runtimeChunk: 'single',
     minimize: undefined as boolean | undefined,
     minimizer: undefined,
+    cssMinimizer: undefined,
     splitChunks: {
       chunks: 'all',
       name: undefined,
@@ -296,8 +296,7 @@ export default () => ({
         }
       }
     }
-  } as WebpackConfiguration['optimization'],
-  optimizeCSS: undefined as undefined | OptimizeCssAssetsWebpackPluginOptions | boolean,
+  } as WebpackConfiguration['optimization'] & { cssMinimizer: undefined | boolean | Record<string, any> },
   /**
    * Enable [thread-loader](https://github.com/webpack-contrib/thread-loader#thread-loader) in webpack building
    *

packages/nuxt3/src/config/options.ts

@@ -345,9 +345,9 @@ function normalizeConfig (_options: CliConfiguration) {
     options.build.optimization.minimize = !options.dev
   }
 
-  // Enable optimizeCSS only when extractCSS is enabled
-  if (options.build.optimizeCSS === undefined) {
-    options.build.optimizeCSS = options.build.extractCSS ? {} : false
+  // Enable cssMinimizer only when extractCSS is enabled
+  if (options.build.optimization.cssMinimizer === undefined) {
+    options.build.optimization.cssMinimizer = options.build.extractCSS ? {} : false
   }
 
   const { loaders } = options.build

packages/nuxt3/src/webpack/config/client.ts

@@ -3,7 +3,7 @@ import querystring from 'querystring'
 import webpack from 'webpack'
 import HTMLPlugin from 'html-webpack-plugin'
 import BundleAnalyzer from 'webpack-bundle-analyzer'
-import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin'
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
 import FriendlyErrorsWebpackPlugin from '@nuxt/friendly-errors-webpack-plugin'
 
 import CorsPlugin from '../plugins/vue/cors'
@@ -89,13 +89,10 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
 
   minimizer () {
     const minimizer = super.minimizer()
-    const { optimizeCSS } = this.options.build
+    const { cssMinimizer } = this.options.build.optimization
 
-    // https://github.com/NMFR/optimize-css-assets-webpack-plugin
-    // https://github.com/webpack-contrib/mini-css-extract-plugin#minimizing-for-production
-    // TODO: Remove OptimizeCSSAssetsPlugin when upgrading to webpack 5
-    if (optimizeCSS) {
-      minimizer.push(new OptimizeCSSAssetsPlugin(Object.assign({}, optimizeCSS)))
+    if (cssMinimizer) {
+      minimizer.push(new CssMinimizerPlugin(Object.assign({}, cssMinimizer)))
     }
 
     return minimizer