From 6b3d0163b6cc48df76a89165dd89a99c9254ca51 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Mon, 16 Oct 2023 13:54:03 +0100 Subject: [PATCH] fix(webpack): remove `lodash-es` + simplify postcss resolution (#23692) --- packages/webpack/package.json | 3 +- packages/webpack/src/plugins/vue/client.ts | 5 ++- packages/webpack/src/utils/config.ts | 6 +-- packages/webpack/src/utils/postcss.ts | 52 ++++++++-------------- pnpm-lock.yaml | 11 +++-- 5 files changed, 31 insertions(+), 46 deletions(-) diff --git a/packages/webpack/package.json b/packages/webpack/package.json index 1e71a1c8e7..7c822bb3cc 100644 --- a/packages/webpack/package.json +++ b/packages/webpack/package.json @@ -34,7 +34,7 @@ "fs-extra": "^11.1.1", "h3": "^1.8.2", "hash-sum": "^2.0.0", - "lodash-es": "^4.17.21", + "klona": "^2.0.6", "magic-string": "^0.30.4", "memfs": "^4.6.0", "mini-css-extract-plugin": "^2.7.6", @@ -65,7 +65,6 @@ "@nuxt/schema": "workspace:*", "@types/fs-extra": "11.0.2", "@types/hash-sum": "1.0.0", - "@types/lodash-es": "4.17.9", "@types/pify": "5.0.2", "@types/webpack-bundle-analyzer": "4.6.1", "@types/webpack-hot-middleware": "2.25.7", diff --git a/packages/webpack/src/plugins/vue/client.ts b/packages/webpack/src/plugins/vue/client.ts index f9c5319012..5c51fce6d9 100644 --- a/packages/webpack/src/plugins/vue/client.ts +++ b/packages/webpack/src/plugins/vue/client.ts @@ -6,7 +6,6 @@ import { normalizeWebpackManifest } from 'vue-bundle-renderer' import { dirname } from 'pathe' import hash from 'hash-sum' -import { uniq } from 'lodash-es' import fse from 'fs-extra' import type { Nuxt } from '@nuxt/schema' @@ -18,6 +17,10 @@ interface PluginOptions { nuxt: Nuxt } +function uniq (items: T[]) { + return [...new Set(items)] +} + export default class VueSSRClientPlugin { options: PluginOptions diff --git a/packages/webpack/src/utils/config.ts b/packages/webpack/src/utils/config.ts index a9ac4b4acb..38fb29a51a 100644 --- a/packages/webpack/src/utils/config.ts +++ b/packages/webpack/src/utils/config.ts @@ -1,7 +1,7 @@ -import { cloneDeep } from 'lodash-es' import type { Configuration } from 'webpack' import type { Nuxt, NuxtOptions } from '@nuxt/schema' import { logger } from '@nuxt/kit' +import { klona } from 'klona' export interface WebpackConfigContext { nuxt: Nuxt @@ -67,6 +67,6 @@ export function fileName (ctx: WebpackConfigContext, key: string) { } export function getWebpackConfig (ctx: WebpackConfigContext): Configuration { - // Clone deep avoid leaking config between Client and Server - return cloneDeep(ctx.config) + // Clone to avoid leaking config between Client and Server + return klona(ctx.config) } diff --git a/packages/webpack/src/utils/postcss.ts b/packages/webpack/src/utils/postcss.ts index c11f32ff5d..270341a1d4 100644 --- a/packages/webpack/src/utils/postcss.ts +++ b/packages/webpack/src/utils/postcss.ts @@ -1,7 +1,7 @@ import { createCommonJS } from 'mlly' -import { cloneDeep, defaults, merge } from 'lodash-es' import { requireModule } from '@nuxt/kit' import type { Nuxt } from '@nuxt/schema' +import { defu } from 'defu' const isPureObject = (obj: unknown): obj is Object => obj !== null && !Array.isArray(obj) && typeof obj === 'object' @@ -26,15 +26,6 @@ const orderPresets = { } export const getPostcssConfig = (nuxt: Nuxt) => { - function defaultConfig () { - return { - sourceMap: nuxt.options.webpack.cssSourceMap, - plugins: nuxt.options.postcss.plugins, - // Array, String or Function - order: 'autoprefixerAndCssnanoLast' - } - } - function sortPlugins ({ plugins, order }: any) { const names = Object.keys(plugins) if (typeof order === 'string') { @@ -43,38 +34,31 @@ export const getPostcssConfig = (nuxt: Nuxt) => { return typeof order === 'function' ? order(names, orderPresets) : (order || names) } - function loadPlugins (config: any) { - if (!isPureObject(config.plugins)) { return } + if (!nuxt.options.webpack.postcss || !nuxt.options.postcss) { + return false + } + const postcssOptions = defu({}, nuxt.options.postcss, { + sourceMap: nuxt.options.webpack.cssSourceMap, + // Array, String or Function + order: 'autoprefixerAndCssnanoLast' + }) + + // Keep the order of default plugins + if (!Array.isArray(postcssOptions.plugins) && isPureObject(postcssOptions.plugins)) { // Map postcss plugins into instances on object mode once const cjs = createCommonJS(import.meta.url) - config.plugins = sortPlugins(config).map((pluginName: string) => { + postcssOptions.plugins = sortPlugins(postcssOptions).map((pluginName: string) => { const pluginFn = requireModule(pluginName, { paths: [cjs.__dirname] }) - const pluginOptions = config.plugins[pluginName] + const pluginOptions = postcssOptions.plugins[pluginName] if (!pluginOptions || typeof pluginFn !== 'function') { return null } return pluginFn(pluginOptions) }).filter(Boolean) } - if (!nuxt.options.webpack.postcss || !nuxt.options.postcss) { - return false - } - - let postcssOptions = cloneDeep(nuxt.options.postcss) - // Apply default plugins - if (isPureObject(postcssOptions)) { - if (Array.isArray(postcssOptions.plugins)) { - defaults(postcssOptions, defaultConfig()) - } else { - // Keep the order of default plugins - postcssOptions = merge({}, defaultConfig(), postcssOptions) - loadPlugins(postcssOptions) - } - - return { - sourceMap: nuxt.options.webpack.cssSourceMap, - ...nuxt.options.webpack.postcss, - postcssOptions - } + return { + sourceMap: nuxt.options.webpack.cssSourceMap, + ...nuxt.options.webpack.postcss, + postcssOptions } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 43de3db5ba..2fb6e87e81 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -744,9 +744,9 @@ importers: hash-sum: specifier: ^2.0.0 version: 2.0.0 - lodash-es: - specifier: ^4.17.21 - version: 4.17.21 + klona: + specifier: ^2.0.6 + version: 2.0.6 magic-string: specifier: ^0.30.4 version: 0.30.4 @@ -832,9 +832,6 @@ importers: '@types/hash-sum': specifier: 1.0.0 version: 1.0.0 - '@types/lodash-es': - specifier: 4.17.9 - version: 4.17.9 '@types/pify': specifier: 5.0.2 version: 5.0.2 @@ -1272,6 +1269,7 @@ packages: /@babel/highlight@7.22.20: resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==} engines: {node: '>=6.9.0'} + requiresBuild: true dependencies: '@babel/helper-validator-identifier': 7.22.20 chalk: 2.4.2 @@ -7994,6 +7992,7 @@ packages: /lodash-es@4.17.21: resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} + dev: true /lodash._reinterpolate@3.0.0: resolution: {integrity: sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==}