webpack 5.112.0 → 5.112.2

package/lib/css/CssGenerator.js

@@ -49,6 +49,7 @@ const CSS_TYPE_PREFIX = `${CSS_TYPE}/`;
 
 const URL_SCHEME_REGEXP = /^(?:data|https?):/;
 
+/** @import CssModule, { BuiltCssModule, CssNormalModule } from "./CssModule" */
 /** @import { Source, RawSourceMap } from "webpack-sources" */
 /**
  * @import {
@@ -77,12 +78,6 @@ const URL_SCHEME_REGEXP = /^(?:data|https?):/;
 /** @import NormalModule from "../module/NormalModule" */
 /** @import Hash from "../util/Hash" */
 /** @import { ModuleFactoryCacheEntry } from "./CssModulesPlugin" */
-/**
- * @import CssModule, {
- * 	CssModuleBuildInfo,
- * 	CssModuleBuildMeta
- * } from "./CssModule"
- */
 
 /** @typedef {{ line: number, column: number }} SourcePosition */
 /** @typedef {Map<string, SourcePosition>} ExportLocsMap */
@@ -152,6 +147,14 @@ const buildExportsSourceMap = (
 	};
 };
 
+/**
+ * The module type the JSDoc inherited from `Generator` names.
+ * @typedef {CssNormalModule} TModule
+ */
+
+/**
+ * @extends {Generator<TModule>}
+ */
 class CssGenerator extends Generator {
 	/**
 	 * Creates an instance of CssGenerator.
@@ -189,7 +192,7 @@ class CssGenerator extends Generator {
 
 	/**
 	 * Returns the reason this module cannot be concatenated, when one exists.
-	 * @param {NormalModule} module module for which the bailout reason should be determined
+	 * @param {TModule} module module for which the bailout reason should be determined
 	 * @param {ConcatenationBailoutReasonContext} context context
 	 * @returns {string | undefined} reason why this module can't be concatenated, undefined when it can be concatenated
 	 */
@@ -224,7 +227,7 @@ class CssGenerator extends Generator {
 
 	/**
 	 * Processes the provided module.
-	 * @param {NormalModule} module the module to generate
+	 * @param {TModule} 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
@@ -233,7 +236,7 @@ class CssGenerator extends Generator {
 	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} */
+		/** @type {InitFragment<import("../javascript/JavascriptModulesPlugin").ChunkRenderContext>[] | undefined} */
 		let chunkInitFragments;
 		/** @type {CssDependencyTemplateContext} */
 		const templateContext = {
@@ -280,12 +283,13 @@ class CssGenerator extends Generator {
 
 	/**
 	 * Generates generated code for this runtime module.
-	 * @param {NormalModule} module module for which the code should be generated
+	 * @param {TModule} module module for which the code should be generated
 	 * @param {GenerateContext} generateContext context for generate
 	 * @returns {Source | null} generated code
 	 */
 	generate(module, generateContext) {
 		const exportType = /** @type {CssModule} */ (module).exportType || "link";
+		const { buildInfo, buildMeta } = /** @type {BuiltCssModule} */ (module);
 		const source =
 			generateContext.type === JAVASCRIPT_TYPE && exportType === "link"
 				? new ReplaceSource(new RawSource(""))
@@ -314,8 +318,7 @@ class CssGenerator extends Generator {
 			case JAVASCRIPT_TYPE: {
 				const compilation = generateContext.runtimeTemplate.compilation;
 				const devtool = compilation.options.devtool;
-				const isCssModule = /** @type {CssModuleBuildMeta} */ (module.buildMeta)
-					.isCssModule;
+				const isCssModule = buildMeta.isCssModule;
 
 				const generateContentCode = () => {
 					switch (exportType) {
@@ -412,8 +415,7 @@ class CssGenerator extends Generator {
 					/** @type {Source | null} */
 					const defaultExport = generateJSDefaultExport();
 
-					/** @type {CssModuleBuildInfo} */
-					(module.buildInfo).cssData = cssData;
+					buildInfo.cssData = cssData;
 
 					// Required for HMR
 					if (module.hot) {
@@ -575,7 +577,7 @@ class CssGenerator extends Generator {
 				// `SourceMapDevToolPlugin` can match the module and apply the
 				// devtool filename template instead of leaking this raw name
 				const sourceName = contextifySourceUrl(
-					/** @type {string} */ (compilation.options.context),
+					compilation.options.context,
 					module.identifier(),
 					compilation.compiler.root
 				);
@@ -611,7 +613,7 @@ class CssGenerator extends Generator {
 	/**
 	 * Generates fallback output for the provided error condition.
 	 * @param {Error} error the error
-	 * @param {NormalModule} module module for which the code should be generated
+	 * @param {TModule} module module for which the code should be generated
 	 * @param {GenerateContext} generateContext context for generate
 	 * @returns {Source | null} generated code
 	 */
@@ -641,7 +643,7 @@ class CssGenerator extends Generator {
 
 	/**
 	 * Returns the source types available for this module.
-	 * @param {NormalModule} module fresh module
+	 * @param {TModule} module fresh module
 	 * @returns {SourceTypes} available types (do not mutate)
 	 */
 	getTypes(module) {
@@ -684,16 +686,6 @@ class CssGenerator extends Generator {
 				continue;
 			}
 
-			// `importModule()` executes the module as JavaScript, and its dependency
-			// carries no origin module (`connectOrigin: false` in `LoaderPlugin`).
-			if (
-				connection.dependency !== null &&
-				isDependencyKind(connection.dependency, "loader-import")
-			) {
-				hasJs = true;
-				continue;
-			}
-
 			if (!connection.originModule) {
 				continue;
 			}
@@ -730,22 +722,20 @@ class CssGenerator extends Generator {
 
 	/**
 	 * Returns the estimated size for the requested source type.
-	 * @param {NormalModule} module the module
+	 * @param {TModule} module the module
 	 * @param {SourceType=} type source type
 	 * @returns {number} estimate size of the module
 	 */
 	getSize(module, type) {
 		switch (type) {
 			case JAVASCRIPT_TYPE: {
-				const cssData = /** @type {CssModuleBuildInfo} */ (module.buildInfo)
-					.cssData;
+				const { buildInfo, buildMeta } = /** @type {BuiltCssModule} */ (module);
+				const cssData = buildInfo.cssData;
 				if (!cssData) {
 					return 42;
 				}
 				if (cssData.exports.size === 0) {
-					if (
-						/** @type {CssModuleBuildMeta} */ (module.buildMeta).isCssModule
-					) {
+					if (buildMeta.isCssModule) {
 						return 42;
 					}
 					return 0;
@@ -778,7 +768,7 @@ class CssGenerator extends Generator {
 	/**
 	 * Updates the hash with the data contributed by this instance.
 	 * @param {Hash} hash hash that will be modified
-	 * @param {UpdateHashContext} updateHashContext context for updating hash
+	 * @param {UpdateHashContext<TModule>} updateHashContext context for updating hash
 	 */
 	updateHash(hash, { module, runtimeTemplate }) {
 		hash.update(/** @type {boolean} */ (this._esModule).toString());
@@ -805,7 +795,7 @@ class CssGenerator extends Generator {
 
 	/**
 	 * Resolve the effective `@charset` by walking text imports.
-	 * @param {NormalModule} module the module
+	 * @param {TModule} module the module
 	 * @param {ModuleGraph} moduleGraph module graph
 	 * @param {WeakSet<NormalModule>=} visited cycle guard
 	 * @returns {string | undefined} the effective charset
@@ -817,14 +807,12 @@ class CssGenerator extends Generator {
 			return undefined;
 		}
 		visited.add(module);
-		const own =
-			module.buildInfo &&
-			/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset;
+		const own = module.buildInfo && module.buildInfo.charset;
 		if (own !== undefined) return own;
 		if (exportType !== "text") return undefined;
 		for (const dep of module.dependencies) {
 			if (isDependencyKind(dep, "css-import")) {
-				const depModule = /** @type {NormalModule} */ (
+				const depModule = /** @type {BuiltCssModule} */ (
 					moduleGraph.getModule(dep)
 				);
 				const inherited = this._getEffectiveCharset(
@@ -840,7 +828,7 @@ class CssGenerator extends Generator {
 
 	/**
 	 * Generate JS expressions for `@import` side effects (`style` exportType only).
-	 * @param {NormalModule} module the module to generate CSS text for
+	 * @param {TModule} module the module to generate CSS text for
 	 * @param {GenerateContext} generateContext the generate context
 	 * @returns {string[]} JS expressions, one per `@import` dependency
 	 */
@@ -850,7 +838,10 @@ class CssGenerator extends Generator {
 
 		for (const dep of module.dependencies) {
 			if (!isDependencyKind(dep, "css-import")) continue;
-			const depModule = /** @type {CssModule} */ (moduleGraph.getModule(dep));
+			const depModule = /** @type {CssModule & BuiltCssModule} */ (
+				moduleGraph.getModule(dep)
+			);
+			if (!depModule) continue;
 			if (concatenationScope && concatenationScope.isModuleInScope(depModule)) {
 				continue;
 			}
@@ -870,7 +861,7 @@ class CssGenerator extends Generator {
 
 	/**
 	 * Recursively merge `@import`'d CSS into a single Source (text/css-style-sheet only).
-	 * @param {NormalModule} module the module to render
+	 * @param {TModule} module the module to render
 	 * @param {GenerateContext} generateContext the generate context
 	 * @param {Set<NormalModule>} ancestors modules on the current path (cycle guard)
 	 * @returns {Source | null} merged CSS source, or null when the module has no content
@@ -885,7 +876,9 @@ class CssGenerator extends Generator {
 
 			for (const dep of module.dependencies) {
 				if (!isDependencyKind(dep, "css-import")) continue;
-				const depModule = /** @type {CssModule} */ (moduleGraph.getModule(dep));
+				const depModule = /** @type {CssModule & BuiltCssModule} */ (
+					moduleGraph.getModule(dep)
+				);
 				if (!depModule) continue;
 				const depExportType = depModule.exportType;
 				if (depExportType !== "text" && depExportType !== "css-style-sheet") {
@@ -912,7 +905,7 @@ class CssGenerator extends Generator {
 
 	/**
 	 * Generate CSS source for the current module
-	 * @param {NormalModule} module the module to generate CSS source for
+	 * @param {TModule} module the module to generate CSS source for
 	 * @param {GenerateContext} generateContext the generate context
 	 * @returns {Source | null} the CSS source
 	 */
@@ -957,7 +950,7 @@ class CssGenerator extends Generator {
 		const { compilation } = runtimeTemplate;
 		const outputOptions = compilation.outputOptions;
 		const absolutify = makePathsAbsolute.bindContextCache(
-			/** @type {string} */ (compilation.options.context),
+			compilation.options.context,
 			compilation.compiler.root
 		);
 		const options = {
@@ -1013,7 +1006,7 @@ class CssGenerator extends Generator {
 	 * Offer CSS bound for a JS string literal to `renderEmbeddedSource`. No `.css`
 	 * asset carries this text, so an asset-level minimizer never sees it.
 	 * @param {Source} cssSource the CSS source
-	 * @param {NormalModule} module the module
+	 * @param {TModule} module the module
 	 * @param {GenerateContext} generateContext the generate context
 	 * @returns {Source} the source a tap returned, or the original
 	 */
@@ -1077,7 +1070,7 @@ class CssGenerator extends Generator {
 	/**
 	 * Generate the merged CSS text for a module, optionally wrapped as a
 	 * JS string literal for embedding in JavaScript output.
-	 * @param {NormalModule} module the module
+	 * @param {TModule} module the module
 	 * @param {GenerateContext} generateContext the generate context
 	 * @param {boolean} asJsLiteral wrap the result as a JS string literal
 	 * @returns {Source} the CSS text source

package/lib/css/CssModule.js

@@ -47,6 +47,16 @@ const makeSerializable = require("../util/makeSerializable");
 
 /** @typedef {BuildMeta & KnownCssModuleBuildMeta} CssModuleBuildMeta */
 
+/**
+ * A css module before or after its build, typed with its build info and build meta.
+ * @typedef {NormalModule & { buildInfo?: CssModuleBuildInfo, buildMeta?: CssModuleBuildMeta }} CssNormalModule
+ */
+
+/**
+ * A built css module, typed with its build info and build meta.
+ * @typedef {NormalModule & { buildInfo: CssModuleBuildInfo, buildMeta: CssModuleBuildMeta }} BuiltCssModule
+ */
+
 class CssModule extends NormalModule {
 	/**
 	 * Creates an instance of CssModule.

package/lib/css/CssModulesPlugin.js

@@ -567,7 +567,7 @@ class CssModulesPlugin {
 							return new CssModule(
 								/** @type {CssModuleCreateData} */
 								(
-									/** @type {unknown} */ ({
+									/** @type {Partial<CssModuleCreateData>} */ ({
 										...createData,
 										exportType
 									})
@@ -609,7 +609,7 @@ class CssModulesPlugin {
 						);
 					}
 					if (injectHMRCode) {
-						const currentModule = /** @type {CssModule} */ (rootModule);
+						const currentModule = rootModule;
 						const exportType = currentModule.exportType || "link";
 						// When exportType !== "link", modules behave like JavaScript modules
 						if (["link", "style"].includes(exportType)) {
@@ -904,6 +904,7 @@ class CssModulesPlugin {
 
 		// Get ordered list of modules per chunk group
 		// Lists are in reverse order to allow to use Array.pop()
+		const numberOfGroups = chunk.getNumberOfGroups();
 		const modulesByChunkGroup = Array.from(
 			chunk.groupsIterable,
 			(chunkGroup) => {
@@ -919,11 +920,14 @@ class CssModulesPlugin {
 					)
 					.map((item) => item.module);
 
-				return { list: sortedModules, set: new Set(sortedModules) };
+				return {
+					list: sortedModules,
+					set: numberOfGroups > 1 ? new Set(sortedModules) : undefined
+				};
 			}
 		);
 
-		if (modulesByChunkGroup.length === 1) {
+		if (numberOfGroups === 1) {
 			return modulesByChunkGroup[0].list.reverse();
 		}
 
@@ -967,7 +971,7 @@ class CssModulesPlugin {
 					if (list.length === 0) continue;
 					const lastModule = list[list.length - 1];
 					if (lastModule === selectedModule) continue;
-					if (!set.has(selectedModule)) continue;
+					if (!(/** @type {Set<Module>} */ (set).has(selectedModule))) continue;
 					failedModules.add(selectedModule);
 					if (failedModules.has(lastModule)) {
 						// There is a conflict, try other alternatives
@@ -1026,7 +1030,10 @@ class CssModulesPlugin {
 				const lastModule = list[list.length - 1];
 				if (lastModule === selectedModule) {
 					list.pop();
-				} else if (hasFailed && set.has(selectedModule)) {
+				} else if (
+					hasFailed &&
+					/** @type {Set<Module>} */ (set).has(selectedModule)
+				) {
 					const idx = list.indexOf(selectedModule);
 					if (idx >= 0) list.splice(idx, 1);
 				}

package/lib/css/CssParser.js

@@ -63,14 +63,7 @@ const getCommentCompilationWarning = memoize(() =>
 
 // `SourceProcessor` drives the parse and hands already-built AST nodes to the visitors; positions are read from those nodes' ranges rather than re-scanning the source.
 
-/** @import { BuildInfo, BuildMeta } from "../module/Module" */
-/**
- * @import CssModule, {
- * 	CssModuleBuildInfo,
- * 	CssModuleBuildMeta,
- * 	Inheritance
- * } from "./CssModule"
- */
+/** @import CssModule, { BuiltCssModule, Inheritance } from "./CssModule" */
 /** @import { ParserState, PreparsedAst } from "../module/Parser" */
 /**
  * @import {
@@ -851,6 +844,9 @@ const parseIcssImportRequest = (second, rule, source) => {
 	};
 };
 
+/**
+ * @extends {Parser<BuiltCssModule>}
+ */
 class CssParser extends Parser {
 	/**
 	 * Creates an instance of CssParser.
@@ -1066,7 +1062,7 @@ class CssParser extends Parser {
 			);
 		};
 
-		const module = state.module;
+		const module = /** @type {CssModule & BuiltCssModule} */ (state.module);
 
 		// Every CSS Modules export declaration is tracked here so `_resolveAmbiguousExports` can arbitrate cross-kind collisions in one pass at end-of-parse: a class silently wins over CSS-scoped kinds (`@keyframes`, `@counter-style`, `@container`, custom property, grid identifier) — matching css-loader / lightning css / postcss-modules — while other pairs (`class` ↔ `id`, `class` ↔ `:export`, `class` ↔ `@value`, …) surface as a warning so the user can resolve them.
 		/** @typedef {{ kind: string, line: number, column: number, entries: number[] }} DeclarationOfKind */
@@ -1226,11 +1222,9 @@ class CssParser extends Parser {
 		});
 		const knownPropertyIndex = getKnownPropertyIndex(knownProperties);
 
-		/** @type {CssModuleBuildMeta} */
-		(module.buildMeta).isCssModule = isModules;
-		if (/** @type {CssModule} */ (module).exportType === "style") {
-			/** @type {CssModuleBuildMeta} */
-			(module.buildMeta).needIdInConcatenation = true;
+		module.buildMeta.isCssModule = isModules;
+		if (module.exportType === "style") {
+			module.buildMeta.needIdInConcatenation = true;
 		}
 
 		const locConverter = new LocConverter(source);
@@ -4604,8 +4598,7 @@ class CssParser extends Parser {
 									(v) => A.type(v) !== NodeType.Whitespace
 								);
 								if (string && A.type(string) === NodeType.String) {
-									/** @type {CssModuleBuildInfo} */
-									(module.buildInfo).charset = source
+									module.buildInfo.charset = source
 										.slice(A.start(string) + 1, A.end(string) - 1)
 										.toUpperCase();
 								}
@@ -5022,7 +5015,18 @@ class CssParser extends Parser {
 						!(dashed.active && declIsDashed) &&
 						icssDefinitions.has(declName)
 					) {
-						emitICSSSymbol(declName, nameStart, nameEnd);
+						// `themeColor: blue` names the same custom property that
+						// `var(themeColor)` resolves to, so scope it under the dashed
+						// name the value holds instead of substituting it verbatim.
+						const dashedName =
+							this.options.dashedIdents && effectiveLocalMode
+								? localizableDashedValue(declName)
+								: undefined;
+						if (dashedName !== undefined) {
+							emitNamedDashedIdentExport(dashedName, nameStart, nameEnd);
+						} else {
+							emitICSSSymbol(declName, nameStart, nameEnd);
+						}
 					}
 				}
 			},
@@ -5310,25 +5314,22 @@ class CssParser extends Parser {
 		// `as` selects the top-level production of §5.3: a `style` attribute is a
 		// block's contents, anything else a full stylesheet. `as` and `skip` are
 		// per-parse, so only the per-source `locConverter` reaches `process`.
-		new SourceProcessor()
-			.use(/** @type {VisitorMap} */ (visitors))
-			.process(source, {
-				as: /** @type {"stylesheet" | "block-contents"} */ (this.options.as),
-				// Non-modules parses skip selector preludes, but `@custom-selector` expansion needs them, so keep them when the file may use one.
-				skip: isModules
-					? undefined
-					: mayHaveCustomSelectors
-						? SKIP_NON_MODULES_KEEP_SELECTORS
-						: SKIP_NON_MODULES,
-				locConverter
-			});
+		new SourceProcessor().use(visitors).process(source, {
+			as: /** @type {"stylesheet" | "block-contents"} */ (this.options.as),
+			// Non-modules parses skip selector preludes, but `@custom-selector` expansion needs them, so keep them when the file may use one.
+			skip: isModules
+				? undefined
+				: mayHaveCustomSelectors
+					? SKIP_NON_MODULES_KEEP_SELECTORS
+					: SKIP_NON_MODULES,
+			locConverter
+		});
 
 		if (customMediaQueries || customSelectorUses) {
 			resolveCustomMediaAndSelectors();
 		}
 
-		/** @type {BuildInfo} */
-		(module.buildInfo).strict = true;
+		module.buildInfo.strict = true;
 
 		// Topologically sort the `composes … from` files and tag each file's first import dep with `sourceOrder` for cascade-correct load order (cycles keep their natural position).
 		if (composesFirstFileImport.size > 1) {
@@ -5342,7 +5343,7 @@ class CssParser extends Parser {
 			);
 		}
 
-		const buildMeta = /** @type {BuildMeta} */ (state.module.buildMeta);
+		const buildMeta = module.buildMeta;
 
 		buildMeta.exportsType = this.options.namedExports ? "namespace" : "default";
 		buildMeta.defaultObject = this.options.namedExports

package/lib/css/conventions.js

@@ -87,7 +87,7 @@ module.exports.camelCase = (input) => {
 /**
  * Safely stringify an arbitrary value for an error message — falls back to
  * `String(...)` when JSON.stringify would throw (BigInt, circular, etc.).
- * @param {EXPECTED_ANY} value value to stringify
+ * @param {string | string[]} value value to stringify
  * @returns {string} stringified value
  */
 const safeStringify = (value) => {