@nuxt/webpack-builder-nightly 4.3.0-29450657.a9b0ebbb → 4.3.0-29454382.becfbee6

package/dist/index.mjs

@@ -3,12 +3,18 @@ import { fromNodeMiddleware, defineEventHandler, handleCors, getRequestHeader, c
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import { defu } from 'defu';
-import { joinURL } from 'ufo';
-import { logger, tryImportModule, directoryToURL, resolveAlias, useNitro, useNuxt } from '@nuxt/kit';
+import { withTrailingSlash, parseURL, joinURL } from 'ufo';
+import { resolveAlias, useNitro, logger, tryImportModule, directoryToURL, useNuxt } from '@nuxt/kit';
 import { createUnplugin } from 'unplugin';
 import MagicString from 'magic-string';
 import { webpack, WebpackBarPlugin, builder, MiniCssExtractPlugin, TsCheckerPlugin } from '#builder';
-import { join, resolve, basename, normalize, relative, isAbsolute } from 'pathe';
+import { existsSync, readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { pathToFileURL } from 'node:url';
+import { isAbsolute, resolve, relative, join, basename, normalize } from 'pathe';
+import { genArrayFromRaw, genObjectFromRawEntries, genString } from 'knitwork';
+import { parse, compileStyle } from '@vue/compiler-sfc';
+import { createHash } from 'node:crypto';
 import { createFsFromVolume, Volume } from 'memfs';
 import querystring from 'node:querystring';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
@@ -17,7 +23,6 @@ import TimeFixPlugin from 'time-fix-plugin';
 import FriendlyErrorsWebpackPlugin from '@nuxt/friendly-errors-webpack-plugin';
 import escapeRegExp from 'escape-string-regexp';
 import { isTest } from 'std-env';
-import { genObjectFromRawEntries, genString } from 'knitwork';
 import { EsbuildPlugin } from 'esbuild-loader';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import createResolver from 'postcss-import-resolver';
@@ -95,6 +100,434 @@ if (typeof ${ensureChunk} !== "undefined") {
   }
 }
 
+const CSS_URL_RE = /url\((['"]?)(\/[^)]+?)\1\)/g;
+const isVueFile = (id) => /\.vue(?:\?|$)/.test(id);
+const isCSSLike = (name) => /\.(?:css|scss|sass|less|styl(?:us)?|postcss|pcss)(?:\?|$)/.test(name);
+function normalizePath(nuxt, id) {
+  if (!id) {
+    return null;
+  }
+  const { pathname } = parseURL(decodeURIComponent(pathToFileURL(id).href));
+  const rel = relative(nuxt.options.srcDir, pathname);
+  if (rel.startsWith("..")) {
+    return null;
+  }
+  return rel;
+}
+function resolveFilePath(id) {
+  if (!id) {
+    return null;
+  }
+  return parseURL(decodeURIComponent(pathToFileURL(id).href)).pathname || null;
+}
+function sanitizeStyleAssetName(rel) {
+  return rel.replace(/[\\/]/g, "_").replace(/\.{2,}/g, "_");
+}
+function normalizeCSSContent(css) {
+  return css.trim().replace(/(--[^:]+):\s*'([^']*)'/g, '$1:"$2"').replace(/:\s+/g, ":").replace(/\s*\{\s*/g, "{").replace(/;\s*\}/g, "}").replace(/\s*\}\s*/g, "}");
+}
+function extractVueStyles(filePath) {
+  try {
+    const src = readFileSync(filePath, "utf8");
+    const { descriptor } = parse(src, { filename: filePath });
+    const styles = [];
+    const scopeId = createHash("sha256").update(filePath).digest("hex").slice(0, 8);
+    for (let i = 0; i < descriptor.styles.length; i++) {
+      const style = descriptor.styles[i];
+      const result = compileStyle({
+        source: style.content,
+        filename: filePath,
+        id: `data-v-${scopeId}`,
+        scoped: style.scoped
+      });
+      if (!result.errors.length && result.code) {
+        styles.push(normalizeCSSContent(result.code));
+      }
+    }
+    return styles;
+  } catch {
+    return [];
+  }
+}
+class SSRStylesPlugin {
+  nuxt;
+  clientCSSByIssuer = /* @__PURE__ */ new Map();
+  chunksWithInlinedCSS = /* @__PURE__ */ new Set();
+  globalCSSPaths = /* @__PURE__ */ new Set();
+  constructor(nuxt) {
+    this.nuxt = nuxt;
+    this.globalCSSPaths = this.resolveGlobalCSS();
+    nuxt.hook("build:manifest", (manifest) => {
+      for (const [id, chunk] of Object.entries(manifest)) {
+        if (chunk.isEntry && chunk.src) {
+          this.chunksWithInlinedCSS.add(chunk.src);
+        } else if (this.chunksWithInlinedCSS.has(id)) {
+          chunk.css &&= [];
+        }
+        if (chunk.css?.length) {
+          chunk.css = chunk.css.filter((cssPath) => {
+            for (const globalPath of this.globalCSSPaths) {
+              if (cssPath.includes(globalPath.split("/").pop() || "")) {
+                return false;
+              }
+            }
+            return true;
+          });
+        }
+      }
+    });
+  }
+  shouldInline(mod) {
+    const shouldInline = this.nuxt.options.features.inlineStyles;
+    if (typeof shouldInline === "boolean") {
+      return shouldInline;
+    }
+    return shouldInline(mod.identifier());
+  }
+  escapeTemplateLiteral(str) {
+    return str.replace(/[`\\$]/g, (m) => m === "$" ? "\\$" : `\\${m}`);
+  }
+  isBuildAsset(url) {
+    const buildDir = withTrailingSlash(this.nuxt.options.app.buildAssetsDir || "/_nuxt/");
+    return url.startsWith(buildDir);
+  }
+  isPublicAsset(url, nitro) {
+    const cleaned = url.replace(/[?#].*$/, "");
+    for (const dir of nitro.options.publicAssets) {
+      const base = withTrailingSlash(dir.baseURL || "/");
+      if (!url.startsWith(base)) {
+        continue;
+      }
+      const path = cleaned.replace(base, withTrailingSlash(dir.dir));
+      if (existsSync(path)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  rewriteStyle(css, nitro) {
+    let changed = false;
+    let needsPublicAsset = false;
+    let needsBuildAsset = false;
+    let lastIndex = 0;
+    let out = "`";
+    for (const match of css.matchAll(CSS_URL_RE)) {
+      const index = match.index ?? 0;
+      const before = css.slice(lastIndex, index);
+      if (before) {
+        out += this.escapeTemplateLiteral(before);
+      }
+      const full = match[0];
+      const rawUrl = match[2] || "";
+      const stripped = rawUrl.replace(/[?#].*$/, "");
+      if (this.isPublicAsset(stripped, nitro)) {
+        needsPublicAsset = true;
+        changed = true;
+        out += "${publicAssetsURL(" + JSON.stringify(rawUrl) + ")}";
+      } else if (this.isBuildAsset(stripped)) {
+        needsBuildAsset = true;
+        changed = true;
+        out += "${buildAssetsURL(" + JSON.stringify(rawUrl) + ")}";
+      } else {
+        out += this.escapeTemplateLiteral(full);
+      }
+      lastIndex = index + full.length;
+    }
+    const tail = css.slice(lastIndex);
+    if (tail) {
+      out += this.escapeTemplateLiteral(tail);
+    }
+    out += "`";
+    return {
+      code: changed ? out : JSON.stringify(css),
+      needsPublicAsset,
+      needsBuildAsset
+    };
+  }
+  resolveGlobalCSS() {
+    const req = createRequire(this.nuxt.options.rootDir);
+    const resolved = /* @__PURE__ */ new Set();
+    const entries = this.nuxt.options.css || [];
+    for (const entry of entries) {
+      const src = typeof entry === "string" ? entry : entry?.src;
+      if (!src) {
+        continue;
+      }
+      const path = this.resolveCSSRequest(src, req);
+      if (path) {
+        resolved.add(path);
+      }
+    }
+    return resolved;
+  }
+  resolveCSSRequest(request, req) {
+    const candidates = /* @__PURE__ */ new Set();
+    const resolved = resolveAlias(request, this.nuxt.options.alias);
+    if (isAbsolute(resolved)) {
+      candidates.add(resolved);
+    } else {
+      candidates.add(resolve(this.nuxt.options.srcDir, resolved));
+    }
+    try {
+      candidates.add(req.resolve(request));
+    } catch {
+    }
+    for (const candidate of candidates) {
+      const path = resolveFilePath(candidate);
+      if (path) {
+        return path;
+      }
+    }
+    return null;
+  }
+  normalizeResourcePath(resource) {
+    if (!resource) {
+      return null;
+    }
+    const withoutQuery = resource.split("?")[0];
+    return resolveFilePath(withoutQuery);
+  }
+  apply(compiler) {
+    if (this.nuxt.options.dev) {
+      return;
+    }
+    const isClient = compiler.options.name === "client";
+    const isServer = compiler.options.name === "server";
+    if (!isClient && !isServer) {
+      return;
+    }
+    compiler.hooks.thisCompilation.tap("SSRStylesPlugin", (compilation) => {
+      this.collectCSS(compilation);
+      if (isClient) {
+        this.removeGlobalCSSFromClient(compilation);
+      }
+      if (isServer) {
+        this.emitServerStyles(compilation);
+      }
+    });
+  }
+  emitServerStyles(compilation) {
+    const { webpack } = compilation.compiler;
+    const stage = webpack.Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE;
+    compilation.hooks.processAssets.tap({ name: "SSRStylesPlugin", stage }, () => {
+      const nitro = useNitro();
+      const collected = new Map(this.clientCSSByIssuer);
+      const entryModules = /* @__PURE__ */ new Set();
+      for (const entrypoint of compilation.entrypoints.values()) {
+        const primaryChunk = typeof entrypoint.getEntrypointChunk === "function" ? entrypoint.getEntrypointChunk() : void 0;
+        const chunks = primaryChunk ? [primaryChunk] : entrypoint.chunks;
+        for (const chunk of chunks) {
+          for (const mod of compilation.chunkGraph.getChunkModulesIterable(chunk)) {
+            if ("resource" in mod && typeof mod.resource === "string") {
+              const resolved = resolveFilePath(mod.resource);
+              if (resolved) {
+                const rel = normalizePath(this.nuxt, resolved);
+                if (rel) {
+                  entryModules.add(rel);
+                } else {
+                  entryModules.add(resolved);
+                }
+              }
+            }
+          }
+        }
+      }
+      for (const module of compilation.modules) {
+        const normal = module;
+        const resource = normal.resource;
+        if (!resource || !isVueFile(resource)) {
+          continue;
+        }
+        const rel = normalizePath(this.nuxt, resource);
+        if (!rel) {
+          continue;
+        }
+        if (collected.has(rel)) {
+          continue;
+        }
+        const vueStyles = extractVueStyles(resolveFilePath(resource) || resource);
+        if (vueStyles.length) {
+          collected.set(rel, new Set(vueStyles));
+        }
+      }
+      const emitted = {};
+      const rawSource = webpack.sources.RawSource;
+      for (const [rel, cssSet] of collected.entries()) {
+        if (!cssSet.size) {
+          continue;
+        }
+        const stylesArray = Array.from(cssSet);
+        const transformed = stylesArray.map((style) => this.rewriteStyle(style, nitro));
+        const needsPublicAssets = transformed.some((t) => t.needsPublicAsset);
+        const needsBuildAssets = transformed.some((t) => t.needsBuildAsset);
+        const imports = [];
+        if (needsPublicAssets || needsBuildAssets) {
+          const names = [];
+          if (needsBuildAssets) {
+            names.push("buildAssetsURL");
+          }
+          if (needsPublicAssets) {
+            names.push("publicAssetsURL");
+          }
+          imports.push(`import { ${names.join(", ")} } from '#internal/nuxt/paths'`);
+        }
+        const moduleSource = [
+          ...imports,
+          `export default ${genArrayFromRaw(transformed.map((t) => t.code))}`
+        ].filter(Boolean).join("\n");
+        const styleModuleName = `${sanitizeStyleAssetName(rel)}-styles.mjs`;
+        compilation.emitAsset(styleModuleName, new rawSource(moduleSource));
+        emitted[rel] = styleModuleName;
+        this.chunksWithInlinedCSS.add(rel);
+      }
+      const stylesSource = [
+        "const interopDefault = r => r.default || r || []",
+        `export default ${genObjectFromRawEntries(
+          Object.entries(emitted).map(([key, value]) => [key, `() => import('./${value}').then(interopDefault)`])
+        )}`
+      ].join("\n");
+      compilation.emitAsset("styles.mjs", new rawSource(stylesSource));
+      const entryIds = Array.from(this.chunksWithInlinedCSS).filter((id) => entryModules.has(id));
+      nitro.options.virtual["#internal/nuxt/entry-ids.mjs"] = () => `export default ${JSON.stringify(entryIds)}`;
+      nitro.options._config.virtual ||= {};
+      nitro.options._config.virtual["#internal/nuxt/entry-ids.mjs"] = nitro.options.virtual["#internal/nuxt/entry-ids.mjs"];
+    });
+  }
+  findIssuerPath(compilation, mod) {
+    let issuer = compilation.moduleGraph.getIssuer(mod);
+    while (issuer) {
+      if ("resource" in issuer && typeof issuer.resource === "string") {
+        return issuer.resource;
+      }
+      issuer = compilation.moduleGraph.getIssuer(issuer);
+    }
+    return null;
+  }
+  removeGlobalCSSFromClient(compilation) {
+    const stage = 650;
+    compilation.hooks.processAssets.tap({ name: "SSRStylesPlugin:RemoveGlobalCSS", stage }, () => {
+      for (const chunk of compilation.chunks) {
+        if (chunk.name === "nuxt-global-css") {
+          const cssAssets = [];
+          for (const file of Array.from(chunk.files)) {
+            const filename = String(file);
+            if (isCSSLike(filename)) {
+              const asset = compilation.getAsset(filename);
+              const source = asset?.source;
+              const content = source && typeof source.source === "function" ? source.source() : null;
+              const text = typeof content === "string" ? content : content instanceof Buffer ? content.toString("utf8") : "";
+              if (text) {
+                cssAssets.push(text);
+              }
+            }
+          }
+          if (cssAssets.length > 0) {
+            for (const mod of compilation.chunkGraph.getChunkModulesIterable(chunk)) {
+              const issuerPath = this.findIssuerPath(compilation, mod) || ("resource" in mod && typeof mod.resource === "string" ? mod.resource : null);
+              const normalized = normalizePath(this.nuxt, issuerPath);
+              if (!normalized) {
+                continue;
+              }
+              const set = this.clientCSSByIssuer.get(normalized) || /* @__PURE__ */ new Set();
+              for (const css of cssAssets) {
+                set.add(normalizeCSSContent(css));
+              }
+              this.clientCSSByIssuer.set(normalized, set);
+            }
+          }
+          for (const file of Array.from(chunk.files)) {
+            const filename = String(file);
+            if (isCSSLike(filename)) {
+              compilation.deleteAsset(filename);
+              chunk.files.delete(file);
+            }
+          }
+        }
+      }
+    });
+  }
+  collectCSS(compilation) {
+    const { webpack } = compilation.compiler;
+    const isServer = compilation.compiler.options.name === "server";
+    const stage = isServer ? webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS : webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER;
+    const chunkCSSMeta = /* @__PURE__ */ new Map();
+    compilation.hooks.processAssets.tap({ name: "SSRStylesPlugin", stage }, () => {
+      const cssAssetsByChunk = /* @__PURE__ */ new Map();
+      for (const chunk of compilation.chunks) {
+        const cssAssets = [];
+        const chunkCSSFiles = [];
+        for (const file of chunk.files) {
+          if (!isCSSLike(file)) {
+            continue;
+          }
+          chunkCSSFiles.push(file);
+          const asset = compilation.getAsset(file);
+          const source = asset?.source;
+          const content = source && typeof source.source === "function" ? source.source() : null;
+          const text = typeof content === "string" ? content : content instanceof Buffer ? content.toString("utf8") : "";
+          if (text) {
+            cssAssets.push(text);
+          }
+        }
+        if (chunkCSSFiles.length) {
+          const chunkCSSModules = Array.from(compilation.chunkGraph.getChunkModulesIterable(chunk));
+          chunkCSSMeta.set(chunk, { files: chunkCSSFiles, modules: chunkCSSModules });
+        }
+        if (cssAssets.length) {
+          cssAssetsByChunk.set(chunk, cssAssets);
+        }
+      }
+      for (const [chunk, cssAssets] of cssAssetsByChunk) {
+        for (const mod of compilation.chunkGraph.getChunkModulesIterable(chunk)) {
+          if (!this.shouldInline(mod)) {
+            continue;
+          }
+          const issuerPath = this.findIssuerPath(compilation, mod) || ("resource" in mod && typeof mod.resource === "string" ? mod.resource : null);
+          const normalized = normalizePath(this.nuxt, issuerPath);
+          if (!normalized) {
+            continue;
+          }
+          const set = this.clientCSSByIssuer.get(normalized) || /* @__PURE__ */ new Set();
+          for (const css of cssAssets) {
+            set.add(normalizeCSSContent(css));
+          }
+          this.clientCSSByIssuer.set(normalized, set);
+        }
+      }
+      for (const mod of compilation.modules) {
+        if (!this.shouldInline(mod)) {
+          continue;
+        }
+        const issuerPath = this.findIssuerPath(compilation, mod);
+        const normalized = normalizePath(this.nuxt, issuerPath);
+        if (!normalized) {
+          continue;
+        }
+        const cssChunks = this.getModuleCSS(mod, compilation);
+        if (!cssChunks.length) {
+          continue;
+        }
+        const set = this.clientCSSByIssuer.get(normalized) || /* @__PURE__ */ new Set();
+        set.add(cssChunks.join("\n"));
+        this.clientCSSByIssuer.set(normalized, set);
+      }
+    });
+  }
+  getModuleCSS(mod, _compilation) {
+    const cssModule = mod;
+    const cssChunks = [];
+    if (mod.type === "css/mini-extract" && Array.isArray(cssModule.content)) {
+      for (const part of cssModule.content) {
+        const css = part?.[1];
+        if (css && typeof css === "string") {
+          cssChunks.push(normalizeCSSContent(css));
+        }
+      }
+    }
+    return cssChunks;
+  }
+}
+
 function createMFS() {
   const fs = createFsFromVolume(new Volume());
   const _fs = { ...fs };
@@ -1021,7 +1454,39 @@ function clientHMR(ctx) {
   ctx.config.plugins ||= [];
   ctx.config.plugins.push(new webpack.HotModuleReplacementPlugin());
 }
-function clientOptimization(_ctx) {
+function clientOptimization(ctx) {
+  if (!ctx.nuxt.options.features.inlineStyles) {
+    return;
+  }
+  const globalCSSPaths = /* @__PURE__ */ new Set();
+  for (const css of ctx.options.css) {
+    if (typeof css === "string") {
+      const resolved = resolveAlias(css, ctx.options.alias);
+      globalCSSPaths.add(normalize(resolved));
+    }
+  }
+  if (globalCSSPaths.size > 0) {
+    ctx.config.optimization ||= {};
+    ctx.config.optimization.splitChunks ||= {};
+    ctx.config.optimization.splitChunks.cacheGroups ||= {};
+    ctx.config.optimization.splitChunks.cacheGroups.nuxtGlobalCSS = {
+      name: "nuxt-global-css",
+      chunks: "all",
+      enforce: true,
+      test: (module) => {
+        if (module.type !== "css/mini-extract") {
+          return false;
+        }
+        const identifier = normalize(module.identifier());
+        for (const globalPath of globalCSSPaths) {
+          if (identifier.includes(globalPath)) {
+            return true;
+          }
+        }
+        return false;
+      }
+    };
+  }
 }
 function clientPlugins(ctx) {
   if (!ctx.isDev && !ctx.nuxt.options.test && ctx.name === "client" && ctx.userConfig.analyze && (ctx.userConfig.analyze === true || ctx.userConfig.analyze.enabled)) {
@@ -1224,6 +1689,7 @@ const bundle = async (nuxt) => {
   }
   await nuxt.callHook(`${builder}:config`, webpackConfigs);
   const mfs = nuxt.options.dev ? createMFS() : null;
+  const ssrStylesPlugin = nuxt.options.ssr && !nuxt.options.dev && nuxt.options.features.inlineStyles ? new SSRStylesPlugin(nuxt) : null;
   for (const config of webpackConfigs) {
     config.plugins.push(DynamicBasePlugin.webpack({
       sourcemap: !!nuxt.options.sourcemap[config.name]
@@ -1231,6 +1697,9 @@ const bundle = async (nuxt) => {
     if (config.name === "client" && nuxt.options.experimental.emitRouteChunkError && nuxt.options.builder !== "@nuxt/rspack-builder") {
       config.plugins.push(new ChunkErrorPlugin());
     }
+    if (ssrStylesPlugin) {
+      config.plugins.push(ssrStylesPlugin);
+    }
   }
   await nuxt.callHook(`${builder}:configResolved`, webpackConfigs);
   const compilers = webpackConfigs.map((config) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/webpack-builder-nightly",
-  "version": "4.3.0-29450657.a9b0ebbb",
+  "version": "4.3.0-29454382.becfbee6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",
@@ -28,7 +28,8 @@
   ],
   "dependencies": {
     "@nuxt/friendly-errors-webpack-plugin": "^2.6.0",
-    "@nuxt/kit": "npm:@nuxt/kit-nightly@4.3.0-29450657.a9b0ebbb",
+    "@nuxt/kit": "npm:@nuxt/kit-nightly@4.3.0-29454382.becfbee6",
+    "@vue/compiler-sfc": "3.5.26",
     "autoprefixer": "^10.4.23",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.4",
@@ -72,7 +73,7 @@
     "webpackbar": "^7.0.0"
   },
   "devDependencies": {
-    "@nuxt/schema": "npm:@nuxt/schema-nightly@4.3.0-29450657.a9b0ebbb",
+    "@nuxt/schema": "npm:@nuxt/schema-nightly@4.3.0-29454382.becfbee6",
     "@rspack/core": "1.6.8",
     "@types/webpack-bundle-analyzer": "4.7.0",
     "@types/webpack-hot-middleware": "2.25.12",
@@ -81,7 +82,7 @@
     "vue": "3.5.26"
   },
   "peerDependencies": {
-    "nuxt": "npm:nuxt-nightly@4.3.0-29450657.a9b0ebbb",
+    "nuxt": "npm:nuxt-nightly@4.3.0-29454382.becfbee6",
     "vue": "^3.3.4"
   },
   "engines": {