webpack 5.112.1 → 5.112.2

package/lib/Compilation.js

@@ -36,6 +36,7 @@ const { LogType, Logger } = require("./logging/Logger");
 const CodeGenerationResults = require("./module/CodeGenerationResults");
 const Module = require("./module/Module");
 const ModuleProfile = require("./module/ModuleProfile");
+const { JAVASCRIPT_TYPE } = require("./module/ModuleSourceTypeConstants");
 const LazyBarrels = require("./optimize/LazyBarrels");
 const RuntimeGlobals = require("./runtime/RuntimeGlobals");
 const Stats = require("./stats/Stats");
@@ -6415,6 +6416,16 @@ This prevents using hashes of each other and should be avoided.`);
 					chunkGraph.connectChunkAndModule(chunk, module);
 				}
 
+				// The loader reads `module` as JavaScript, a consumer only this chunk graph has.
+				const sourceTypes = module.getSourceTypes();
+				if (!sourceTypes.has(JAVASCRIPT_TYPE)) {
+					chunkGraph.setChunkModuleSourceTypes(
+						chunk,
+						module,
+						new Set([...sourceTypes, JAVASCRIPT_TYPE])
+					);
+				}
+
 				/** @type {WebpackError[]} */
 				const errors = [];
 
@@ -6471,8 +6482,42 @@ This prevents using hashes of each other and should be avoided.`);
 					}
 				};
 
+				/**
+				 * Generates code for modules, each after the ones its `codeGenerationDependencies` read.
+				 * @param {Module[]} pending modules whose code is not generated yet
+				 * @param {Callback} callback callback
+				 * @returns {void}
+				 */
+				const codeGenInOrder = (pending, callback) => {
+					const pendingSet = new Set(pending);
+					/** @type {Module[]} */
+					const ready = [];
+					/** @type {Module[]} */
+					const delayed = [];
+					for (const module of pending) {
+						const { codeGenerationDependencies } = module;
+						const waits =
+							codeGenerationDependencies !== undefined &&
+							codeGenerationDependencies.some((dep) => {
+								const referencedModule = this.moduleGraph.getModule(dep);
+								return (
+									referencedModule !== null && pendingSet.has(referencedModule)
+								);
+							});
+						(waits ? delayed : ready).push(module);
+					}
+					// A cycle never frees a module, so generate them all and let templates report.
+					if (ready.length === 0) {
+						return asyncLib.eachLimit(pending, 10, codeGen, callback);
+					}
+					asyncLib.eachLimit(ready, 10, codeGen, (err) => {
+						if (err || delayed.length === 0) return callback(err);
+						codeGenInOrder(delayed, callback);
+					});
+				};
+
 				// Generate code for all aggregated modules
-				asyncLib.eachLimit(modules, 10, codeGen, (err) => {
+				codeGenInOrder([...modules], (err) => {
 					if (err) return callback(err);
 					reportErrors();
 

package/lib/css/CssGenerator.js

@@ -686,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;
 			}

package/lib/css/CssModulesPlugin.js

@@ -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/syntax-parser.js

@@ -5380,8 +5380,8 @@ class TakenPiece {
 	constructor(piece, text, empties) {
 		/** @type {number} */
 		this.piece = piece;
-		/** @type {RuleSpan[]} */
-		this.spans = [];
+		/** @type {RuleSpan[]} shared and empty until `_noteSpans` gives it its own */
+		this.spans = _NO_RULE_SPANS;
 		/** @type {number} */
 		this.empties = empties;
 		/** @type {string} */
@@ -6373,7 +6373,13 @@ const _noteSpans = (writer, taken, spans, chain) => {
 	for (const span of spans) {
 		if (chain.length !== 0) span.scope = _enclosingRuleScope(span.scope, chain);
 		span.taken = taken;
-		taken.spans.push(span);
+	}
+	// A copy its own size: a first push would give the list room for 17, and
+	// the piece holds it until the sheet ends.
+	if (taken.spans.length === 0) {
+		taken.spans = [...spans];
+	} else {
+		for (const span of spans) taken.spans.push(span);
 	}
 	for (const span of spans) {
 		if (span.key === UNKEYED) continue;
@@ -12855,10 +12861,11 @@ const _lowerDirSelector = (parts) => {
  * Empty parts are stepped over — a comment between the colons printed away, and
  * the tokenizer had already dropped it anyway.
  * @param {string[]} parts the prelude's printed parts
- * @returns {void}
+ * @returns {boolean} whether a pseudo it read may be an `:is()` for `_unwrapLoneIs`
  */
 const _foldPseudoNames = (parts) => {
 	const dropping = _S._transforms.shortenSelectors;
+	let mayUnwrap = false;
 	// The two non-empty parts before the current one.
 	let first = -1;
 	let second = -1;
@@ -12869,6 +12876,13 @@ const _foldPseudoNames = (parts) => {
 		// not, `linearGradient` being an SVG element, and nor does an id, class or
 		// attribute value. A functional pseudo folds its own name alone.
 		if (second !== -1 && parts[second] === ":") {
+			if (
+				part.length > 4 &&
+				part.charCodeAt(2) === CC_LEFT_PARENTHESIS &&
+				(part.charCodeAt(0) | 0x20) === CC_LOWER_I
+			) {
+				mayUnwrap = true;
+			}
 			if (_S._transforms.foldCase && !part.includes("(")) {
 				const lowered = asciiLowercaseName(part);
 				if (lowered !== part) {
@@ -12890,6 +12904,7 @@ const _foldPseudoNames = (parts) => {
 		first = second;
 		second = i;
 	}
+	return mayUnwrap;
 };
 
 // A legacy pseudo-element written with one colon, which `:is()` cannot hold.
@@ -12933,19 +12948,9 @@ const _isCompoundText = (selector) => {
  * Unwrap each `:is()` holding one compound, which matches the same elements with
  * the same specificity. Only where the targets read every pseudo it names, since
  * `:is()` forgives an argument it cannot parse and a bare compound does not.
- * @param {string[]} parts a selector's printed parts, rewritten in place
+ * @param {string[]} parts a selector's printed parts, rewritten in place, called only where `_foldPseudoNames` read a pseudo that may be an `:is()`
  */
 const _unwrapLoneIs = (parts) => {
-	// Almost no selector holds an `:is()`, and the walk below reads every part.
-	let candidate = false;
-	for (let i = 0; i < parts.length && !candidate; i++) {
-		const part = parts[i];
-		candidate =
-			part.length > 4 &&
-			part.charCodeAt(2) === CC_LEFT_PARENTHESIS &&
-			(part.charCodeAt(0) | 0x20) === CC_LOWER_I;
-	}
-	if (!candidate) return;
 	let before = -1;
 	// Past a pseudo-element a compound takes only a few pseudo-classes, which an
 	// `:is()` there may hold and a bare compound may not.
@@ -13390,7 +13395,8 @@ const _selectsFeatureless = (parts, at) => {
  * @returns {void}
  */
 const _dropImpliedUniversalSelector = (parts) => {
-	if (!_S._transforms.shortenSelectors) return;
+	// A native search first: almost no selector holds a `*` at all.
+	if (!_S._transforms.shortenSelectors || !parts.includes("*")) return;
 	let previous = -1;
 	for (let i = 0; i < parts.length; i++) {
 		const part = parts[i];
@@ -14084,6 +14090,10 @@ const _foldFollowingLonghands = (path, items, texts, superseded) => {
 	// asks again of the ones before it, and a fold keeps the property it rewrites.
 	/** @type {(string | undefined)[]} */
 	const properties = [];
+	// The number `_declarationTable` gives each, or -1 for one it does not name.
+	/** @type {number[]} */
+	const ids = [];
+	const table = _declarationTable();
 	/**
 	 * The property a declaration sets, read through `_canonicalProperty`.
 	 * @param {number} at the declaration's index
@@ -14092,13 +14102,31 @@ const _foldFollowingLonghands = (path, items, texts, superseded) => {
 	const propertyAt = (at) => {
 		let property = properties[at];
 		if (property === undefined) {
-			property = _canonicalProperty(
-				_printedProperty(texts[at], texts[at].indexOf(":"))
-			);
+			const printed = _printedProperty(texts[at], texts[at].indexOf(":"));
+			const id = table.ids.get(printed);
+			if (id === undefined) {
+				property = printed;
+				ids[at] = -1;
+			} else {
+				ids[at] = table.canonical[id];
+				property = table.names[ids[at]];
+			}
 			properties[at] = property;
 		}
 		return property;
 	};
+	/**
+	 * Whether two declarations must keep their order, as `_orderMatters` reads it.
+	 * @param {number} a a declaration's index, its property already read
+	 * @param {number} b another's
+	 * @returns {boolean} true when the two must keep their order
+	 */
+	const orderMattersAt = (a, b) => {
+		const property = propertyAt(b);
+		return ids[a] !== -1 && ids[b] !== -1
+			? _orderMattersById(table, ids[a], ids[b])
+			: _orderMatters(/** @type {string} */ (properties[a]), property);
+	};
 	for (let i = 0; i < items.length; i++) {
 		// A dropped declaration prints nothing, so nothing stands where it stood.
 		if (texts[i].length === 0 || superseded.has(i)) continue;
@@ -14116,7 +14144,8 @@ const _foldFollowingLonghands = (path, items, texts, superseded) => {
 				superseded,
 				i,
 				dropsWithPrefix,
-				propertyAt
+				propertyAt,
+				orderMattersAt
 			)
 		) {
 			superseded.add(i);
@@ -14142,6 +14171,7 @@ let _anyLonghand = null;
  * @param {number} from the longhand's index
  * @param {(at: number) => boolean} drops whether a declaration is dropped later
  * @param {(at: number) => string} propertyAt the property a declaration sets, read through `_canonicalProperty`
+ * @param {(a: number, b: number) => boolean} orderMattersAt `_orderMatters` of two declarations' properties, the first already read
  * @returns {boolean} true when it was folded into one before it
  */
 const _foldIntoEarlier = (
@@ -14151,7 +14181,8 @@ const _foldIntoEarlier = (
 	superseded,
 	from,
 	drops,
-	propertyAt
+	propertyAt,
+	orderMattersAt
 ) => {
 	if (_anyLonghand === null) {
 		_anyLonghand = new Set();
@@ -14171,7 +14202,7 @@ const _foldIntoEarlier = (
 		if (texts[at].length === 0 || superseded.has(at)) continue;
 		if (path.type(items[at]) !== NodeType.Declaration) return false;
 		if (drops(at)) continue;
-		if (_orderMatters(property, propertyAt(at))) {
+		if (orderMattersAt(from, at)) {
 			return _foldInto(path, items, texts, at, from);
 		}
 	}
@@ -15408,7 +15439,22 @@ const _mergeBoxLonghands = (
 	// tail uncovered, dropping its declaration.
 	/** @type {Set<Node> | null} */
 	let claimed = null;
-	for (let e = 0; e < table.length; e++) {
+	// Only an entry whose first longhand the block writes can merge, and blocks
+	// write few properties against a table of dozens of entries.
+	const firsts = _mergeTableFirsts(table);
+	/** @type {number[]} */
+	const candidates = [];
+	for (const property of at.keys()) {
+		const entries = firsts.get(property);
+		if (entries !== undefined) {
+			for (const entry of entries) candidates.push(entry);
+		}
+	}
+	if (candidates.length === 0) return null;
+	// In table order, as the claims between entries are made.
+	if (candidates.length > 1) candidates.sort((a, b) => a - b);
+	for (let c = 0; c < candidates.length; c++) {
+		const e = candidates[c];
 		const shorthand = table[e][0];
 		const longhands = table[e][1];
 		// A plain loop: this runs for every table entry of every rule, where one
@@ -15896,6 +15942,30 @@ const MERGE_FAMILY = 1;
 const MERGE_SLASH = 2;
 const MERGE_ORDERED = 3;
 
+/** @type {WeakMap<[string, string[]][], Map<string, number[]>>} */
+const _mergeTableFirstsCache = new WeakMap();
+
+/**
+ * A merge table's entries by their first longhand, which a block has to write
+ * for the entry to merge.
+ * @param {[string, string[]][]} table a merge table
+ * @returns {Map<string, number[]>} the indexes of the entries each first longhand leads
+ */
+const _mergeTableFirsts = (table) => {
+	let firsts = _mergeTableFirstsCache.get(table);
+	if (firsts === undefined) {
+		firsts = new Map();
+		for (let e = 0; e < table.length; e++) {
+			const first = table[e][1][0];
+			const entries = firsts.get(first);
+			if (entries === undefined) firsts.set(first, [e]);
+			else entries.push(e);
+		}
+		_mergeTableFirstsCache.set(table, firsts);
+	}
+	return firsts;
+};
+
 // Each table as its entries, read by index: a `for…of` over the map would
 // allocate an entry pair per row of every table for every block merged.
 /** @type {[[string, string[]][], number][]} */
@@ -18086,8 +18156,9 @@ const _rulePrelude = (path, writer, minify, outParts) => {
 		if (_S._transforms.customSelectors && _customSelectors.size !== 0) {
 			_writeCustomSelector(parts);
 		}
-		_foldPseudoNames(parts);
-		if (_S._transforms.shortenSelectors) _unwrapLoneIs(parts);
+		if (_foldPseudoNames(parts) && _S._transforms.shortenSelectors) {
+			_unwrapLoneIs(parts);
+		}
 		// After the fold, which is what makes the names above match, and before the
 		// class replacement, so a pseudo written as a class is one either way.
 		if (!_S._isSelectorAllowed) {
@@ -18782,8 +18853,8 @@ const _writesOnlyDeclarations = (path, items, texts) => {
  * @returns {number[] | null} where each comes from, or null to keep them as written
  */
 const _declarationOrder = (texts) => {
-	const ranks = getDeclarationRanks();
-	/** @type {string[]} */
+	const table = _declarationTable();
+	/** @type {number[]} */
 	const properties = [];
 	/** @type {number[]} */
 	const rankOf = [];
@@ -18793,14 +18864,15 @@ const _declarationOrder = (texts) => {
 		if (colon <= 0) return null;
 		const property = toLowerCaseIfNeeded(text.slice(0, colon));
 		if (property.startsWith("--")) {
-			properties.push(property);
+			properties.push(-1);
 			rankOf.push(-1);
 			continue;
 		}
-		const rank = ranks.get(property);
-		if (rank === undefined) return null;
+		const id = table.ids.get(property);
+		if (id === undefined) return null;
+		const rank = table.ranks[id];
 		if (rank !== -1) ranked = true;
-		properties.push(_canonicalProperty(property));
+		properties.push(table.canonical[id]);
 		rankOf.push(rank);
 	}
 	if (!ranked) return null;
@@ -18832,7 +18904,7 @@ const _declarationOrder = (texts) => {
 		for (let j = i + 1; j < order.length; j++) {
 			if (
 				order[j] < order[i] &&
-				_orderMatters(properties[order[i]], properties[order[j]])
+				_orderMattersById(table, properties[order[i]], properties[order[j]])
 			) {
 				return null;
 			}
@@ -18841,6 +18913,73 @@ const _declarationOrder = (texts) => {
 	return moved ? order : null;
 };
 
+/**
+ * Every property `getDeclarationRanks` names by a small number: its rank, the
+ * number of the property `_canonicalProperty` reads it as, and `_orderMatters`
+ * of two such numbers, filled in as pairs are asked of.
+ * @typedef {object} DeclarationTable
+ * @property {Map<string, number>} ids each property's number
+ * @property {Int32Array} ranks the rank of each number
+ * @property {Int32Array} canonical the number of the property each is read as
+ * @property {string[]} names the property each number stands for
+ * @property {number} all the number of `all`
+ * @property {Uint8Array} matters `_orderMatters` by `a * names.length + b`: 0 unknown, 1 no, 2 yes
+ */
+
+/** @type {DeclarationTable | undefined} */
+let _declarationTableValue;
+
+/**
+ * @returns {DeclarationTable} the table, built on first use
+ */
+const _declarationTable = () => {
+	if (_declarationTableValue !== undefined) return _declarationTableValue;
+	const rankMap = getDeclarationRanks();
+	/** @type {Map<string, number>} */
+	const ids = new Map();
+	/** @type {string[]} */
+	const names = [];
+	for (const name of rankMap.keys()) {
+		ids.set(name, names.length);
+		names.push(name);
+	}
+	const ranks = new Int32Array(names.length);
+	const canonical = new Int32Array(names.length);
+	for (let i = 0; i < names.length; i++) {
+		ranks[i] = /** @type {number} */ (rankMap.get(names[i]));
+		const id = ids.get(_canonicalProperty(names[i]));
+		canonical[i] = id === undefined ? i : id;
+	}
+	_declarationTableValue = {
+		ids,
+		ranks,
+		canonical,
+		names,
+		all: /** @type {number} */ (ids.get("all")),
+		matters: new Uint8Array(names.length * names.length)
+	};
+	return _declarationTableValue;
+};
+
+/**
+ * `_orderMatters` of two numbered properties, -1 for a custom one.
+ * @param {DeclarationTable} table the numbering
+ * @param {number} a a property's canonical number
+ * @param {number} b another
+ * @returns {boolean} true when the two must keep their order
+ */
+const _orderMattersById = (table, a, b) => {
+	if (a === b || a === table.all || b === table.all) return true;
+	// Two custom properties are both -1 yet never trade places: they share a rank.
+	if (a === -1 || b === -1) return false;
+	const at = a * table.names.length + b;
+	const known = table.matters[at];
+	if (known !== 0) return known === 2;
+	const matters = _computeOrderMatters(table.names[a], table.names[b]);
+	table.matters[at] = matters ? 2 : 1;
+	return matters;
+};
+
 /**
  * Put one declaration list together: the list-wide transforms (merge a family's
  * longhands into their shorthand, drop what a later declaration supersedes, add