From 2ee86286ad530b6192f10c68d409caf480933caa Mon Sep 17 00:00:00 2001 From: Clark Du Date: Wed, 19 Aug 2020 18:37:04 +0100 Subject: [PATCH 1/2] feat(webpack): replace optimize-css-assets-webpack-plugin with css-minimizer-webpack-plugin --- packages/nuxt3/src/config/config/build.ts | 5 ++--- packages/nuxt3/src/config/options.ts | 6 +++--- packages/nuxt3/src/webpack/config/client.ts | 11 ++++------- 3 files changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/nuxt3/src/config/config/build.ts b/packages/nuxt3/src/config/config/build.ts index 00ce807eb5..57026391bb 100644 --- a/packages/nuxt3/src/config/config/build.ts +++ b/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 }, /** * Enable [thread-loader](https://github.com/webpack-contrib/thread-loader#thread-loader) in webpack building * diff --git a/packages/nuxt3/src/config/options.ts b/packages/nuxt3/src/config/options.ts index aa510c4f5b..03650d94d3 100644 --- a/packages/nuxt3/src/config/options.ts +++ b/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 diff --git a/packages/nuxt3/src/webpack/config/client.ts b/packages/nuxt3/src/webpack/config/client.ts index f662934a89..ad25f9f9cc 100644 --- a/packages/nuxt3/src/webpack/config/client.ts +++ b/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 From dab1a831a68760b1a092c26b8c778730b75273f4 Mon Sep 17 00:00:00 2001 From: Clark Du Date: Wed, 19 Aug 2020 18:21:49 +0100 Subject: [PATCH 2/2] fix(build): style not work in vue --- packages/nuxt3/src/config/config/build.ts | 5 ++++- packages/nuxt3/src/webpack/utils/style-loader.ts | 10 +++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/nuxt3/src/config/config/build.ts b/packages/nuxt3/src/config/config/build.ts index 57026391bb..fe2861cf57 100644 --- a/packages/nuxt3/src/config/config/build.ts +++ b/packages/nuxt3/src/config/config/build.ts @@ -264,8 +264,11 @@ export default () => ({ embed: 'src' } }, - css: {}, + css: { + esModule: false + }, cssModules: { + esModule: false, modules: { localIdentName: '[local]_[hash:base64:5]' } diff --git a/packages/nuxt3/src/webpack/utils/style-loader.ts b/packages/nuxt3/src/webpack/utils/style-loader.ts index 1813781f3d..d1d3dfff94 100644 --- a/packages/nuxt3/src/webpack/utils/style-loader.ts +++ b/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] }