webpack 5.80.0 → 5.82.0

package/lib/cache/ResolverCachePlugin.js

@@ -124,8 +124,11 @@ class ResolverCachePlugin {
 			const newResolveContext = {
 				...resolveContext,
 				stack: new Set(),
+				/** @type {LazySet<string>} */
 				missingDependencies: new LazySet(),
+				/** @type {LazySet<string>} */
 				fileDependencies: new LazySet(),
+				/** @type {LazySet<string>} */
 				contextDependencies: new LazySet()
 			};
 			let yieldResult;

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/config/normalization.js

@@ -327,6 +327,7 @@ const getNormalizedWebpackOptions = config => {
 				hotUpdateChunkFilename: output.hotUpdateChunkFilename,
 				hotUpdateGlobal: output.hotUpdateGlobal,
 				hotUpdateMainFilename: output.hotUpdateMainFilename,
+				ignoreBrowserWarnings: output.ignoreBrowserWarnings,
 				iife: output.iife,
 				importFunctionName: output.importFunctionName,
 				importMetaName: output.importMetaName,

package/lib/container/ContainerEntryModule.js

@@ -26,6 +26,8 @@ const ContainerExposedDependency = require("./ContainerExposedDependency");
 /** @typedef {import("../RequestShortener")} RequestShortener */
 /** @typedef {import("../ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("../WebpackError")} WebpackError */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 /** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("../util/fs").InputFileSystem} InputFileSystem */
 /** @typedef {import("./ContainerEntryDependency")} ContainerEntryDependency */
@@ -260,6 +262,9 @@ class ContainerEntryModule extends Module {
 		return 42;
 	}
 
+	/**
+	 * @param {ObjectSerializerContext} context context
+	 */
 	serialize(context) {
 		const { write } = context;
 		write(this._name);

package/lib/container/ContainerExposedDependency.js

@@ -8,6 +8,9 @@
 const ModuleDependency = require("../dependencies/ModuleDependency");
 const makeSerializable = require("../util/makeSerializable");
 
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
+
 class ContainerExposedDependency extends ModuleDependency {
 	/**
 	 * @param {string} exposedName public name
@@ -33,11 +36,17 @@ class ContainerExposedDependency extends ModuleDependency {
 		return `exposed dependency ${this.exposedName}=${this.request}`;
 	}
 
+	/**
+	 * @param {ObjectSerializerContext} context context
+	 */
 	serialize(context) {
 		context.write(this.exposedName);
 		super.serialize(context);
 	}
 
+	/**
+	 * @param {ObjectDeserializerContext} context context
+	 */
 	deserialize(context) {
 		this.exposedName = context.read();
 		super.deserialize(context);

package/lib/container/FallbackDependency.js

@@ -8,6 +8,9 @@
 const Dependency = require("../Dependency");
 const makeSerializable = require("../util/makeSerializable");
 
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
+
 class FallbackDependency extends Dependency {
 	constructor(requests) {
 		super();
@@ -29,6 +32,9 @@ class FallbackDependency extends Dependency {
 		return "esm";
 	}
 
+	/**
+	 * @param {ObjectSerializerContext} context context
+	 */
 	serialize(context) {
 		const { write } = context;
 		write(this.requests);

package/lib/container/FallbackModule.js

@@ -24,6 +24,8 @@ const FallbackItemDependency = require("./FallbackItemDependency");
 /** @typedef {import("../RequestShortener")} RequestShortener */
 /** @typedef {import("../ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("../WebpackError")} WebpackError */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 /** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("../util/fs").InputFileSystem} InputFileSystem */
 
@@ -154,6 +156,9 @@ class FallbackModule extends Module {
 		return { sources, runtimeRequirements: RUNTIME_REQUIREMENTS };
 	}
 
+	/**
+	 * @param {ObjectSerializerContext} context context
+	 */
 	serialize(context) {
 		const { write } = context;
 		write(this.requests);

package/lib/container/RemoteModule.js

@@ -23,6 +23,8 @@ const RemoteToExternalDependency = require("./RemoteToExternalDependency");
 /** @typedef {import("../RequestShortener")} RequestShortener */
 /** @typedef {import("../ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("../WebpackError")} WebpackError */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 /** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("../util/fs").InputFileSystem} InputFileSystem */
 
@@ -149,6 +151,9 @@ class RemoteModule extends Module {
 		return { sources, data, runtimeRequirements: RUNTIME_REQUIREMENTS };
 	}
 
+	/**
+	 * @param {ObjectSerializerContext} context context
+	 */
 	serialize(context) {
 		const { write } = context;
 		write(this.request);

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

@@ -5,10 +5,17 @@
 
 "use strict";
 
-const { ConcatSource } = require("webpack-sources");
+const { ConcatSource, PrefixSource } = require("webpack-sources");
+const CssModule = require("../CssModule");
 const HotUpdateChunk = require("../HotUpdateChunk");
+const {
+	CSS_MODULE_TYPE,
+	CSS_MODULE_TYPE_GLOBAL,
+	CSS_MODULE_TYPE_MODULE
+} = 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");
@@ -26,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")
@@ -59,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
@@ -125,53 +142,100 @@ class CssModulesPlugin {
 					StaticExportsDependency,
 					new StaticExportsDependency.Template()
 				);
-				normalModuleFactory.hooks.createParser
-					.for("css")
-					.tap(plugin, parserOptions => {
-						validateParserOptions(parserOptions);
-						return new CssParser();
-					});
-				normalModuleFactory.hooks.createParser
-					.for("css/global")
-					.tap(plugin, parserOptions => {
-						validateParserOptions(parserOptions);
-						return new CssParser({
-							allowPseudoBlocks: false,
-							allowModeSwitch: false
+				for (const type of [
+					CSS_MODULE_TYPE,
+					CSS_MODULE_TYPE_GLOBAL,
+					CSS_MODULE_TYPE_MODULE
+				]) {
+					normalModuleFactory.hooks.createParser
+						.for(type)
+						.tap(plugin, parserOptions => {
+							validateParserOptions(parserOptions);
+
+							switch (type) {
+								case CSS_MODULE_TYPE:
+									return new CssParser();
+								case CSS_MODULE_TYPE_GLOBAL:
+									return new CssParser({
+										allowPseudoBlocks: false,
+										allowModeSwitch: false
+									});
+								case CSS_MODULE_TYPE_MODULE:
+									return new CssParser({
+										defaultMode: "local"
+									});
+							}
 						});
-					});
-				normalModuleFactory.hooks.createParser
-					.for("css/module")
-					.tap(plugin, parserOptions => {
-						validateParserOptions(parserOptions);
-						return new CssParser({
-							defaultMode: "local"
+					normalModuleFactory.hooks.createGenerator
+						.for(type)
+						.tap(plugin, generatorOptions => {
+							validateGeneratorOptions(generatorOptions);
+							return this._exportsOnly
+								? new CssExportsGenerator()
+								: new CssGenerator();
 						});
-					});
-				normalModuleFactory.hooks.createGenerator
-					.for("css")
-					.tap(plugin, generatorOptions => {
-						validateGeneratorOptions(generatorOptions);
-						return this._exportsOnly
-							? new CssExportsGenerator()
-							: new CssGenerator();
-					});
-				normalModuleFactory.hooks.createGenerator
-					.for("css/global")
-					.tap(plugin, generatorOptions => {
-						validateGeneratorOptions(generatorOptions);
-						return this._exportsOnly
-							? new CssExportsGenerator()
-							: new CssGenerator();
-					});
-				normalModuleFactory.hooks.createGenerator
-					.for("css/module")
-					.tap(plugin, generatorOptions => {
-						validateGeneratorOptions(generatorOptions);
-						return this._exportsOnly
-							? new CssExportsGenerator()
-							: new CssGenerator();
-					});
+					normalModuleFactory.hooks.createModuleClass
+						.for(type)
+						.tap(plugin, (createData, resolveData) => {
+							if (resolveData.dependencies.length > 0) {
+								// When CSS is imported from CSS there is only one dependency
+								const dependency = resolveData.dependencies[0];
+
+								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);
+						});
+				}
 				const orderedCssModulesPerChunk = new WeakMap();
 				compilation.hooks.afterCodeGeneration.tap("CssModulesPlugin", () => {
 					const { chunkGraph } = compilation;
@@ -210,6 +274,7 @@ class CssModulesPlugin {
 
 					if (chunk instanceof HotUpdateChunk) return result;
 
+					/** @type {CssModule[] | undefined} */
 					const modules = orderedCssModulesPerChunk.get(chunk);
 					if (modules !== undefined) {
 						result.push({
@@ -266,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
@@ -302,6 +374,7 @@ class CssModulesPlugin {
 
 		modulesByChunkGroup.sort(compareModuleLists);
 
+		/** @type {Module[]} */
 		const finalModules = [];
 
 		for (;;) {
@@ -311,6 +384,7 @@ class CssModulesPlugin {
 				// done, everything empty
 				break;
 			}
+			/** @type {Module} */
 			let selectedModule = list[list.length - 1];
 			let hasFailed = undefined;
 			outer: for (;;) {
@@ -336,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);
@@ -365,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(
@@ -388,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,
@@ -396,21 +484,67 @@ class CssModulesPlugin {
 		modules
 	}) {
 		const source = new ConcatSource();
+		/** @type {string[]} */
 		const metaData = [];
 		for (const module of modules) {
 			try {
 				const codeGenResult = codeGenerationResults.get(module, chunk.runtime);
 
-				const s =
+				let moduleSource =
 					codeGenResult.sources.get("css") ||
 					codeGenResult.sources.get("css-import");
-				if (s) {
-					source.add(s);
+
+				let inheritance = [[module.cssLayer, module.supports, module.media]];
+
+				if (module.inheritance) {
+					inheritance.push(...module.inheritance);
+				}
+
+				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");
-				const moduleId = chunkGraph.getModuleId(module) + "";
+				let moduleId = chunkGraph.getModuleId(module) + "";
+
+				// When `optimization.moduleIds` is `named` the module id is a path, so we need to normalize it between platforms
+				if (typeof moduleId === "string") {
+					moduleId = moduleId.replace(/\\/g, "/");
+				}
+
 				metaData.push(
 					`${
 						exports
@@ -441,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;
@@ -451,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") ||