webpack 5.108.3 → 5.109.0

package/lib/css/CssGenerator.js

@@ -48,7 +48,8 @@ const CSS_TYPE_PREFIX = `${CSS_TYPE}/`;
 /** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
 /** @typedef {import("../Dependency")} Dependency */
 /** @typedef {import("../DependencyTemplate").CssData} CssData */
-/** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} DependencyTemplateContext */
+/** @typedef {import("../DependencyTemplate").DependencyTemplateContext} DependencyTemplateContext */
+/** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} CssDependencyTemplateContext */
 /** @typedef {import("../Generator").GenerateContext} GenerateContext */
 /** @typedef {import("../Generator").UpdateHashContext} UpdateHashContext */
 /** @typedef {import("../Module").BuildInfo} BuildInfo */
@@ -191,28 +192,39 @@ class CssGenerator extends Generator {
 
 	/**
 	 * Processes the provided module.
-	 * @param {NormalModule} module the current module
 	 * @param {Dependency} dependency the dependency to generate
-	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
 	 * @param {ReplaceSource} source the current replace source which can be modified
-	 * @param {GenerateContext & { cssData: CssData }} generateContext the render context
+	 * @param {DependencyTemplateContext & { cssData: CssData, type: string }} templateContext the template context (shared across all dependencies of the module)
 	 * @returns {void}
 	 */
-	sourceDependency(module, dependency, initFragments, source, generateContext) {
+	sourceDependency(dependency, source, templateContext) {
 		const constructor =
 			/** @type {DependencyConstructor} */
 			(dependency.constructor);
-		const template = generateContext.dependencyTemplates.get(constructor);
+		const template = templateContext.dependencyTemplates.get(constructor);
 		if (!template) {
 			throw new Error(
 				`No template for dependency: ${dependency.constructor.name}`
 			);
 		}
 
-		/** @type {DependencyTemplateContext} */
+		template.apply(dependency, source, templateContext);
+	}
+
+	/**
+	 * Processes the provided module.
+	 * @param {NormalModule} module the module to generate
+	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
+	 * @param {ReplaceSource} source the current replace source which can be modified
+	 * @param {GenerateContext & { cssData: CssData }} generateContext the generateContext
+	 * @returns {void}
+	 */
+	sourceModule(module, initFragments, source, generateContext) {
+		// Only `dependency` varies across `template.apply` calls, so one context
+		// (and one lazy `chunkInitFragments` getter) serves the whole module.
 		/** @type {InitFragment<GenerateContext>[] | undefined} */
 		let chunkInitFragments;
-		/** @type {DependencyTemplateContext} */
+		/** @type {CssDependencyTemplateContext} */
 		const templateContext = {
 			runtimeTemplate: generateContext.runtimeTemplate,
 			dependencyTemplates: generateContext.dependencyTemplates,
@@ -244,37 +256,13 @@ class CssGenerator extends Generator {
 			}
 		};
 
-		template.apply(dependency, source, templateContext);
-	}
-
-	/**
-	 * Processes the provided module.
-	 * @param {NormalModule} module the module to generate
-	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
-	 * @param {ReplaceSource} source the current replace source which can be modified
-	 * @param {GenerateContext & { cssData: CssData }} generateContext the generateContext
-	 * @returns {void}
-	 */
-	sourceModule(module, initFragments, source, generateContext) {
 		for (const dependency of module.dependencies) {
-			this.sourceDependency(
-				module,
-				dependency,
-				initFragments,
-				source,
-				generateContext
-			);
+			this.sourceDependency(dependency, source, templateContext);
 		}
 
 		if (module.presentationalDependencies !== undefined) {
 			for (const dependency of module.presentationalDependencies) {
-				this.sourceDependency(
-					module,
-					dependency,
-					initFragments,
-					source,
-					generateContext
-				);
+				this.sourceDependency(dependency, source, templateContext);
 			}
 		}
 	}
@@ -414,20 +402,28 @@ class CssGenerator extends Generator {
 						return new RawSource("");
 					}
 
+					const exportsInfo =
+						generateContext.moduleGraph.getExportsInfo(module);
+
+					/**
+					 * @param {string} name export name
+					 * @returns {string | false} used export name when the export is referenced
+					 */
+					const getUsedExportName = (name) =>
+						/** @type {string | false} */ (
+							exportsInfo
+								.getExportInfo(name)
+								.getUsedName(name, generateContext.runtime)
+						);
+
 					if (generateContext.concatenationScope) {
 						const source = new ConcatSource();
 						/** @type {Set<string>} */
 						const usedIdentifiers = new Set();
 						const { RESERVED_IDENTIFIER } = getPropertyName();
-						const exportsInfo =
-							generateContext.moduleGraph.getExportsInfo(module);
 
 						if (defaultExport) {
-							const usedName = /** @type {string | false} */ (
-								exportsInfo
-									.getExportInfo("default")
-									.getUsedName("default", generateContext.runtime)
-							);
+							const usedName = getUsedExportName("default");
 							if (usedName) {
 								let identifier = Template.toIdentifier(usedName);
 								if (RESERVED_IDENTIFIER.has(identifier)) {
@@ -447,16 +443,8 @@ class CssGenerator extends Generator {
 						}
 
 						for (const [name, v] of cssData.exports) {
-							const usedName = /** @type {string | false} */ (
-								exportsInfo
-									.getExportInfo(name)
-									.getUsedName(name, generateContext.runtime)
-							);
-							if (!usedName) {
-								continue;
-							}
-
-							let identifier = Template.toIdentifier(usedName);
+							const usedName = getUsedExportName(name);
+							let identifier = Template.toIdentifier(usedName || name);
 							if (RESERVED_IDENTIFIER.has(identifier)) {
 								identifier = `_${identifier}`;
 							}
@@ -481,9 +469,7 @@ class CssGenerator extends Generator {
 
 					const needNsObj =
 						this._esModule &&
-						generateContext.moduleGraph
-							.getExportsInfo(module)
-							.otherExportsInfo.getUsed(generateContext.runtime) !==
+						exportsInfo.otherExportsInfo.getUsed(generateContext.runtime) !==
 							UsageState.Unused;
 
 					if (needNsObj) {
@@ -495,7 +481,25 @@ class CssGenerator extends Generator {
 					// Should be after `concatenationScope` to allow module inlining
 					generateContext.runtimeRequirements.add(RuntimeGlobals.module);
 
-					if (!isCssModule && !needNsObj) {
+					const defaultUsedName = defaultExport
+						? getUsedExportName("default")
+						: false;
+
+					/** @type {string[]} */
+					const exportEntries = [];
+					for (const [name, v] of cssData.exports) {
+						const exportKey = getUsedExportName(name) || name;
+						exportEntries.push(
+							`\t${JSON.stringify(exportKey)}: ${JSON.stringify(v)}`
+						);
+					}
+
+					if (
+						!isCssModule &&
+						!needNsObj &&
+						exportEntries.length === 0 &&
+						defaultUsedName
+					) {
 						return new ConcatSource(
 							`${module.moduleArgument}.exports = `,
 							/** @type {Source} */ (defaultExport)
@@ -509,21 +513,14 @@ class CssGenerator extends Generator {
 						}.exports = {\n`
 					);
 
-					if (defaultExport) {
+					if (defaultUsedName) {
 						result.add('\t"default": ');
-						result.add(defaultExport);
-						if (cssData.exports.size > 0) {
+						result.add(/** @type {Source} */ (defaultExport));
+						if (exportEntries.length > 0) {
 							result.add(",\n");
 						}
 					}
 
-					/** @type {string[]} */
-					const exportEntries = [];
-					for (const [name, v] of cssData.exports) {
-						exportEntries.push(
-							`\t${JSON.stringify(name)}: ${JSON.stringify(v)}`
-						);
-					}
 					if (exportEntries.length > 0) {
 						result.add(exportEntries.join(",\n"));
 					}
@@ -623,10 +620,13 @@ class CssGenerator extends Generator {
 
 		let hasJs = false;
 		let hasCssText = false;
+		// Uncached per call (#20800) — the common link case stops scanning once
+		// js is seen; `hasCssText` only matters for exports-only / non-link.
+		const needsCssText = this._exportsOnly || exportType !== "link";
 		const connections = this._moduleGraph.getIncomingConnections(module);
 
 		for (const connection of connections) {
-			if (hasJs && hasCssText) break;
+			if (hasJs && (hasCssText || !needsCssText)) break;
 			if (
 				exportType === "link" &&
 				connection.dependency instanceof CssImportDependency
@@ -704,15 +704,15 @@ class CssGenerator extends Generator {
 					}
 					return 0;
 				}
-				const exports = cssData.exports;
-				/** @type {Record<string, string>} */
-				const exportsObj = {};
-				for (const [key, value] of exports) {
-					exportsObj[key] = value;
+				// `JSON.stringify({...exports}).length` computed entry-wise, without
+				// materializing the object or the full string.
+				let length = 2 + (cssData.exports.size - 1);
+				for (const [key, value] of cssData.exports) {
+					length +=
+						JSON.stringify(key).length + 1 + JSON.stringify(value).length;
 				}
-				const stringifiedExports = JSON.stringify(exportsObj);
 
-				return stringifiedExports.length + 42;
+				return length + 42;
 			}
 			case CSS_TEXT_TYPE:
 			case CSS_TYPE: {

package/lib/css/CssLoadingRuntimeModule.js

@@ -99,7 +99,9 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 		const withPreload =
 			this._runtimeRequirements.has(RuntimeGlobals.preloadChunkHandlers) &&
 			(environment.document || isNeutralPlatform) &&
-			chunk.hasChildByOrder(chunkGraph, "preload", true, chunkHasCss);
+			(chunk.hasChildByOrder(chunkGraph, "preload", true, chunkHasCss) ||
+				// `parser.javascript.dynamicImportCssPreload` — CSS-only preload order.
+				chunk.hasChildByOrder(chunkGraph, "cssPreload", true, chunkHasCss));
 
 		const { linkPreload, linkPrefetch, createStylesheet, linkInsert } =
 			CssLoadingRuntimeModule.getCompilationHooks(compilation);
@@ -295,6 +297,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 																"error.name = 'ChunkLoadError';",
 																"error.type = errorType;",
 																"error.request = realHref;",
+																"error.event = event;",
 																"installedChunkData[1](error);"
 															]),
 															"} else {",
@@ -548,6 +551,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 														"error.name = 'ChunkLoadError';",
 														"error.type = errorType;",
 														"error.request = realHref;",
+														"error.event = event;",
 														"reject(error);"
 													]),
 													"} else {",

package/lib/css/CssModulesPlugin.js

@@ -39,6 +39,7 @@ const { compareModulesByFullName } = require("../util/comparators");
 const createHash = require("../util/createHash");
 const createHooksRegistry = require("../util/createHooksRegistry");
 const { getUndoPath } = require("../util/identifier");
+const implicitTypeLoaderFallback = require("../util/implicitTypeLoaderFallback");
 const memoize = require("../util/memoize");
 const { digestNonNumericOnlyWithFull } = require("../util/nonNumericOnlyHash");
 const {
@@ -133,6 +134,42 @@ const getCssInjectStyleRuntimeModule = memoize(() =>
  */
 const publicPathPlaceholderPlans = new WeakMap();
 
+/**
+ * Memoized inheritance chain per module, revalidated against its source
+ * fields — `updateCacheModule` reassigns them on watch rebuilds.
+ * @type {WeakMap<CssModule, { cssLayer: CssModule["cssLayer"], supports: CssModule["supports"], media: CssModule["media"], inheritance: CssModule["inheritance"], chain: Inheritance }>}
+ */
+const moduleInheritanceCache = new WeakMap();
+
+/**
+ * Gets the memoized inheritance chain of a css module.
+ * @param {CssModule} module css module
+ * @returns {Inheritance} inheritance chain including the module's own entry
+ */
+const getModuleInheritance = (module) => {
+	const entry = moduleInheritanceCache.get(module);
+	if (
+		entry !== undefined &&
+		entry.cssLayer === module.cssLayer &&
+		entry.supports === module.supports &&
+		entry.media === module.media &&
+		entry.inheritance === module.inheritance
+	) {
+		return entry.chain;
+	}
+	/** @type {Inheritance} */
+	const chain = [[module.cssLayer, module.supports, module.media]];
+	if (module.inheritance) chain.push(...module.inheritance);
+	moduleInheritanceCache.set(module, {
+		cssLayer: module.cssLayer,
+		supports: module.supports,
+		media: module.media,
+		inheritance: module.inheritance,
+		chain
+	});
+	return chain;
+};
+
 /**
  * Locate the public-path placeholders in a materialized module source.
  * @param {string} content materialized module source
@@ -195,9 +232,21 @@ class CssModulesPlugin {
 	 * @returns {void}
 	 */
 	apply(compiler) {
+		// `"auto"` marks implicit enablement (no user rule for CSS files) — see
+		// `applyExperimentsDefaults`. Only then loaders win over the built-in type.
+		// TODO webpack 6: css defaults to `true`, drop this implicit-only fallback.
+		const implicitlyEnabled = compiler.options.experiments.css === "auto";
 		compiler.hooks.compilation.tap(
 			PLUGIN_NAME,
 			(compilation, { normalModuleFactory }) => {
+				if (implicitlyEnabled) {
+					implicitTypeLoaderFallback(
+						normalModuleFactory,
+						PLUGIN_NAME,
+						/\.css$/i,
+						CSS_MODULE_TYPE_AUTO
+					);
+				}
 				const hooks = CssModulesPlugin.getCompilationHooks(compilation);
 				compilation.dependencyFactories.set(
 					CssImportDependency,
@@ -857,55 +906,55 @@ class CssModulesPlugin {
 			return this.getModulesInOrder(chunk, modules, compilation);
 		};
 
-		return /** @type {CssModule[]} */ ([
-			...orderModules(
-				chunkGraph.getOrderedChunkModulesIterableBySourceType(
-					chunk,
-					CSS_IMPORT_TYPE,
-					compareModulesByFullName(compilation.compiler)
-				)
-			),
-			...orderModules(
-				chunkGraph.getOrderedChunkModulesIterableBySourceType(
-					chunk,
-					CSS_TYPE,
-					compareModulesByFullName(compilation.compiler)
-				)
-			).map((module) => {
+		const comparator = compareModulesByFullName(compilation.compiler);
+		const importModules = orderModules(
+			chunkGraph.getOrderedChunkModulesIterableBySourceType(
+				chunk,
+				CSS_IMPORT_TYPE,
+				comparator
+			)
+		);
+		const cssModules = orderModules(
+			chunkGraph.getOrderedChunkModulesIterableBySourceType(
+				chunk,
+				CSS_TYPE,
+				comparator
+			)
+		);
+		for (const module of cssModules) {
+			if (
+				typeof (
+					/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
+				) !== "undefined"
+			) {
 				if (
-					typeof (
+					typeof charset !== "undefined" &&
+					charset !==
 						/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
-					) !== "undefined"
 				) {
-					if (
-						typeof charset !== "undefined" &&
-						charset !==
+					const err = new WebpackError(
+						`Conflicting @charset at-rules detected: the module ${module.readableIdentifier(
+							compilation.requestShortener
+						)} (in chunk ${chunk.name || chunk.id}) specifies "${
 							/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
-					) {
-						const err = new WebpackError(
-							`Conflicting @charset at-rules detected: the module ${module.readableIdentifier(
-								compilation.requestShortener
-							)} (in chunk ${chunk.name || chunk.id}) specifies "${
-								/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
-							}", but "${charset}" was expected, all modules must use the same character set`
-						);
+						}", but "${charset}" was expected, all modules must use the same character set`
+					);
 
-						err.chunk = chunk;
-						err.module = module;
-						err.hideStack = true;
+					err.chunk = chunk;
+					err.module = module;
+					err.hideStack = true;
 
-						compilation.warnings.push(err);
-					}
+					compilation.warnings.push(err);
+				}
 
-					if (typeof charset === "undefined") {
-						charset = /** @type {CssModuleBuildInfo} */ (module.buildInfo)
-							.charset;
-					}
+				if (typeof charset === "undefined") {
+					charset = /** @type {CssModuleBuildInfo} */ (module.buildInfo)
+						.charset;
 				}
+			}
+		}
 
-				return module;
-			})
-		]);
+		return /** @type {CssModule[]} */ ([...importModules, ...cssModules]);
 	}
 
 	/**
@@ -920,11 +969,7 @@ class CssModulesPlugin {
 			renderContext;
 		const cacheEntry = moduleFactoryCache.get(moduleSourceContent);
 
-		/** @type {Inheritance} */
-		const inheritance = [[module.cssLayer, module.supports, module.media]];
-		if (module.inheritance) {
-			inheritance.push(...module.inheritance);
-		}
+		const inheritance = getModuleInheritance(module);
 
 		/** @type {CachedSource} */
 		let source;
@@ -932,14 +977,8 @@ class CssModulesPlugin {
 			cacheEntry &&
 			cacheEntry.undoPath === undoPath &&
 			cacheEntry.hash === hash &&
-			cacheEntry.inheritance.length === inheritance.length &&
-			cacheEntry.inheritance.every(([layer, supports, media], i) => {
-				const item = inheritance[i];
-				if (Array.isArray(item)) {
-					return layer === item[0] && supports === item[1] && media === item[2];
-				}
-				return false;
-			})
+			// Memoized per module, so identity implies equal entries.
+			cacheEntry.inheritance === inheritance
 		) {
 			source = cacheEntry.source;
 		} else {