webpack 5.81.0 → 5.82.0

package/bin/webpack.js

@@ -78,8 +78,19 @@ const runCli = cli => {
 	const pkgPath = require.resolve(`${cli.package}/package.json`);
 	// eslint-disable-next-line node/no-missing-require
 	const pkg = require(pkgPath);
-	// eslint-disable-next-line node/no-missing-require
-	require(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]));
+
+	if (pkg.type === "module" || /\.mjs/i.test(pkg.bin[cli.binName])) {
+		// eslint-disable-next-line node/no-unsupported-features/es-syntax
+		import(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName])).catch(
+			error => {
+				console.error(error);
+				process.exitCode = 1;
+			}
+		);
+	} else {
+		// eslint-disable-next-line node/no-missing-require
+		require(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]));
+	}
 };
 
 /**

package/lib/Compilation.js

@@ -2578,6 +2578,8 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 			p.calculate();
 
 			const logger = this.getLogger("webpack.Compilation.ModuleProfile");
+			// Avoid coverage problems due indirect changes
+			/* istanbul ignore next */
 			const logByValue = (value, msg) => {
 				if (value > 1000) {
 					logger.error(msg);

package/lib/CssModule.js

@@ -14,7 +14,13 @@ const makeSerializable = require("./util/makeSerializable");
 /** @typedef {import("./serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
 /** @typedef {import("./serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 
-/** @typedef {NormalModuleCreateData & { cssLayer: string|undefined|null, supports: string|undefined|null, media: string|undefined|null }} CSSModuleCreateData */
+/** @typedef {string|undefined} CssLayer */
+/** @typedef {string|undefined} Supports */
+/** @typedef {string|undefined} Media */
+/** @typedef {[CssLayer?, Supports?, Media?]} InheritanceItem */
+/** @typedef {Array<InheritanceItem>} Inheritance */
+
+/** @typedef {NormalModuleCreateData & { cssLayer: CssLayer|null, supports: Supports|null, media: Media|null, inheritance: Inheritance|null }} CSSModuleCreateData */
 
 class CssModule extends NormalModule {
 	/**
@@ -27,6 +33,7 @@ class CssModule extends NormalModule {
 		this.cssLayer = options.cssLayer;
 		this.supports = options.supports;
 		this.media = options.media;
+		this.inheritance = options.inheritance;
 	}
 
 	/**
@@ -47,6 +54,17 @@ class CssModule extends NormalModule {
 			identifier += `|${this.media}`;
 		}
 
+		if (this.inheritance) {
+			const inheritance = this.inheritance.map(
+				(item, index) =>
+					`inheritance_${index}|${item[0] || ""}|${item[1] || ""}|${
+						item[2] || ""
+					}`
+			);
+
+			identifier += `|${inheritance.join("|")}`;
+		}
+
 		return identifier;
 	}
 
@@ -57,11 +75,21 @@ class CssModule extends NormalModule {
 	readableIdentifier(requestShortener) {
 		const readableIdentifier = super.readableIdentifier(requestShortener);
 
-		return `css ${readableIdentifier}${
-			this.cssLayer ? ` (layer ${this.cssLayer || ""})` : ""
-		}${this.supports ? ` (supports ${this.supports || ""})` : ""}${
-			this.media ? ` (media ${this.media || ""})` : ""
-		}`;
+		let identifier = `css ${readableIdentifier}`;
+
+		if (this.cssLayer) {
+			identifier += ` (layer: ${this.cssLayer})`;
+		}
+
+		if (this.supports) {
+			identifier += ` (supports: ${this.supports})`;
+		}
+
+		if (this.media) {
+			identifier += ` (media: ${this.media})`;
+		}
+
+		return identifier;
 	}
 
 	/**
@@ -77,6 +105,7 @@ class CssModule extends NormalModule {
 		this.cssLayer = m.cssLayer;
 		this.supports = m.supports;
 		this.media = m.media;
+		this.inheritance = m.inheritance;
 	}
 
 	/**
@@ -87,6 +116,7 @@ class CssModule extends NormalModule {
 		write(this.cssLayer);
 		write(this.supports);
 		write(this.media);
+		write(this.inheritance);
 		super.serialize(context);
 	}
 
@@ -114,7 +144,8 @@ class CssModule extends NormalModule {
 			resolveOptions: null,
 			cssLayer: null,
 			supports: null,
-			media: null
+			media: null,
+			inheritance: null
 		});
 		obj.deserialize(context);
 		return obj;
@@ -128,6 +159,7 @@ class CssModule extends NormalModule {
 		this.cssLayer = read();
 		this.supports = read();
 		this.media = read();
+		this.inheritance = read();
 		super.deserialize(context);
 	}
 }

package/lib/WebpackOptionsApply.js

@@ -119,47 +119,40 @@ class WebpackOptionsApply extends OptionsApply {
 		if (options.externalsPresets.webAsync) {
 			//@ts-expect-error https://github.com/microsoft/TypeScript/issues/41697
 			const ExternalsPlugin = require("./ExternalsPlugin");
-			new ExternalsPlugin(
-				"import",
-				options.experiments.css
-					? ({ request, dependencyType }, callback) => {
-							if (dependencyType === "url") {
-								if (/^(\/\/|https?:\/\/)/.test(request))
-									return callback(null, `asset ${request}`);
-							} else if (dependencyType === "css-import") {
-								if (/^(\/\/|https?:\/\/)/.test(request))
-									return callback(null, `css-import ${request}`);
-							} else if (/^(\/\/|https?:\/\/|std:)/.test(request)) {
-								if (/^\.css(\?|$)/.test(request))
-									return callback(null, `css-import ${request}`);
-								return callback(null, `import ${request}`);
-							}
-							callback();
-					  }
-					: /^(\/\/|https?:\/\/|std:)/
-			).apply(compiler);
+			new ExternalsPlugin("import", ({ request, dependencyType }, callback) => {
+				if (dependencyType === "url") {
+					if (/^(\/\/|https?:\/\/|#)/.test(request))
+						return callback(null, `asset ${request}`);
+				} else if (options.experiments.css && dependencyType === "css-import") {
+					if (/^(\/\/|https?:\/\/|#)/.test(request))
+						return callback(null, `css-import ${request}`);
+				} else if (
+					options.experiments.css &&
+					/^(\/\/|https?:\/\/|std:)/.test(request)
+				) {
+					if (/^\.css(\?|$)/.test(request))
+						return callback(null, `css-import ${request}`);
+					return callback(null, `import ${request}`);
+				}
+				callback();
+			}).apply(compiler);
 		} else if (options.externalsPresets.web) {
 			//@ts-expect-error https://github.com/microsoft/TypeScript/issues/41697
 			const ExternalsPlugin = require("./ExternalsPlugin");
-			new ExternalsPlugin(
-				"module",
-				options.experiments.css
-					? ({ request, dependencyType }, callback) => {
-							if (dependencyType === "url") {
-								if (/^(\/\/|https?:\/\/)/.test(request))
-									return callback(null, `asset ${request}`);
-							} else if (dependencyType === "css-import") {
-								if (/^(\/\/|https?:\/\/)/.test(request))
-									return callback(null, `css-import ${request}`);
-							} else if (/^(\/\/|https?:\/\/|std:)/.test(request)) {
-								if (/^\.css(\?|$)/.test(request))
-									return callback(null, `css-import ${request}`);
-								return callback(null, `module ${request}`);
-							}
-							callback();
-					  }
-					: /^(\/\/|https?:\/\/|std:)/
-			).apply(compiler);
+			new ExternalsPlugin("module", ({ request, dependencyType }, callback) => {
+				if (dependencyType === "url") {
+					if (/^(\/\/|https?:\/\/|#)/.test(request))
+						return callback(null, `asset ${request}`);
+				} else if (options.experiments.css && dependencyType === "css-import") {
+					if (/^(\/\/|https?:\/\/|#)/.test(request))
+						return callback(null, `css-import ${request}`);
+				} else if (/^(\/\/|https?:\/\/|std:)/.test(request)) {
+					if (options.experiments.css && /^\.css((\?)|$)/.test(request))
+						return callback(null, `css-import ${request}`);
+					return callback(null, `module ${request}`);
+				}
+				callback();
+			}).apply(compiler);
 		} else if (options.externalsPresets.node) {
 			if (options.experiments.css) {
 				//@ts-expect-error https://github.com/microsoft/TypeScript/issues/41697
@@ -168,10 +161,10 @@ class WebpackOptionsApply extends OptionsApply {
 					"module",
 					({ request, dependencyType }, callback) => {
 						if (dependencyType === "url") {
-							if (/^(\/\/|https?:\/\/)/.test(request))
+							if (/^(\/\/|https?:\/\/|#)/.test(request))
 								return callback(null, `asset ${request}`);
 						} else if (dependencyType === "css-import") {
-							if (/^(\/\/|https?:\/\/)/.test(request))
+							if (/^(\/\/|https?:\/\/|#)/.test(request))
 								return callback(null, `css-import ${request}`);
 						} else if (/^(\/\/|https?:\/\/|std:)/.test(request)) {
 							if (/^\.css(\?|$)/.test(request))

package/lib/cache/MemoryWithGcCachePlugin.js

@@ -34,6 +34,8 @@ class MemoryWithGcCachePlugin {
 			generation++;
 			let clearedEntries = 0;
 			let lastClearedIdentifier;
+			// Avoid coverage problems due indirect changes
+			/* istanbul ignore next */
 			for (const [identifier, entry] of oldCache) {
 				if (entry.until > generation) break;
 

package/lib/config/defaults.js

@@ -961,6 +961,7 @@ const applyOutputDefaults = (
 			() =>
 				output.uniqueName.replace(/[^a-zA-Z0-9\-#=_/@.%]+/g, "_") || "webpack"
 		);
+		D(trustedTypes, "onPolicyCreationFailure", "stop");
 	}
 
 	/**

package/lib/css/CssGenerator.js

@@ -32,6 +32,7 @@ class CssGenerator extends Generator {
 	generate(module, generateContext) {
 		const originalSource = module.originalSource();
 		const source = new ReplaceSource(originalSource);
+		/** @type {InitFragment[]} */
 		const initFragments = [];
 		const cssExports = new Map();
 
@@ -51,6 +52,9 @@ class CssGenerator extends Generator {
 			cssExports
 		};
 
+		/**
+		 * @param {Dependency} dependency dependency
+		 */
 		const handleDependency = dependency => {
 			const constructor = /** @type {new (...args: any[]) => Dependency} */ (
 				dependency.constructor

package/lib/css/CssLoadingRuntimeModule.js

@@ -14,6 +14,7 @@ const compileBooleanMatcher = require("../util/compileBooleanMatcher");
 const { chunkHasCss } = require("./CssModulesPlugin");
 
 /** @typedef {import("../Chunk")} Chunk */
+/** @typedef {import("../Compilation").RuntimeRequirementsContext} RuntimeRequirementsContext */
 
 /**
  * @typedef {Object} JsonpCompilationPluginHooks
@@ -44,11 +45,13 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 		return hooks;
 	}
 
-	constructor(runtimeRequirements, runtimeOptions) {
+	/**
+	 * @param {Set<string>} runtimeRequirements runtime requirements
+	 */
+	constructor(runtimeRequirements) {
 		super("css loading", 10);
 
 		this._runtimeRequirements = runtimeRequirements;
-		this.runtimeOptions = runtimeOptions;
 	}
 
 	/**
@@ -76,10 +79,13 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 		const withLoading =
 			_runtimeRequirements.has(RuntimeGlobals.ensureChunkHandlers) &&
 			hasCssMatcher !== false;
+		/** @type {boolean} */
 		const withHmr = _runtimeRequirements.has(
 			RuntimeGlobals.hmrDownloadUpdateHandlers
 		);
+		/** @type {Set<number | string | null>} */
 		const initialChunkIdsWithCss = new Set();
+		/** @type {Set<number | string | null>} */
 		const initialChunkIdsWithoutCss = new Set();
 		for (const c of chunk.getAllInitialChunks()) {
 			(chunkHasCss(c, chunkGraph)
@@ -120,6 +126,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				: ""
 		]);
 
+		/** @type {(str: string) => number} */
 		const cc = str => str.charCodeAt(0);
 
 		return Template.asString([

package/lib/css/CssModulesPlugin.js

@@ -15,6 +15,7 @@ const {
 } = require("../ModuleTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const SelfModuleFactory = require("../SelfModuleFactory");
+const WebpackError = require("../WebpackError");
 const CssExportDependency = require("../dependencies/CssExportDependency");
 const CssImportDependency = require("../dependencies/CssImportDependency");
 const CssLocalIdentifierDependency = require("../dependencies/CssLocalIdentifierDependency");
@@ -32,9 +33,14 @@ const CssParser = require("./CssParser");
 
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("../../declarations/WebpackOptions").CssExperimentOptions} CssExperimentOptions */
+/** @typedef {import("../../declarations/WebpackOptions").Output} OutputOptions */
 /** @typedef {import("../Chunk")} Chunk */
+/** @typedef {import("../ChunkGraph")} ChunkGraph */
+/** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
+/** @typedef {import("../Compilation")} Compilation */
 /** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../Module")} Module */
+/** @typedef {import("../util/memoize")} Memoize */
 
 const getCssLoadingRuntimeModule = memoize(() =>
 	require("./CssLoadingRuntimeModule")
@@ -65,6 +71,11 @@ const validateParserOptions = createSchemaValidation(
 	}
 );
 
+/**
+ * @param {string} str string
+ * @param {boolean=} omitOptionalUnderscore if true, optional underscore is not added
+ * @returns {string} escaped string
+ */
 const escapeCss = (str, omitOptionalUnderscore) => {
 	const escaped = `${str}`.replace(
 		// cspell:word uffff
@@ -170,12 +181,56 @@ class CssModulesPlugin {
 								// When CSS is imported from CSS there is only one dependency
 								const dependency = resolveData.dependencies[0];
 
-								return new CssModule({
-									...createData,
-									cssLayer: dependency.layer,
-									supports: dependency.supports,
-									media: dependency.media
-								});
+								if (dependency instanceof CssImportDependency) {
+									const parent =
+										/** @type {CssModule} */
+										(compilation.moduleGraph.getParentModule(dependency));
+
+									if (parent instanceof CssModule) {
+										/** @type {import("../CssModule").Inheritance | undefined} */
+										let inheritance;
+
+										if (
+											(parent.cssLayer !== null &&
+												parent.cssLayer !== undefined) ||
+											parent.supports ||
+											parent.media
+										) {
+											if (!inheritance) {
+												inheritance = [];
+											}
+
+											inheritance.push([
+												parent.cssLayer,
+												parent.supports,
+												parent.media
+											]);
+										}
+
+										if (parent.inheritance) {
+											if (!inheritance) {
+												inheritance = [];
+											}
+
+											inheritance.push(...parent.inheritance);
+										}
+
+										return new CssModule({
+											...createData,
+											cssLayer: dependency.layer,
+											supports: dependency.supports,
+											media: dependency.media,
+											inheritance
+										});
+									}
+
+									return new CssModule({
+										...createData,
+										cssLayer: dependency.layer,
+										supports: dependency.supports,
+										media: dependency.media
+									});
+								}
 							}
 
 							return new CssModule(createData);
@@ -219,6 +274,7 @@ class CssModulesPlugin {
 
 					if (chunk instanceof HotUpdateChunk) return result;
 
+					/** @type {CssModule[] | undefined} */
 					const modules = orderedCssModulesPerChunk.get(chunk);
 					if (modules !== undefined) {
 						result.push({
@@ -275,9 +331,16 @@ class CssModulesPlugin {
 		);
 	}
 
+	/**
+	 * @param {Chunk} chunk chunk
+	 * @param {Iterable<Module>} modules unordered modules
+	 * @param {Compilation} compilation compilation
+	 * @returns {Module[]} ordered modules
+	 */
 	getModulesInOrder(chunk, modules, compilation) {
 		if (!modules) return [];
 
+		/** @type {Module[]} */
 		const modulesList = [...modules];
 
 		// Get ordered list of modules per chunk group
@@ -311,6 +374,7 @@ class CssModulesPlugin {
 
 		modulesByChunkGroup.sort(compareModuleLists);
 
+		/** @type {Module[]} */
 		const finalModules = [];
 
 		for (;;) {
@@ -320,6 +384,7 @@ class CssModulesPlugin {
 				// done, everything empty
 				break;
 			}
+			/** @type {Module} */
 			let selectedModule = list[list.length - 1];
 			let hasFailed = undefined;
 			outer: for (;;) {
@@ -345,18 +410,17 @@ class CssModulesPlugin {
 				if (compilation) {
 					// TODO print better warning
 					compilation.warnings.push(
-						new Error(
-							`chunk ${
-								chunk.name || chunk.id
-							}\nConflicting order between ${hasFailed.readableIdentifier(
-								compilation.requestShortener
-							)} and ${selectedModule.readableIdentifier(
+						new WebpackError(
+							`chunk ${chunk.name || chunk.id}\nConflicting order between ${
+								/** @type {Module} */
+								(hasFailed).readableIdentifier(compilation.requestShortener)
+							} and ${selectedModule.readableIdentifier(
 								compilation.requestShortener
 							)}`
 						)
 					);
 				}
-				selectedModule = hasFailed;
+				selectedModule = /** @type {Module} */ (hasFailed);
 			}
 			// Insert the selected module into the final modules list
 			finalModules.push(selectedModule);
@@ -374,6 +438,12 @@ class CssModulesPlugin {
 		return finalModules;
 	}
 
+	/**
+	 * @param {Chunk} chunk chunk
+	 * @param {ChunkGraph} chunkGraph chunk graph
+	 * @param {Compilation} compilation compilation
+	 * @returns {Module[]} ordered css modules
+	 */
 	getOrderedChunkCssModules(chunk, chunkGraph, compilation) {
 		return [
 			...this.getModulesInOrder(
@@ -397,6 +467,15 @@ class CssModulesPlugin {
 		];
 	}
 
+	/**
+	 * @param {Object} options options
+	 * @param {string | undefined} options.uniqueName unique name
+	 * @param {Chunk} options.chunk chunk
+	 * @param {ChunkGraph} options.chunkGraph chunk graph
+	 * @param {CodeGenerationResults} options.codeGenerationResults code generation results
+	 * @param {CssModule[]} options.modules ordered css modules
+	 * @returns {Source} generated source
+	 */
 	renderChunk({
 		uniqueName,
 		chunk,
@@ -405,6 +484,7 @@ class CssModulesPlugin {
 		modules
 	}) {
 		const source = new ConcatSource();
+		/** @type {string[]} */
 		const metaData = [];
 		for (const module of modules) {
 			try {
@@ -414,35 +494,48 @@ class CssModulesPlugin {
 					codeGenResult.sources.get("css") ||
 					codeGenResult.sources.get("css-import");
 
-				if (module.media) {
-					moduleSource = new ConcatSource(
-						`@media ${module.media} {\n`,
-						new PrefixSource("\t", moduleSource),
-						"}"
-					);
-				}
+				let inheritance = [[module.cssLayer, module.supports, module.media]];
 
-				if (module.supports) {
-					moduleSource = new ConcatSource(
-						`@supports (${module.supports}) {\n`,
-						new PrefixSource("\t", moduleSource),
-						"}"
-					);
+				if (module.inheritance) {
+					inheritance.push(...module.inheritance);
 				}
 
-				// Layer can be anonymous
-				if (module.cssLayer !== undefined && module.cssLayer !== null) {
-					moduleSource = new ConcatSource(
-						`@layer${module.cssLayer ? ` (${module.cssLayer})` : ""} {\n`,
-						new PrefixSource("\t", moduleSource),
-						"}"
-					);
+				for (let i = 0; i < inheritance.length; i++) {
+					const layer = inheritance[i][0];
+					const supports = inheritance[i][1];
+					const media = inheritance[i][2];
+
+					if (media) {
+						moduleSource = new ConcatSource(
+							`@media ${media} {\n`,
+							new PrefixSource("\t", moduleSource),
+							"}\n"
+						);
+					}
+
+					if (supports) {
+						moduleSource = new ConcatSource(
+							`@supports (${supports}) {\n`,
+							new PrefixSource("\t", moduleSource),
+							"}\n"
+						);
+					}
+
+					// Layer can be anonymous
+					if (layer !== undefined && layer !== null) {
+						moduleSource = new ConcatSource(
+							`@layer${layer ? ` ${layer}` : ""} {\n`,
+							new PrefixSource("\t", moduleSource),
+							"}\n"
+						);
+					}
 				}
 
 				if (moduleSource) {
 					source.add(moduleSource);
 					source.add("\n");
 				}
+				/** @type {Map<string, string> | undefined} */
 				const exports =
 					codeGenResult.data && codeGenResult.data.get("css-exports");
 				let moduleId = chunkGraph.getModuleId(module) + "";
@@ -482,6 +575,11 @@ class CssModulesPlugin {
 		return source;
 	}
 
+	/**
+	 * @param {Chunk} chunk chunk
+	 * @param {OutputOptions} outputOptions output options
+	 * @returns {Chunk["cssFilenameTemplate"] | OutputOptions["cssFilename"] | OutputOptions["cssChunkFilename"]} used filename template
+	 */
 	static getChunkFilenameTemplate(chunk, outputOptions) {
 		if (chunk.cssFilenameTemplate) {
 			return chunk.cssFilenameTemplate;
@@ -492,6 +590,11 @@ class CssModulesPlugin {
 		}
 	}
 
+	/**
+	 * @param {Chunk} chunk chunk
+	 * @param {ChunkGraph} chunkGraph chunk graph
+	 * @returns {boolean} true, when the chunk has css
+	 */
 	static chunkHasCss(chunk, chunkGraph) {
 		return (
 			!!chunkGraph.getChunkModulesIterableBySourceType(chunk, "css") ||