webpack 5.76.1 → 5.88.0

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,8 +30,9 @@ 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 = [];
 		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,8 @@ const compileBooleanMatcher = require("../util/compileBooleanMatcher");
 const { chunkHasCss } = require("./CssModulesPlugin");
 
 /** @typedef {import("../Chunk")} Chunk */
+/** @typedef {import("../ChunkGraph")} ChunkGraph */
+/** @typedef {import("../Compilation").RuntimeRequirementsContext} RuntimeRequirementsContext */
 
 /**
  * @typedef {Object} JsonpCompilationPluginHooks
@@ -44,15 +46,17 @@ 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;
 	}
 
 	/**
-	 * @returns {string} runtime code
+	 * @returns {string | null} runtime code
 	 */
 	generate() {
 		const { compilation, chunk, _runtimeRequirements } = this;
@@ -64,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")
 		);
@@ -76,12 +85,15 @@ 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()) {
+		for (const c of /** @type {Chunk} */ (chunk).getAllInitialChunks()) {
 			(chunkHasCss(c, chunkGraph)
 				? initialChunkIdsWithCss
 				: initialChunkIdsWithoutCss
@@ -92,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`
@@ -111,7 +124,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				? crossOriginLoading === "use-credentials"
 					? 'link.crossOrigin = "use-credentials";'
 					: Template.asString([
-							"if (link.src.indexOf(window.location.origin + '/') !== 0) {",
+							"if (link.href.indexOf(window.location.origin + '/') !== 0) {",
 							Template.indent(
 								`link.crossOrigin = ${JSON.stringify(crossOriginLoading)};`
 							),
@@ -120,7 +133,16 @@ 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",
@@ -143,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([
@@ -232,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(

package/lib/css/CssModulesPlugin.js

@@ -5,10 +5,18 @@
 
 "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,
+	CSS_MODULE_TYPE_AUTO
+} = 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,14 +34,23 @@ 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")
 );
 
+/**
+ * @param {string} name name
+ * @returns {{oneOf: [{$ref: string}], definitions: *}} schema
+ */
 const getSchema = name => {
 	const { definitions } = require("../../schemas/WebpackOptions.json");
 	return {
@@ -59,6 +76,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 +147,101 @@ 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,
+					CSS_MODULE_TYPE_AUTO
+				]) {
+					normalModuleFactory.hooks.createParser
+						.for(type)
+						.tap(plugin, parserOptions => {
+							validateParserOptions(parserOptions);
+
+							switch (type) {
+								case CSS_MODULE_TYPE:
+								case CSS_MODULE_TYPE_AUTO:
+									return new CssParser();
+								case CSS_MODULE_TYPE_GLOBAL:
+									return new CssParser({
+										allowModeSwitch: false
+									});
+								case CSS_MODULE_TYPE_MODULE:
+									return new CssParser({
+										defaultMode: "local"
+									});
+							}
+						});
+					normalModuleFactory.hooks.createGenerator
+						.for(type)
+						.tap(plugin, generatorOptions => {
+							validateGeneratorOptions(generatorOptions);
+							return this._exportsOnly
+								? new CssExportsGenerator()
+								: new CssGenerator();
 						});
-					});
-				normalModuleFactory.hooks.createParser
-					.for("css/module")
-					.tap(plugin, parserOptions => {
-						validateParserOptions(parserOptions);
-						return new CssParser({
-							defaultMode: "local"
+					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);
 						});
-					});
-				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();
-					});
+				}
 				const orderedCssModulesPerChunk = new WeakMap();
 				compilation.hooks.afterCodeGeneration.tap("CssModulesPlugin", () => {
 					const { chunkGraph } = compilation;
@@ -210,6 +280,7 @@ class CssModulesPlugin {
 
 					if (chunk instanceof HotUpdateChunk) return result;
 
+					/** @type {CssModule[] | undefined} */
 					const modules = orderedCssModulesPerChunk.get(chunk);
 					if (modules !== undefined) {
 						result.push({
@@ -237,12 +308,28 @@ class CssModulesPlugin {
 					}
 					return result;
 				});
-				const enabledChunks = new WeakSet();
+				const globalChunkLoading = compilation.outputOptions.chunkLoading;
+				/**
+				 * @param {Chunk} chunk the chunk
+				 * @returns {boolean} true, when enabled
+				 */
+				const isEnabledForChunk = chunk => {
+					const options = chunk.getEntryOptions();
+					const chunkLoading =
+						options && options.chunkLoading !== undefined
+							? options.chunkLoading
+							: globalChunkLoading;
+					return chunkLoading === "jsonp";
+				};
+				const onceForChunkSet = new WeakSet();
+				/**
+				 * @param {Chunk} chunk chunk to check
+				 * @param {Set<string>} set runtime requirements
+				 */
 				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);
@@ -266,9 +353,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
@@ -282,7 +376,10 @@ class CssModulesPlugin {
 					};
 				})
 				.filter(item => item.index !== undefined)
-				.sort((a, b) => b.index - a.index)
+				.sort(
+					(a, b) =>
+						/** @type {number} */ (b.index) - /** @type {number} */ (a.index)
+				)
 				.map(item => item.module);
 
 			return { list: sortedModules, set: new Set(sortedModules) };
@@ -302,6 +399,7 @@ class CssModulesPlugin {
 
 		modulesByChunkGroup.sort(compareModuleLists);
 
+		/** @type {Module[]} */
 		const finalModules = [];
 
 		for (;;) {
@@ -311,6 +409,7 @@ class CssModulesPlugin {
 				// done, everything empty
 				break;
 			}
+			/** @type {Module} */
 			let selectedModule = list[list.length - 1];
 			let hasFailed = undefined;
 			outer: for (;;) {
@@ -336,18 +435,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,29 +463,50 @@ 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(
 				chunk,
-				chunkGraph.getOrderedChunkModulesIterableBySourceType(
-					chunk,
-					"css-import",
-					compareModulesByIdentifier
+				/** @type {Iterable<Module>} */
+				(
+					chunkGraph.getOrderedChunkModulesIterableBySourceType(
+						chunk,
+						"css-import",
+						compareModulesByIdentifier
+					)
 				),
 				compilation
 			),
 			...this.getModulesInOrder(
 				chunk,
-				chunkGraph.getOrderedChunkModulesIterableBySourceType(
-					chunk,
-					"css",
-					compareModulesByIdentifier
+				/** @type {Iterable<Module>} */
+				(
+					chunkGraph.getOrderedChunkModulesIterableBySourceType(
+						chunk,
+						"css",
+						compareModulesByIdentifier
+					)
 				),
 				compilation
 			)
 		];
 	}
 
+	/**
+	 * @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 +515,70 @@ 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 =
-					codeGenResult.sources.get("css") ||
-					codeGenResult.sources.get("css-import");
-				if (s) {
-					source.add(s);
+				let moduleSource =
+					/** @type {Source} */
+					(
+						codeGenResult.sources.get("css") ||
+							codeGenResult.sources.get("css-import")
+					);
+
+				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
@@ -428,7 +596,8 @@ class CssModulesPlugin {
 					}${escapeCss(moduleId)}`
 				);
 			} catch (e) {
-				e.message += `\nduring rendering of css ${module.identifier()}`;
+				/** @type {Error} */
+				(e).message += `\nduring rendering of css ${module.identifier()}`;
 				throw e;
 			}
 		}
@@ -441,6 +610,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 +625,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") ||