webpack 5.81.0 → 5.82.1

package/lib/config/defaults.js

@@ -13,7 +13,8 @@ const {
 	WEBASSEMBLY_MODULE_TYPE_ASYNC,
 	JAVASCRIPT_MODULE_TYPE_ESM,
 	JAVASCRIPT_MODULE_TYPE_DYNAMIC,
-	WEBASSEMBLY_MODULE_TYPE_SYNC
+	WEBASSEMBLY_MODULE_TYPE_SYNC,
+	ASSET_MODULE_TYPE
 } = require("../ModuleTypeConstants");
 const Template = require("../Template");
 const { cleverMerge } = require("../util/cleverMerge");
@@ -511,7 +512,7 @@ const applyModuleDefaults = (
 		D(module, "unsafeCache", false);
 	}
 
-	F(module.parser, "asset", () => ({}));
+	F(module.parser, ASSET_MODULE_TYPE, () => ({}));
 	F(module.parser.asset, "dataUrlCondition", () => ({}));
 	if (typeof module.parser.asset.dataUrlCondition === "object") {
 		D(module.parser.asset.dataUrlCondition, "maxSize", 8096);
@@ -961,6 +962,7 @@ const applyOutputDefaults = (
 			() =>
 				output.uniqueName.replace(/[^a-zA-Z0-9\-#=_/@.%]+/g, "_") || "webpack"
 		);
+		D(trustedTypes, "onPolicyCreationFailure", "stop");
 	}
 
 	/**

package/lib/container/FallbackModule.js

@@ -7,6 +7,7 @@
 
 const { RawSource } = require("webpack-sources");
 const Module = require("../Module");
+const { WEBPACK_MODULE_TYPE_FALLBACK } = require("../ModuleTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
 const makeSerializable = require("../util/makeSerializable");
@@ -37,7 +38,7 @@ class FallbackModule extends Module {
 	 * @param {string[]} requests list of requests to choose one
 	 */
 	constructor(requests) {
-		super("fallback-module");
+		super(WEBPACK_MODULE_TYPE_FALLBACK);
 		this.requests = requests;
 		this._identifier = `fallback ${this.requests.join(" ")}`;
 	}

package/lib/container/RemoteModule.js

@@ -7,6 +7,7 @@
 
 const { RawSource } = require("webpack-sources");
 const Module = require("../Module");
+const { WEBPACK_MODULE_TYPE_REMOTE } = require("../ModuleTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const makeSerializable = require("../util/makeSerializable");
 const FallbackDependency = require("./FallbackDependency");
@@ -39,7 +40,7 @@ class RemoteModule extends Module {
 	 * @param {string} shareScope the used share scope name
 	 */
 	constructor(request, externalRequests, internalRequest, shareScope) {
-		super("remote-module");
+		super(WEBPACK_MODULE_TYPE_REMOTE);
 		this.request = request;
 		this.externalRequests = externalRequests;
 		this.internalRequest = internalRequest;

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
@@ -146,7 +157,6 @@ class CssModulesPlugin {
 									return new CssParser();
 								case CSS_MODULE_TYPE_GLOBAL:
 									return new CssParser({
-										allowPseudoBlocks: false,
 										allowModeSwitch: false
 									});
 								case CSS_MODULE_TYPE_MODULE:
@@ -170,12 +180,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 +273,7 @@ class CssModulesPlugin {
 
 					if (chunk instanceof HotUpdateChunk) return result;
 
+					/** @type {CssModule[] | undefined} */
 					const modules = orderedCssModulesPerChunk.get(chunk);
 					if (modules !== undefined) {
 						result.push({
@@ -246,12 +301,20 @@ class CssModulesPlugin {
 					}
 					return result;
 				});
-				const enabledChunks = new WeakSet();
+				const globalChunkLoading = compilation.outputOptions.chunkLoading;
+				const isEnabledForChunk = chunk => {
+					const options = chunk.getEntryOptions();
+					const chunkLoading =
+						options && options.chunkLoading !== undefined
+							? options.chunkLoading
+							: globalChunkLoading;
+					return chunkLoading === "jsonp";
+				};
+				const onceForChunkSet = new WeakSet();
 				const handler = (chunk, set) => {
-					if (enabledChunks.has(chunk)) {
-						return;
-					}
-					enabledChunks.add(chunk);
+					if (onceForChunkSet.has(chunk)) return;
+					onceForChunkSet.add(chunk);
+					if (!isEnabledForChunk(chunk)) return;
 
 					set.add(RuntimeGlobals.publicPath);
 					set.add(RuntimeGlobals.getChunkCssFilename);
@@ -275,9 +338,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 +381,7 @@ class CssModulesPlugin {
 
 		modulesByChunkGroup.sort(compareModuleLists);
 
+		/** @type {Module[]} */
 		const finalModules = [];
 
 		for (;;) {
@@ -320,6 +391,7 @@ class CssModulesPlugin {
 				// done, everything empty
 				break;
 			}
+			/** @type {Module} */
 			let selectedModule = list[list.length - 1];
 			let hasFailed = undefined;
 			outer: for (;;) {
@@ -345,18 +417,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 +445,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 +474,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 +491,7 @@ class CssModulesPlugin {
 		modules
 	}) {
 		const source = new ConcatSource();
+		/** @type {string[]} */
 		const metaData = [];
 		for (const module of modules) {
 			try {
@@ -414,35 +501,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 +582,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 +597,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") ||