@nuxt/webpack-builder 3.12.3 → 3.12.4

package/README.md

@@ -34,7 +34,7 @@ It provides a number of features that make it easy to build fast, SEO-friendly,
 - 🏠 [Local Development](#local-development)
 - ⛰️ [Nuxt 2](#nuxt-2)
 - 🛟 [Professional Support](#professional-support)
-- 🔗 [Follow us](#follow-us)
+- 🔗 [Follow Us](#follow-us)
 - ⚖️ [License](#license)
 
 ---
@@ -106,7 +106,7 @@ Follow the docs to [Set Up Your Local Development Environment](https://nuxt.com/
 - Technical audit & consulting: [Nuxt Experts](https://nuxt.com/enterprise/support)
 - Custom development & more: [Nuxt Agencies Partners](https://nuxt.com/enterprise/agencies)
 
-## <a name="follow-us">🔗 Follow us</a>
+## <a name="follow-us">🔗 Follow Us</a>
 
 <p valign="center">
   <a href="https://chat.nuxt.dev"><img width="20px" src="https://github.com/nuxt/nuxt/tree/main/.github/assets/discord.svg" alt="Discord"></a>&nbsp;&nbsp;<a href="https://twitter.nuxt.dev"><img width="20px" src="https://github.com/nuxt/nuxt/tree/main/.github/assets/twitter.svg" alt="Twitter"></a>&nbsp;&nbsp;<a href="https://github.nuxt.dev"><img width="20px" src="https://github.com/nuxt/nuxt/tree/main/.github/assets/github.svg" alt="GitHub"></a>

package/dist/index.mjs

@@ -5,7 +5,7 @@ import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import { defu } from 'defu';
 import { parseURL, parseQuery, joinURL } from 'ufo';
-import { useNuxt, logger, requireModule } from '@nuxt/kit';
+import { useNuxt, logger, tryResolveModule, requireModule } from '@nuxt/kit';
 import { pathToFileURL, fileURLToPath } from 'node:url';
 import { createUnplugin } from 'unplugin';
 import { isAbsolute, relative, join, resolve, normalize, dirname } from 'pathe';
@@ -13,7 +13,7 @@ import { walk } from 'estree-walker';
 import MagicString from 'magic-string';
 import { hash } from 'ohash';
 import escapeRE from 'escape-string-regexp';
-import { findStaticImports, parseStaticImport } from 'mlly';
+import { findStaticImports, parseStaticImport, interopDefault } from 'mlly';
 import { createFsFromVolume, Volume } from 'memfs';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 import querystring from 'node:querystring';
@@ -370,12 +370,12 @@ function createWebpackConfigContext(nuxt) {
     transpile: []
   };
 }
-function applyPresets(ctx, presets) {
+async function applyPresets(ctx, presets) {
   for (const preset of toArray(presets)) {
     if (Array.isArray(preset)) {
-      preset[0](ctx, preset[1]);
+      await preset[0](ctx, preset[1]);
     } else {
-      preset(ctx);
+      await preset(ctx);
     }
   }
 }
@@ -449,8 +449,8 @@ class WarningIgnorePlugin {
   }
 }
 
-function base(ctx) {
-  applyPresets(ctx, [
+async function base(ctx) {
+  await applyPresets(ctx, [
     baseAlias,
     baseConfig,
     basePlugins,
@@ -694,29 +694,11 @@ function pug(ctx) {
 }
 
 const isPureObject = (obj) => obj !== null && !Array.isArray(obj) && typeof obj === "object";
-const ensureItemIsLast = (item) => (arr) => {
-  const index = arr.indexOf(item);
-  if (index !== -1) {
-    arr.splice(index, 1);
-    arr.push(item);
-  }
-  return arr;
-};
-const orderPresets = {
-  cssnanoLast: ensureItemIsLast("cssnano"),
-  autoprefixerLast: ensureItemIsLast("autoprefixer"),
-  autoprefixerAndCssnanoLast(names) {
-    return orderPresets.cssnanoLast(orderPresets.autoprefixerLast(names));
-  }
-};
-const getPostcssConfig = (nuxt) => {
-  function sortPlugins({ plugins, order }) {
-    const names = Object.keys(plugins);
-    if (typeof order === "string") {
-      order = orderPresets[order];
-    }
-    return typeof order === "function" ? order(names, orderPresets) : order || names;
-  }
+function sortPlugins({ plugins, order }) {
+  const names = Object.keys(plugins);
+  return typeof order === "function" ? order(names) : order || names;
+}
+async function getPostcssConfig(nuxt) {
   if (!nuxt.options.webpack.postcss || !nuxt.options.postcss) {
     return false;
   }
@@ -736,30 +718,39 @@ const getPostcssConfig = (nuxt) => {
        */
       "postcss-url": {}
     },
-    sourceMap: nuxt.options.webpack.cssSourceMap,
-    // Array, String or Function
-    order: "autoprefixerAndCssnanoLast"
+    sourceMap: nuxt.options.webpack.cssSourceMap
   });
   if (!Array.isArray(postcssOptions.plugins) && isPureObject(postcssOptions.plugins)) {
     const cwd = fileURLToPath(new URL(".", import.meta.url));
-    postcssOptions.plugins = sortPlugins(postcssOptions).map((pluginName) => {
-      const pluginFn = requireModule(pluginName, { paths: [cwd] });
+    const plugins = [];
+    for (const pluginName of sortPlugins(postcssOptions)) {
       const pluginOptions = postcssOptions.plugins[pluginName];
-      if (!pluginOptions || typeof pluginFn !== "function") {
-        return null;
+      if (!pluginOptions) {
+        continue;
       }
-      return pluginFn(pluginOptions);
-    }).filter(Boolean);
+      const path = await tryResolveModule(pluginName, nuxt.options.modulesDir);
+      let pluginFn;
+      if (path) {
+        pluginFn = await import(pathToFileURL(path).href).then(interopDefault);
+      } else {
+        console.warn(`[nuxt] could not import postcss plugin \`${pluginName}\` with ESM. Please report this as a bug.`);
+        pluginFn = requireModule(pluginName, { paths: [cwd] });
+      }
+      if (typeof pluginFn === "function") {
+        plugins.push(pluginFn(pluginOptions));
+      }
+    }
+    postcssOptions.plugins = plugins;
   }
   return {
     sourceMap: nuxt.options.webpack.cssSourceMap,
     ...nuxt.options.webpack.postcss,
     postcssOptions
   };
-};
+}
 
-function style(ctx) {
-  applyPresets(ctx, [
+async function style(ctx) {
+  await applyPresets(ctx, [
     loaders,
     extractCSS,
     minimizer
@@ -784,21 +775,21 @@ function extractCSS(ctx) {
     ...config === true ? {} : config
   }));
 }
-function loaders(ctx) {
-  ctx.config.module.rules.push(createdStyleRule("css", /\.css$/i, null, ctx));
-  ctx.config.module.rules.push(createdStyleRule("postcss", /\.p(ost)?css$/i, null, ctx));
+async function loaders(ctx) {
+  ctx.config.module.rules.push(await createdStyleRule("css", /\.css$/i, null, ctx));
+  ctx.config.module.rules.push(await createdStyleRule("postcss", /\.p(ost)?css$/i, null, ctx));
   const lessLoader = { loader: "less-loader", options: ctx.userConfig.loaders.less };
-  ctx.config.module.rules.push(createdStyleRule("less", /\.less$/i, lessLoader, ctx));
+  ctx.config.module.rules.push(await createdStyleRule("less", /\.less$/i, lessLoader, ctx));
   const sassLoader = { loader: "sass-loader", options: ctx.userConfig.loaders.sass };
-  ctx.config.module.rules.push(createdStyleRule("sass", /\.sass$/i, sassLoader, ctx));
+  ctx.config.module.rules.push(await createdStyleRule("sass", /\.sass$/i, sassLoader, ctx));
   const scssLoader = { loader: "sass-loader", options: ctx.userConfig.loaders.scss };
-  ctx.config.module.rules.push(createdStyleRule("scss", /\.scss$/i, scssLoader, ctx));
+  ctx.config.module.rules.push(await createdStyleRule("scss", /\.scss$/i, scssLoader, ctx));
   const stylusLoader = { loader: "stylus-loader", options: ctx.userConfig.loaders.stylus };
-  ctx.config.module.rules.push(createdStyleRule("stylus", /\.styl(us)?$/i, stylusLoader, ctx));
+  ctx.config.module.rules.push(await createdStyleRule("stylus", /\.styl(us)?$/i, stylusLoader, ctx));
 }
-function createdStyleRule(lang, test, processorLoader, ctx) {
+async function createdStyleRule(lang, test, processorLoader, ctx) {
   const styleLoaders = [
-    createPostcssLoadersRule(ctx),
+    await createPostcssLoadersRule(ctx),
     processorLoader
   ].filter(Boolean);
   ctx.userConfig.loaders.css.importLoaders = ctx.userConfig.loaders.cssModules.importLoaders = styleLoaders.length;
@@ -844,11 +835,11 @@ function createCssLoadersRule(ctx, cssLoaderOptions) {
     cssLoader
   ];
 }
-function createPostcssLoadersRule(ctx) {
+async function createPostcssLoadersRule(ctx) {
   if (!ctx.options.postcss) {
     return;
   }
-  const config = getPostcssConfig(ctx.nuxt);
+  const config = await getPostcssConfig(ctx.nuxt);
   if (!config) {
     return;
   }
@@ -1076,8 +1067,8 @@ function vue(ctx) {
   }));
 }
 
-function nuxt(ctx) {
-  applyPresets(ctx, [
+async function nuxt(ctx) {
+  await applyPresets(ctx, [
     base,
     assets,
     esbuild,
@@ -1087,10 +1078,10 @@ function nuxt(ctx) {
   ]);
 }
 
-function client(ctx) {
+async function client(ctx) {
   ctx.name = "client";
   ctx.isClient = true;
-  applyPresets(ctx, [
+  await applyPresets(ctx, [
     nuxt,
     clientPlugins,
     clientOptimization,
@@ -1212,10 +1203,10 @@ function node(ctx) {
 }
 
 const assetPattern = /\.(?:css|s[ca]ss|png|jpe?g|gif|svg|woff2?|eot|ttf|otf|webp|webm|mp4|ogv)(?:\?.*)?$/i;
-function server(ctx) {
+async function server(ctx) {
   ctx.name = "server";
   ctx.isServer = true;
-  applyPresets(ctx, [
+  await applyPresets(ctx, [
     nuxt,
     node,
     serverStandalone,
@@ -1287,12 +1278,12 @@ function serverPlugins(ctx) {
 
 const bundle = async (nuxt) => {
   registerVirtualModules();
-  const webpackConfigs = [client, ...nuxt.options.ssr ? [server] : []].map((preset) => {
+  const webpackConfigs = await Promise.all([client, ...nuxt.options.ssr ? [server] : []].map(async (preset) => {
     const ctx = createWebpackConfigContext(nuxt);
     ctx.userConfig = defu(nuxt.options.webpack[`$${preset.name}`], ctx.userConfig);
-    applyPresets(ctx, preset);
+    await applyPresets(ctx, preset);
     return getWebpackConfig(ctx);
-  });
+  }));
   await nuxt.callHook("webpack:config", webpackConfigs);
   const mfs = nuxt.options.dev ? createMFS() : null;
   for (const config of webpackConfigs) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/webpack-builder",
-  "version": "3.12.3",
+  "version": "3.12.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",
@@ -26,9 +26,9 @@
     "autoprefixer": "^10.4.19",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
-    "cssnano": "^7.0.3",
+    "cssnano": "^7.0.4",
     "defu": "^6.1.4",
-    "esbuild-loader": "^4.2.0",
+    "esbuild-loader": "^4.2.2",
     "escape-string-regexp": "^5.0.0",
     "estree-walker": "^3.0.3",
     "file-loader": "^6.2.0",
@@ -51,19 +51,19 @@
     "pug-plain-loader": "^1.1.0",
     "std-env": "^3.7.0",
     "time-fix-plugin": "^2.0.7",
-    "ufo": "^1.5.3",
-    "unenv": "^1.9.0",
+    "ufo": "^1.5.4",
+    "unenv": "^1.10.0",
     "unplugin": "^1.11.0",
     "url-loader": "^4.1.1",
     "vue-bundle-renderer": "^2.1.0",
     "vue-loader": "^17.4.2",
-    "webpack": "^5.92.1",
+    "webpack": "^5.93.0",
     "webpack-bundle-analyzer": "^4.10.2",
-    "webpack-dev-middleware": "^7.2.1",
+    "webpack-dev-middleware": "^7.3.0",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-virtual-modules": "^0.6.2",
     "webpackbar": "^6.0.1",
-    "@nuxt/kit": "3.12.3"
+    "@nuxt/kit": "3.12.4"
   },
   "devDependencies": {
     "@types/hash-sum": "1.0.2",
@@ -72,8 +72,8 @@
     "@types/webpack-bundle-analyzer": "4.7.0",
     "@types/webpack-hot-middleware": "2.25.9",
     "unbuild": "latest",
-    "vue": "3.4.31",
-    "@nuxt/schema": "3.12.3"
+    "vue": "3.4.32",
+    "@nuxt/schema": "3.12.4"
   },
   "peerDependencies": {
     "vue": "^3.3.4"