Merge branch '3.x' into feat/pages

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'
@@ -265,8 +264,11 @@ export default () => ({
         embed: 'src'
       }
     },
-    css: {},
+    css: {
+      esModule: false
+    },
     cssModules: {
+      esModule: false,
       modules: {
         localIdentName: '[local]_[hash:base64:5]'
       }
@@ -287,6 +289,7 @@ export default () => ({
     runtimeChunk: 'single',
     minimize: undefined as boolean | undefined,
     minimizer: undefined,
+    cssMinimizer: undefined,
     splitChunks: {
       chunks: 'all',
       name: undefined,
@@ -296,8 +299,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

packages/nuxt3/src/webpack/utils/style-loader.ts

@@ -25,11 +25,6 @@ export default class StyleLoader {
     return this.options.build.extractCSS
   }
 
-  get onlyLocals () {
-    // Not supported anymore by css-loader
-    return false // Boolean(this.isServer && this.extractCSS)
-  }
-
   normalize (loaders) {
     loaders = wrapArray(loaders)
     return loaders.map(loader => (typeof loader === 'string' ? { loader } : loader))
@@ -74,10 +69,11 @@ export default class StyleLoader {
   }
 
   css (options) {
-    options.onlyLocals = this.onlyLocals
     const cssLoader = { loader: 'css-loader', options }
 
-    if (options.onlyLocals) {
+    if (this.isServer && this.extractCSS) {
+      options.modules = options.modules || {}
+      options.modules.exportOnlyLocals = true
       return [cssLoader]
     }