webpack 5.85.0 → 5.88.1

package/lib/cache/PackFileCacheStrategy.js

@@ -20,17 +20,22 @@ const {
 /** @typedef {import("../../declarations/WebpackOptions").SnapshotOptions} SnapshotOptions */
 /** @typedef {import("../Cache").Etag} Etag */
 /** @typedef {import("../Compiler")} Compiler */
+/** @typedef {import("../FileSystemInfo").ResolveBuildDependenciesResult} ResolveBuildDependenciesResult */
 /** @typedef {import("../FileSystemInfo").Snapshot} Snapshot */
 /** @typedef {import("../logging/Logger").Logger} Logger */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 /** @typedef {import("../util/fs").IntermediateFileSystem} IntermediateFileSystem */
 
+/** @typedef {Map<string, string | false>} ResolveResults */
+
 class PackContainer {
 	/**
 	 * @param {Object} data stored data
 	 * @param {string} version version identifier
 	 * @param {Snapshot} buildSnapshot snapshot of all build dependencies
 	 * @param {Set<string>} buildDependencies list of all unresolved build dependencies captured
-	 * @param {Map<string, string | false>} resolveResults result of the resolved build dependencies
+	 * @param {ResolveResults} resolveResults result of the resolved build dependencies
 	 * @param {Snapshot} resolveBuildDependenciesSnapshot snapshot of the dependencies of the build dependencies resolving
 	 */
 	constructor(
@@ -58,6 +63,9 @@ class PackContainer {
 		writeLazy(this.data);
 	}
 
+	/**
+	 * @param {ObjectDeserializerContext} context context
+	 */
 	deserialize({ read }) {
 		this.version = read();
 		this.buildSnapshot = read();
@@ -99,7 +107,7 @@ class Pack {
 	constructor(logger, maxAge) {
 		/** @type {Map<string, PackItemInfo>} */
 		this.itemInfo = new Map();
-		/** @type {string[]} */
+		/** @type {(string | undefined)[]} */
 		this.requests = [];
 		this.requestsTimeout = undefined;
 		/** @type {Map<string, PackItemInfo>} */
@@ -111,6 +119,9 @@ class Pack {
 		this.maxAge = maxAge;
 	}
 
+	/**
+	 * @param {string} identifier identifier
+	 */
 	_addRequest(identifier) {
 		this.requests.push(identifier);
 		if (this.requestsTimeout === undefined) {
@@ -149,7 +160,7 @@ class Pack {
 			if (!this.content[loc]) {
 				return undefined;
 			}
-			return this.content[loc].get(identifier);
+			return /** @type {PackContent} */ (this.content[loc]).get(identifier);
 		}
 	}
 
@@ -175,7 +186,7 @@ class Pack {
 			if (loc >= 0) {
 				this._addRequest(identifier);
 				this.freshContent.set(identifier, info);
-				const content = this.content[loc];
+				const content = /** @type {PackContent} */ (this.content[loc]);
 				content.delete(identifier);
 				if (content.items.size === 0) {
 					this.content[loc] = undefined;
@@ -351,11 +362,12 @@ class Pack {
 			mergedIndices = smallUnusedContents;
 		} else return;
 
+		/** @type {PackContent[] } */
 		const mergedContent = [];
 
 		// 3. Remove old content entries
 		for (const i of mergedIndices) {
-			mergedContent.push(this.content[i]);
+			mergedContent.push(/** @type {PackContent} */ (this.content[i]));
 			this.content[i] = undefined;
 		}
 
@@ -364,7 +376,7 @@ class Pack {
 		const mergedItems = new Set();
 		/** @type {Set<string>} */
 		const mergedUsedItems = new Set();
-		/** @type {(function(Map<string, any>): Promise)[]} */
+		/** @type {(function(Map<string, any>): Promise<void>)[]} */
 		const addToMergedMap = [];
 		for (const content of mergedContent) {
 			for (const identifier of content.items) {
@@ -498,17 +510,20 @@ class Pack {
 	 * Only runs for one content to avoid large invalidation.
 	 */
 	_gcOldestContent() {
-		/** @type {PackItemInfo} */
+		/** @type {PackItemInfo | undefined} */
 		let oldest = undefined;
 		for (const info of this.itemInfo.values()) {
 			if (oldest === undefined || info.lastAccess < oldest.lastAccess) {
 				oldest = info;
 			}
 		}
-		if (Date.now() - oldest.lastAccess > this.maxAge) {
-			const loc = oldest.location;
+		if (
+			Date.now() - /** @type {PackItemInfo} */ (oldest).lastAccess >
+			this.maxAge
+		) {
+			const loc = /** @type {PackItemInfo} */ (oldest).location;
 			if (loc < 0) return;
-			const content = this.content[loc];
+			const content = /** @type {PackContent} */ (this.content[loc]);
 			const items = new Set(content.items);
 			const usedItems = new Set(content.used);
 			this._gcAndUpdateLocation(items, usedItems, loc);
@@ -771,6 +786,7 @@ class PackContent {
 
 		// We are in state B
 		const { lazyName } = this;
+		/** @type {string | undefined} */
 		let timeMessage;
 		if (lazyName) {
 			// only log once
@@ -811,7 +827,7 @@ class PackContent {
 
 	/**
 	 * @param {string} reason explanation why unpack is necessary
-	 * @returns {void | Promise} maybe a promise if lazy
+	 * @returns {void | Promise<void>} maybe a promise if lazy
 	 */
 	unpack(reason) {
 		if (this.content) return;
@@ -819,6 +835,7 @@ class PackContent {
 		// Move from state B to C
 		if (this.lazy) {
 			const { lazyName } = this;
+			/** @type {string | undefined} */
 			let timeMessage;
 			if (lazyName) {
 				// only log once
@@ -862,6 +879,9 @@ class PackContent {
 		return size;
 	}
 
+	/**
+	 * @param {string} identifier identifier
+	 */
 	delete(identifier) {
 		this.items.delete(identifier);
 		this.used.delete(identifier);
@@ -906,6 +926,7 @@ class PackContent {
 		}
 		// State B2
 		const { lazyName } = this;
+		/** @type {string | undefined} */
 		let timeMessage;
 		if (lazyName) {
 			// only log once
@@ -959,6 +980,10 @@ class PackContent {
 	}
 }
 
+/**
+ * @param {Buffer} buf buffer
+ * @returns {Buffer} buffer that can be collected
+ */
 const allowCollectingMemory = buf => {
 	const wasted = buf.buffer.byteLength - buf.byteLength;
 	if (wasted > 8192 && (wasted > 1048576 || wasted > buf.byteLength)) {
@@ -978,10 +1003,10 @@ class PackFileCacheStrategy {
 	 * @param {Logger} options.logger a logger
 	 * @param {SnapshotOptions} options.snapshot options regarding snapshotting
 	 * @param {number} options.maxAge max age of cache items
-	 * @param {boolean} options.profile track and log detailed timing information for individual cache items
-	 * @param {boolean} options.allowCollectingMemory allow to collect unused memory created during deserialization
-	 * @param {false | "gzip" | "brotli"} options.compression compression used
-	 * @param {boolean} options.readonly disable storing cache into filesystem
+	 * @param {boolean | undefined} options.profile track and log detailed timing information for individual cache items
+	 * @param {boolean | undefined} options.allowCollectingMemory allow to collect unused memory created during deserialization
+	 * @param {false | "gzip" | "brotli" | undefined} options.compression compression used
+	 * @param {boolean | undefined} options.readonly disable storing cache into filesystem
 	 */
 	constructor({
 		compiler,
@@ -1028,17 +1053,20 @@ class PackFileCacheStrategy {
 		this.buildDependencies = new Set();
 		/** @type {LazySet<string>} */
 		this.newBuildDependencies = new LazySet();
-		/** @type {Snapshot} */
+		/** @type {Snapshot | undefined} */
 		this.resolveBuildDependenciesSnapshot = undefined;
-		/** @type {Map<string, string | false>} */
+		/** @type {ResolveResults | undefined} */
 		this.resolveResults = undefined;
-		/** @type {Snapshot} */
+		/** @type {Snapshot | undefined} */
 		this.buildSnapshot = undefined;
-		/** @type {Promise<Pack>} */
+		/** @type {Promise<Pack> | undefined} */
 		this.packPromise = this._openPack();
 		this.storePromise = Promise.resolve();
 	}
 
+	/**
+	 * @returns {Promise<Pack>} pack
+	 */
 	_getPack() {
 		if (this.packPromise === undefined) {
 			this.packPromise = this.storePromise.then(() => this._openPack());
@@ -1059,7 +1087,7 @@ class PackFileCacheStrategy {
 		let newBuildDependencies;
 		/** @type {Snapshot} */
 		let resolveBuildDependenciesSnapshot;
-		/** @type {Map<string, string | false>} */
+		/** @type {ResolveResults | undefined} */
 		let resolveResults;
 		logger.time("restore cache container");
 		return this.fileSerializer
@@ -1243,6 +1271,9 @@ class PackFileCacheStrategy {
 			});
 	}
 
+	/**
+	 * @param {LazySet<string>} dependencies dependencies to store
+	 */
 	storeBuildDependencies(dependencies) {
 		if (this.readonly) return;
 		this.newBuildDependencies.addAll(dependencies);
@@ -1288,7 +1319,7 @@ class PackFileCacheStrategy {
 									missing,
 									resolveResults,
 									resolveDependencies
-								} = result;
+								} = /** @type {ResolveBuildDependenciesResult} */ (result);
 								if (this.resolveResults) {
 									for (const [key, value] of resolveResults) {
 										this.resolveResults.set(key, value);
@@ -1383,7 +1414,7 @@ class PackFileCacheStrategy {
 					const content = new PackContainer(
 						pack,
 						this.version,
-						this.buildSnapshot,
+						/** @type {Snapshot} */ (this.buildSnapshot),
 						updatedBuildDependencies,
 						this.resolveResults,
 						this.resolveBuildDependenciesSnapshot

package/lib/config/browserslistTargetHandler.js

@@ -120,7 +120,7 @@ const resolve = browsers => {
 		and_qq: [10, 4],
 		// baidu: Not supported
 		// and_uc: Not supported
-		// kaios: Not supported
+		kaios: [3, 0],
 		node: [12, 17]
 	});
 
@@ -187,7 +187,7 @@ const resolve = browsers => {
 			// and_qq: Unknown support
 			// baidu: Unknown support
 			// and_uc: Unknown support
-			// kaios: Unknown support
+			kaios: [3, 0],
 			node: [0, 12]
 		}),
 		destructuring: rawChecker({
@@ -206,7 +206,7 @@ const resolve = browsers => {
 			// and_qq: Unknown support
 			// baidu: Unknown support
 			// and_uc: Unknown support
-			// kaios: Unknown support
+			kaios: [2, 5],
 			node: [6, 0]
 		}),
 		bigIntLiteral: rawChecker({
@@ -225,7 +225,7 @@ const resolve = browsers => {
 			// and_qq: Not supported
 			// baidu: Not supported
 			// and_uc: Not supported
-			// kaios: Not supported
+			kaios: [3, 0],
 			node: [10, 4]
 		}),
 		// Support syntax `import` and `export` and no limitations and bugs on Node.js
@@ -246,7 +246,7 @@ const resolve = browsers => {
 			and_qq: [10, 4],
 			// baidu: Not supported
 			// and_uc: Not supported
-			// kaios: Not supported
+			kaios: [3, 0],
 			node: [12, 17]
 		}),
 		dynamicImport: es6DynamicImport,
@@ -269,7 +269,7 @@ const resolve = browsers => {
 			// and_qq: Unknown support
 			// baidu: Unknown support
 			// and_uc: Unknown support
-			// kaios: Unknown support
+			kaios: [3, 0],
 			node: 12
 		}),
 		optionalChaining: rawChecker({
@@ -288,7 +288,7 @@ const resolve = browsers => {
 			// and_qq: Not supported
 			// baidu: Not supported
 			// and_uc: Not supported
-			// kaios: Not supported
+			kaios: [3, 0],
 			node: 14
 		}),
 		templateLiteral: rawChecker({

package/lib/config/defaults.js

@@ -15,7 +15,9 @@ const {
 	JAVASCRIPT_MODULE_TYPE_DYNAMIC,
 	WEBASSEMBLY_MODULE_TYPE_SYNC,
 	ASSET_MODULE_TYPE,
-	CSS_MODULE_TYPE
+	CSS_MODULE_TYPE_AUTO,
+	CSS_MODULE_TYPE,
+	CSS_MODULE_TYPE_MODULE
 } = require("../ModuleTypeConstants");
 const Template = require("../Template");
 const { cleverMerge } = require("../util/cleverMerge");
@@ -298,7 +300,10 @@ const applyWebpackOptionsDefaults = options => {
 			cache,
 			context: /** @type {Context} */ (options.context),
 			targetProperties,
-			mode: /** @type {Mode} */ (options.mode)
+			mode: /** @type {Mode} */ (options.mode),
+			css:
+				/** @type {NonNullable<ExperimentsNormalized["css"]>} */
+				(options.experiments.css)
 		}),
 		options.resolve
 	);
@@ -533,6 +538,7 @@ const applyJavascriptParserOptionsDefaults = (
 	D(parserOptions, "dynamicImportMode", "lazy");
 	D(parserOptions, "dynamicImportPrefetch", false);
 	D(parserOptions, "dynamicImportPreload", false);
+	D(parserOptions, "dynamicImportFetchPriority", false);
 	D(parserOptions, "createRequire", isNode);
 	if (futureDefaults) D(parserOptions, "exportsPresence", "error");
 };
@@ -704,38 +710,24 @@ const applyModuleDefaults = (
 			});
 		}
 		if (css) {
-			const cssRule = {
-				type: CSS_MODULE_TYPE,
-				resolve: {
-					fullySpecified: true,
-					preferRelative: true
-				}
-			};
-			const cssModulesRule = {
-				type: "css/module",
-				resolve: {
-					fullySpecified: true
-				}
+			const resolve = {
+				fullySpecified: true,
+				preferRelative: true
 			};
 			rules.push({
 				test: /\.css$/i,
-				oneOf: [
-					{
-						test: /\.module\.css$/i,
-						...cssModulesRule
-					},
-					{
-						...cssRule
-					}
-				]
+				type: CSS_MODULE_TYPE_AUTO,
+				resolve
 			});
 			rules.push({
 				mimetype: "text/css+module",
-				...cssModulesRule
+				type: CSS_MODULE_TYPE_MODULE,
+				resolve
 			});
 			rules.push({
 				mimetype: "text/css",
-				...cssRule
+				type: CSS_MODULE_TYPE,
+				resolve
 			});
 		}
 		rules.push(
@@ -1398,9 +1390,16 @@ const applyOptimizationDefaults = (
  * @param {string} options.context build context
  * @param {TargetProperties | false} options.targetProperties target properties
  * @param {Mode} options.mode mode
+ * @param {CssExperimentOptions|false} options.css is css enabled
  * @returns {ResolveOptions} resolve options
  */
-const getResolveDefaults = ({ cache, context, targetProperties, mode }) => {
+const getResolveDefaults = ({
+	cache,
+	context,
+	targetProperties,
+	mode,
+	css
+}) => {
 	/** @type {string[]} */
 	const conditions = ["webpack"];
 
@@ -1468,6 +1467,24 @@ const getResolveDefaults = ({ cache, context, targetProperties, mode }) => {
 		}
 	};
 
+	if (css) {
+		const styleConditions = [];
+
+		styleConditions.push("webpack");
+		styleConditions.push(mode === "development" ? "development" : "production");
+		styleConditions.push("style");
+
+		resolveOptions.byDependency["css-import"] = {
+			// We avoid using any main files because we have to be consistent with CSS `@import`
+			// and CSS `@import` does not handle `main` files in directories,
+			// you should always specify the full URL for styles
+			mainFiles: [],
+			mainFields: ["style", "..."],
+			conditionNames: styleConditions,
+			extensions: [".css"]
+		};
+	}
+
 	return resolveOptions;
 };
 

package/lib/container/RemoteRuntimeModule.js

@@ -18,7 +18,7 @@ class RemoteRuntimeModule extends RuntimeModule {
 	}
 
 	/**
-	 * @returns {string} runtime code
+	 * @returns {string | null} runtime code
 	 */
 	generate() {
 		const { compilation, chunkGraph } = this;

package/lib/css/CssExportsGenerator.js

@@ -19,6 +19,11 @@ const Template = require("../Template");
 /** @typedef {import("../NormalModule")} NormalModule */
 /** @typedef {import("../util/Hash")} Hash */
 
+/**
+ * @template T
+ * @typedef {import("../InitFragment")<T>} InitFragment
+ */
+
 const TYPES = new Set(["javascript"]);
 
 class CssExportsGenerator extends Generator {
@@ -36,6 +41,7 @@ class CssExportsGenerator extends Generator {
 	 */
 	generate(module, generateContext) {
 		const source = new ReplaceSource(new RawSource(""));
+		/** @type {InitFragment<TODO>[]} */
 		const initFragments = [];
 		const cssExports = new Map();
 
@@ -57,6 +63,9 @@ class CssExportsGenerator extends Generator {
 			cssExports
 		};
 
+		/**
+		 * @param {Dependency} dependency the dependency
+		 */
 		const handleDependency = dependency => {
 			const constructor = /** @type {new (...args: any[]) => Dependency} */ (
 				dependency.constructor

package/lib/css/CssGenerator.js

@@ -30,7 +30,7 @@ class CssGenerator extends Generator {
 	 * @returns {Source} generated code
 	 */
 	generate(module, generateContext) {
-		const originalSource = module.originalSource();
+		const originalSource = /** @type {Source} */ (module.originalSource());
 		const source = new ReplaceSource(originalSource);
 		/** @type {InitFragment[]} */
 		const initFragments = [];

package/lib/css/CssLoadingRuntimeModule.js

@@ -14,6 +14,7 @@ const compileBooleanMatcher = require("../util/compileBooleanMatcher");
 const { chunkHasCss } = require("./CssModulesPlugin");
 
 /** @typedef {import("../Chunk")} Chunk */
+/** @typedef {import("../ChunkGraph")} ChunkGraph */
 /** @typedef {import("../Compilation").RuntimeRequirementsContext} RuntimeRequirementsContext */
 
 /**
@@ -55,7 +56,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 	}
 
 	/**
-	 * @returns {string} runtime code
+	 * @returns {string | null} runtime code
 	 */
 	generate() {
 		const { compilation, chunk, _runtimeRequirements } = this;
@@ -67,10 +68,15 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				uniqueName,
 				chunkLoadTimeout: loadTimeout
 			}
-		} = compilation;
+		} = /** @type {Compilation} */ (compilation);
 		const fn = RuntimeGlobals.ensureChunkHandlers;
 		const conditionMap = chunkGraph.getChunkConditionMap(
-			chunk,
+			/** @type {Chunk} */ (chunk),
+			/**
+			 * @param {Chunk} chunk the chunk
+			 * @param {ChunkGraph} chunkGraph the chunk graph
+			 * @returns {boolean} true, if the chunk has css
+			 */
 			(chunk, chunkGraph) =>
 				!!chunkGraph.getChunkModulesIterableBySourceType(chunk, "css")
 		);
@@ -87,7 +93,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 		const initialChunkIdsWithCss = new Set();
 		/** @type {Set<number | string | null>} */
 		const initialChunkIdsWithoutCss = new Set();
-		for (const c of chunk.getAllInitialChunks()) {
+		for (const c of /** @type {Chunk} */ (chunk).getAllInitialChunks()) {
 			(chunkHasCss(c, chunkGraph)
 				? initialChunkIdsWithCss
 				: initialChunkIdsWithoutCss
@@ -98,8 +104,9 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			return null;
 		}
 
-		const { createStylesheet } =
-			CssLoadingRuntimeModule.getCompilationHooks(compilation);
+		const { createStylesheet } = CssLoadingRuntimeModule.getCompilationHooks(
+			/** @type {Compilation} */ (compilation)
+		);
 
 		const stateExpression = withHmr
 			? `${RuntimeGlobals.hmrRuntimeStatePrefix}_css`
@@ -128,6 +135,14 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 
 		/** @type {(str: string) => number} */
 		const cc = str => str.charCodeAt(0);
+		const name = uniqueName
+			? runtimeTemplate.concatenation(
+					"--webpack-",
+					{ expr: "uniqueName" },
+					"-",
+					{ expr: "chunkId" }
+			  )
+			: runtimeTemplate.concatenation("--webpack-", { expr: "chunkId" });
 
 		return Template.asString([
 			"// object to store loaded and loading chunks",
@@ -150,18 +165,27 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				[
 					`var data, token = "", token2, exports = {}, exportsWithId = [], exportsWithDashes = [], ${
 						withHmr ? "moduleIds = [], " : ""
-					}i = 0, cc = 1;`,
-					"try { if(!link) link = loadStylesheet(chunkId); data = link.sheet.cssRules; data = data[data.length - 1].style; } catch(e) { data = getComputedStyle(document.head); }",
-					`data = data.getPropertyValue(${
-						uniqueName
-							? runtimeTemplate.concatenation(
-									"--webpack-",
-									{ expr: "uniqueName" },
-									"-",
-									{ expr: "chunkId" }
-							  )
-							: runtimeTemplate.concatenation("--webpack-", { expr: "chunkId" })
-					});`,
+					}name = ${name}, i = 0, cc = 1;`,
+					"try {",
+					Template.indent([
+						"if(!link) link = loadStylesheet(chunkId);",
+						// `link.sheet.rules` for legacy browsers
+						"var cssRules = link.sheet.cssRules || link.sheet.rules;",
+						"var j = cssRules.length - 1;",
+						"while(j > -1 && !data) {",
+						Template.indent([
+							"var style = cssRules[j--].style;",
+							"if(!style) continue;",
+							`data = style.getPropertyValue(name);`
+						]),
+						"}"
+					]),
+					"}catch(e){}",
+					"if(!data) {",
+					Template.indent([
+						"data = getComputedStyle(document.head).getPropertyValue(name);"
+					]),
+					"}",
 					"if(!data) return [];",
 					"for(; cc; i++) {",
 					Template.indent([
@@ -239,7 +263,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 					"if(!link) {",
 					Template.indent([
 						"needAttach = true;",
-						createStylesheet.call(code, this.chunk)
+						createStylesheet.call(code, /** @type {Chunk} */ (this.chunk))
 					]),
 					"}",
 					`var onLinkComplete = ${runtimeTemplate.basicFunction(