fix(webpack): remove lodash-es + simplify postcss resolution (#23692)

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",

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 <T> (items: T[]) {
+  return [...new Set(items)]
+}
+
 export default class VueSSRClientPlugin {
   options: PluginOptions
 

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
+  // Clone to avoid leaking config between Client and Server
-  return cloneDeep(ctx.config)
+  return klona(ctx.config)
 }

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,32 +34,26 @@ export const getPostcssConfig = (nuxt: Nuxt) => {
     return typeof order === 'function' ? order(names, orderPresets) : (order || names)
   }
 
-  function loadPlugins (config: any) {
-    if (!isPureObject(config.plugins)) { return }
-
-    // Map postcss plugins into instances on object mode once
-    const cjs = createCommonJS(import.meta.url)
-    config.plugins = sortPlugins(config).map((pluginName: string) => {
-      const pluginFn = requireModule(pluginName, { paths: [cjs.__dirname] })
-      const pluginOptions = config.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)
+  const postcssOptions = defu({}, nuxt.options.postcss, {
-  // Apply default plugins
+    sourceMap: nuxt.options.webpack.cssSourceMap,
-  if (isPureObject(postcssOptions)) {
+    // Array, String or Function
-    if (Array.isArray(postcssOptions.plugins)) {
+    order: 'autoprefixerAndCssnanoLast'
-      defaults(postcssOptions, defaultConfig())
+  })
-    } else {
+
   // Keep the order of default plugins
-      postcssOptions = merge({}, defaultConfig(), postcssOptions)
+  if (!Array.isArray(postcssOptions.plugins) && isPureObject(postcssOptions.plugins)) {
-      loadPlugins(postcssOptions)
+    // Map postcss plugins into instances on object mode once
+    const cjs = createCommonJS(import.meta.url)
+    postcssOptions.plugins = sortPlugins(postcssOptions).map((pluginName: string) => {
+      const pluginFn = requireModule(pluginName, { paths: [cjs.__dirname] })
+      const pluginOptions = postcssOptions.plugins[pluginName]
+      if (!pluginOptions || typeof pluginFn !== 'function') { return null }
+      return pluginFn(pluginOptions)
+    }).filter(Boolean)
   }
 
   return {
@@ -77,4 +62,3 @@ export const getPostcssConfig = (nuxt: Nuxt) => {
     postcssOptions
   }
 }
-}

pnpm-lock.yaml

@@ -744,9 +744,9 @@ importers:
       hash-sum:
         specifier: ^2.0.0
         version: 2.0.0
-      lodash-es:
+      klona:
-        specifier: ^4.17.21
+        specifier: ^2.0.6
-        version: 4.17.21
+        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==}