webpack 5.93.0 → 5.94.0

package/lib/css/CssModulesPlugin.js

@@ -5,13 +5,16 @@
 
 "use strict";
 
+const { SyncWaterfallHook, SyncHook } = require("tapable");
 const {
 	ConcatSource,
 	PrefixSource,
 	ReplaceSource,
 	CachedSource
 } = require("webpack-sources");
+const Compilation = require("../Compilation");
 const CssModule = require("../CssModule");
+const { tryRunOrWebpackError } = require("../HookWebpackError");
 const HotUpdateChunk = require("../HotUpdateChunk");
 const {
 	CSS_MODULE_TYPE,
@@ -39,17 +42,31 @@ const CssGenerator = require("./CssGenerator");
 const CssParser = require("./CssParser");
 
 /** @typedef {import("webpack-sources").Source} Source */
-/** @typedef {import("../../declarations/WebpackOptions").Output} OutputOptions */
+/** @typedef {import("../../declarations/WebpackOptions").OutputNormalized} OutputOptions */
 /** @typedef {import("../Chunk")} Chunk */
 /** @typedef {import("../ChunkGraph")} ChunkGraph */
 /** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
-/** @typedef {import("../Compilation")} Compilation */
+/** @typedef {import("../Compilation").ChunkHashContext} ChunkHashContext */
 /** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../CssModule").Inheritance} Inheritance */
 /** @typedef {import("../DependencyTemplate").CssExportsData} CssExportsData */
 /** @typedef {import("../Module")} Module */
+/** @typedef {import("../Template").RuntimeTemplate} RuntimeTemplate */
+/** @typedef {import("../TemplatedPathPlugin").TemplatePath} TemplatePath */
+/** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("../util/memoize")} Memoize */
 
+/**
+ * @typedef {object} ChunkRenderContext
+ * @property {RuntimeTemplate} runtimeTemplate runtime template
+ */
+
+/**
+ * @typedef {object} CompilationHooks
+ * @property {SyncWaterfallHook<[Source, Module, ChunkRenderContext]>} renderModulePackage
+ * @property {SyncHook<[Chunk, Hash, ChunkHashContext]>} chunkHash
+ */
+
 const getCssLoadingRuntimeModule = memoize(() =>
 	require("./CssLoadingRuntimeModule")
 );
@@ -120,6 +137,9 @@ const validateParserOptions = {
 	)
 };
 
+/** @type {WeakMap<Compilation, CompilationHooks>} */
+const compilationHooksMap = new WeakMap();
+
 /**
  * @param {string} str string
  * @param {boolean=} omitOptionalUnderscore if true, optional underscore is not added
@@ -128,7 +148,7 @@ const validateParserOptions = {
 const escapeCss = (str, omitOptionalUnderscore) => {
 	const escaped = `${str}`.replace(
 		// cspell:word uffff
-		/[^a-zA-Z0-9_\u0081-\uffff-]/g,
+		/[^a-zA-Z0-9_\u0081-\uFFFF-]/g,
 		s => `\\${s}`
 	);
 	return !omitOptionalUnderscore && /^(?!--)[0-9_-]/.test(escaped)
@@ -140,13 +160,13 @@ const escapeCss = (str, omitOptionalUnderscore) => {
  * @param {string} str string
  * @returns {string} encoded string
  */
-const LZWEncode = str => {
+const lzwEncode = str => {
 	/** @type {Map<string, string>} */
 	const map = new Map();
 	let encoded = "";
 	let phrase = str[0];
 	let code = 256;
-	let maxCode = "\uffff".charCodeAt(0);
+	const maxCode = "\uFFFF".charCodeAt(0);
 	for (let i = 1; i < str.length; i++) {
 		const c = str[i];
 		if (map.has(phrase + c)) {
@@ -165,9 +185,34 @@ const LZWEncode = str => {
 	return encoded;
 };
 
-const plugin = "CssModulesPlugin";
+const PLUGIN_NAME = "CssModulesPlugin";
 
 class CssModulesPlugin {
+	/**
+	 * @param {Compilation} compilation the compilation
+	 * @returns {CompilationHooks} the attached hooks
+	 */
+	static getCompilationHooks(compilation) {
+		if (!(compilation instanceof Compilation)) {
+			throw new TypeError(
+				"The 'compilation' argument must be an instance of Compilation"
+			);
+		}
+		let hooks = compilationHooksMap.get(compilation);
+		if (hooks === undefined) {
+			hooks = {
+				renderModulePackage: new SyncWaterfallHook([
+					"source",
+					"module",
+					"renderContext"
+				]),
+				chunkHash: new SyncHook(["chunk", "hash", "context"])
+			};
+			compilationHooksMap.set(compilation, hooks);
+		}
+		return hooks;
+	}
+
 	constructor() {
 		/** @type {WeakMap<Source, { undoPath: string, inheritance: Inheritance, source: CachedSource }>} */
 		this._moduleCache = new WeakMap();
@@ -180,8 +225,9 @@ class CssModulesPlugin {
 	 */
 	apply(compiler) {
 		compiler.hooks.compilation.tap(
-			plugin,
+			PLUGIN_NAME,
 			(compilation, { normalModuleFactory }) => {
+				const hooks = CssModulesPlugin.getCompilationHooks(compilation);
 				const selfFactory = new SelfModuleFactory(compilation.moduleGraph);
 				compilation.dependencyFactories.set(
 					CssUrlDependency,
@@ -227,7 +273,7 @@ class CssModulesPlugin {
 				]) {
 					normalModuleFactory.hooks.createParser
 						.for(type)
-						.tap(plugin, parserOptions => {
+						.tap(PLUGIN_NAME, parserOptions => {
 							validateParserOptions[type](parserOptions);
 							const { namedExports } = parserOptions;
 
@@ -251,7 +297,7 @@ class CssModulesPlugin {
 						});
 					normalModuleFactory.hooks.createGenerator
 						.for(type)
-						.tap(plugin, generatorOptions => {
+						.tap(PLUGIN_NAME, generatorOptions => {
 							validateGeneratorOptions[type](generatorOptions);
 
 							return generatorOptions.exportsOnly
@@ -268,7 +314,7 @@ class CssModulesPlugin {
 						});
 					normalModuleFactory.hooks.createModuleClass
 						.for(type)
-						.tap(plugin, (createData, resolveData) => {
+						.tap(PLUGIN_NAME, (createData, resolveData) => {
 							if (resolveData.dependencies.length > 0) {
 								// When CSS is imported from CSS there is only one dependency
 								const dependency = resolveData.dependencies[0];
@@ -340,9 +386,18 @@ class CssModulesPlugin {
 						}
 					}
 				});
+				compilation.hooks.chunkHash.tap(
+					"CssModulesPlugin",
+					(chunk, hash, context) => {
+						hooks.chunkHash.call(chunk, hash, context);
+					}
+				);
 				compilation.hooks.contentHash.tap("CssModulesPlugin", chunk => {
 					const {
 						chunkGraph,
+						codeGenerationResults,
+						moduleGraph,
+						runtimeTemplate,
 						outputOptions: {
 							hashSalt,
 							hashDigest,
@@ -350,19 +405,27 @@ class CssModulesPlugin {
 							hashFunction
 						}
 					} = compilation;
-					const modules = orderedCssModulesPerChunk.get(chunk);
-					if (modules === undefined) return;
 					const hash = createHash(hashFunction);
 					if (hashSalt) hash.update(hashSalt);
-					for (const module of modules) {
-						hash.update(chunkGraph.getModuleHash(module, chunk.runtime));
+					hooks.chunkHash.call(chunk, hash, {
+						chunkGraph,
+						codeGenerationResults,
+						moduleGraph,
+						runtimeTemplate
+					});
+					const modules = orderedCssModulesPerChunk.get(chunk);
+					if (modules) {
+						for (const module of modules) {
+							hash.update(chunkGraph.getModuleHash(module, chunk.runtime));
+						}
 					}
 					const digest = /** @type {string} */ (hash.digest(hashDigest));
 					chunk.contentHash.css = nonNumericOnlyHash(digest, hashDigestLength);
 				});
-				compilation.hooks.renderManifest.tap(plugin, (result, options) => {
+				compilation.hooks.renderManifest.tap(PLUGIN_NAME, (result, options) => {
 					const { chunkGraph } = compilation;
-					const { hash, chunk, codeGenerationResults } = options;
+					const { hash, chunk, codeGenerationResults, runtimeTemplate } =
+						options;
 
 					if (chunk instanceof HotUpdateChunk) return result;
 
@@ -396,7 +459,9 @@ class CssModulesPlugin {
 									cssHeadDataCompression:
 										compilation.outputOptions.cssHeadDataCompression,
 									undoPath,
-									modules
+									modules,
+									runtimeTemplate,
+									hooks
 								}),
 							filename,
 							info,
@@ -440,13 +505,13 @@ class CssModulesPlugin {
 				};
 				compilation.hooks.runtimeRequirementInTree
 					.for(RuntimeGlobals.hasCssModules)
-					.tap(plugin, handler);
+					.tap(PLUGIN_NAME, handler);
 				compilation.hooks.runtimeRequirementInTree
 					.for(RuntimeGlobals.ensureChunkHandlers)
-					.tap(plugin, handler);
+					.tap(PLUGIN_NAME, handler);
 				compilation.hooks.runtimeRequirementInTree
 					.for(RuntimeGlobals.hmrDownloadUpdateHandlers)
-					.tap(plugin, handler);
+					.tap(PLUGIN_NAME, handler);
 			}
 		);
 	}
@@ -467,12 +532,10 @@ class CssModulesPlugin {
 		// Lists are in reverse order to allow to use Array.pop()
 		const modulesByChunkGroup = Array.from(chunk.groupsIterable, chunkGroup => {
 			const sortedModules = modulesList
-				.map(module => {
-					return {
-						module,
-						index: chunkGroup.getModulePostOrderIndex(module)
-					};
-				})
+				.map(module => ({
+					module,
+					index: chunkGroup.getModulePostOrderIndex(module)
+				}))
 				.filter(item => item.index !== undefined)
 				.sort(
 					(a, b) =>
@@ -489,10 +552,9 @@ class CssModulesPlugin {
 		const compareModuleLists = ({ list: a }, { list: b }) => {
 			if (a.length === 0) {
 				return b.length === 0 ? 0 : 1;
-			} else {
-				if (b.length === 0) return -1;
-				return compareModulesByIdentifier(a[a.length - 1], b[b.length - 1]);
 			}
+			if (b.length === 0) return -1;
+			return compareModulesByIdentifier(a[a.length - 1], b[b.length - 1]);
 		};
 
 		modulesByChunkGroup.sort(compareModuleLists);
@@ -509,7 +571,7 @@ class CssModulesPlugin {
 			}
 			/** @type {Module} */
 			let selectedModule = list[list.length - 1];
-			let hasFailed = undefined;
+			let hasFailed;
 			outer: for (;;) {
 				for (const { list, set } of modulesByChunkGroup) {
 					if (list.length === 0) continue;
@@ -602,6 +664,8 @@ class CssModulesPlugin {
 	 * @param {ChunkGraph} options.chunkGraph chunk graph
 	 * @param {CodeGenerationResults} options.codeGenerationResults code generation results
 	 * @param {CssModule} options.module css module
+	 * @param {RuntimeTemplate} options.runtimeTemplate runtime template
+	 * @param {CompilationHooks} options.hooks hooks
 	 * @returns {Source} css module source
 	 */
 	renderModule({
@@ -610,7 +674,9 @@ class CssModulesPlugin {
 		chunk,
 		chunkGraph,
 		codeGenerationResults,
-		module
+		module,
+		hooks,
+		runtimeTemplate
 	}) {
 		const codeGenResult = codeGenerationResults.get(module, chunk.runtime);
 		const moduleSourceContent =
@@ -623,7 +689,7 @@ class CssModulesPlugin {
 		const cacheEntry = this._moduleCache.get(moduleSourceContent);
 
 		/** @type {Inheritance} */
-		let inheritance = [[module.cssLayer, module.supports, module.media]];
+		const inheritance = [[module.cssLayer, module.supports, module.media]];
 		if (module.inheritance) {
 			inheritance.push(...module.inheritance);
 		}
@@ -707,7 +773,7 @@ class CssModulesPlugin {
 			codeGenResult.data && codeGenResult.data.get("css-exports");
 		const exports = cssExportsData && cssExportsData.exports;
 		const esModule = cssExportsData && cssExportsData.esModule;
-		let moduleId = chunkGraph.getModuleId(module) + "";
+		let moduleId = String(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") {
@@ -724,7 +790,13 @@ class CssModulesPlugin {
 					: ""
 			}${esModule ? "&" : ""}${escapeCss(moduleId)}`
 		);
-		return source;
+		return tryRunOrWebpackError(
+			() =>
+				hooks.renderModulePackage.call(source, module, {
+					runtimeTemplate
+				}),
+			"CssModulesPlugin.getCompilationHooks().renderModulePackage"
+		);
 	}
 
 	/**
@@ -736,6 +808,8 @@ class CssModulesPlugin {
 	 * @param {ChunkGraph} options.chunkGraph chunk graph
 	 * @param {CodeGenerationResults} options.codeGenerationResults code generation results
 	 * @param {CssModule[]} options.modules ordered css modules
+	 * @param {RuntimeTemplate} options.runtimeTemplate runtime template
+	 * @param {CompilationHooks} options.hooks hooks
 	 * @returns {Source} generated source
 	 */
 	renderChunk({
@@ -745,7 +819,9 @@ class CssModulesPlugin {
 		chunk,
 		chunkGraph,
 		codeGenerationResults,
-		modules
+		modules,
+		runtimeTemplate,
+		hooks
 	}) {
 		const source = new ConcatSource();
 		/** @type {string[]} */
@@ -758,38 +834,40 @@ class CssModulesPlugin {
 					chunk,
 					chunkGraph,
 					codeGenerationResults,
-					module
+					module,
+					runtimeTemplate,
+					hooks
 				});
 				source.add(moduleSource);
-			} catch (e) {
+			} catch (err) {
 				/** @type {Error} */
-				(e).message += `\nduring rendering of css ${module.identifier()}`;
-				throw e;
+				(err).message += `\nduring rendering of css ${module.identifier()}`;
+				throw err;
 			}
 		}
 		const metaDataStr = metaData.join(",");
 		source.add(
 			`head{--webpack-${escapeCss(
-				(uniqueName ? uniqueName + "-" : "") + chunk.id,
+				(uniqueName ? `${uniqueName}-` : "") + chunk.id,
 				true
-			)}:${cssHeadDataCompression ? LZWEncode(metaDataStr) : metaDataStr};}`
+			)}:${cssHeadDataCompression ? lzwEncode(metaDataStr) : metaDataStr};}`
 		);
+		chunk.rendered = true;
 		return source;
 	}
 
 	/**
 	 * @param {Chunk} chunk chunk
 	 * @param {OutputOptions} outputOptions output options
-	 * @returns {Chunk["cssFilenameTemplate"] | OutputOptions["cssFilename"] | OutputOptions["cssChunkFilename"]} used filename template
+	 * @returns {TemplatePath} used filename template
 	 */
 	static getChunkFilenameTemplate(chunk, outputOptions) {
 		if (chunk.cssFilenameTemplate) {
 			return chunk.cssFilenameTemplate;
 		} else if (chunk.canBeInitial()) {
-			return outputOptions.cssFilename;
-		} else {
-			return outputOptions.cssChunkFilename;
+			return /** @type {TemplatePath} */ (outputOptions.cssFilename);
 		}
+		return /** @type {TemplatePath} */ (outputOptions.cssChunkFilename);
 	}
 
 	/**
@@ -799,8 +877,10 @@ class CssModulesPlugin {
 	 */
 	static chunkHasCss(chunk, chunkGraph) {
 		return (
-			!!chunkGraph.getChunkModulesIterableBySourceType(chunk, "css") ||
-			!!chunkGraph.getChunkModulesIterableBySourceType(chunk, "css-import")
+			Boolean(chunkGraph.getChunkModulesIterableBySourceType(chunk, "css")) ||
+			Boolean(
+				chunkGraph.getChunkModulesIterableBySourceType(chunk, "css-import")
+			)
 		);
 	}
 }

package/lib/css/CssParser.js

@@ -60,10 +60,9 @@ const normalizeUrl = (str, isString) => {
 		// Unescape
 		.replace(UNESCAPE, match => {
 			if (match.length > 2) {
-				return String.fromCharCode(parseInt(match.slice(1).trim(), 16));
-			} else {
-				return match[1];
+				return String.fromCharCode(Number.parseInt(match.slice(1).trim(), 16));
 			}
+			return match[1];
 		});
 
 	if (/^data:/i.test(str)) {
@@ -74,7 +73,7 @@ const normalizeUrl = (str, isString) => {
 		// Convert `url('%2E/img.png')` -> `url('./img.png')`
 		try {
 			str = decodeURIComponent(str);
-		} catch (error) {
+		} catch (_err) {
 			// Ignore
 		}
 	}
@@ -172,7 +171,7 @@ class CssParser extends Parser {
 		} else if (typeof source === "object") {
 			throw new Error("webpackAst is unexpected for the CssParser");
 		}
-		if (source[0] === "\ufeff") {
+		if (source[0] === "\uFEFF") {
 			source = source.slice(1);
 		}
 
@@ -193,7 +192,7 @@ class CssParser extends Parser {
 		}
 
 		const locConverter = new LocConverter(source);
-		/** @type {Set<string>}*/
+		/** @type {Set<string>} */
 		const declaredCssVariables = new Set();
 		/** @type {number} */
 		let scope = CSS_MODE_TOP_LEVEL;
@@ -202,13 +201,13 @@ class CssParser extends Parser {
 		/** @type {boolean} */
 		let allowImportAtRule = true;
 		/** @type {"local" | "global" | undefined} */
-		let modeData = undefined;
+		let modeData;
 		/** @type {[number, number] | undefined} */
-		let lastIdentifier = undefined;
+		let lastIdentifier;
 		/** @type [string, number, number][] */
-		let balanced = [];
+		const balanced = [];
 		/** @type {undefined | { start: number, url?: string, urlStart?: number, urlEnd?: number, layer?: string, layerStart?: number, layerEnd?: number, supports?: string, supportsStart?: number, supportsEnd?: number, inSupports?:boolean, media?: string  }} */
-		let importData = undefined;
+		let importData;
 		/** @type {boolean} */
 		let inAnimationProperty = false;
 		/** @type {boolean} */
@@ -251,7 +250,9 @@ class CssParser extends Parser {
 				{ length: charCodes.reduce((a, b) => Math.max(a, b), 0) + 1 },
 				() => false
 			);
-			charCodes.forEach(cc => (arr[cc] = true));
+			for (const cc of charCodes) {
+				arr[cc] = true;
+			}
 			return (input, pos) => {
 				for (;;) {
 					const cc = input.charCodeAt(pos);
@@ -320,7 +321,7 @@ class CssParser extends Parser {
 				if (input.charCodeAt(pos) === CC_RIGHT_CURLY) break;
 				pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
 				if (pos === input.length) return pos;
-				let start = pos;
+				const start = pos;
 				let name;
 				[pos, name] = eatText(input, pos, eatExportName);
 				if (pos === input.length) return pos;
@@ -424,11 +425,12 @@ class CssParser extends Parser {
 		const eatKeyframes = eatUntil("{};/");
 		const eatNameInVar = eatUntil(",)};/");
 		walkCssTokens(source, {
-			isSelector: () => {
-				return isNextRulePrelude;
-			},
+			isSelector: () => isNextRulePrelude,
 			url: (input, start, end, contentStart, contentEnd) => {
-				let value = normalizeUrl(input.slice(contentStart, contentEnd), false);
+				const value = normalizeUrl(
+					input.slice(contentStart, contentEnd),
+					false
+				);
 
 				switch (scope) {
 					case CSS_MODE_IN_AT_IMPORT: {
@@ -530,7 +532,7 @@ class CssParser extends Parser {
 							(last[0].replace(/\\/g, "").toLowerCase() === "url" ||
 								IMAGE_SET_FUNCTION.test(last[0].replace(/\\/g, "")))
 						) {
-							let value = normalizeUrl(input.slice(start + 1, end - 1), true);
+							const value = normalizeUrl(input.slice(start + 1, end - 1), true);
 
 							// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
 							if (value.length === 0) {
@@ -884,7 +886,7 @@ class CssParser extends Parser {
 					}
 
 					if (name === "var") {
-						let pos = walkCssTokens.eatWhitespaceAndComments(input, end);
+						const pos = walkCssTokens.eatWhitespaceAndComments(input, end);
 						if (pos === input.length) return pos;
 						const [newPos, name] = eatText(input, pos, eatNameInVar);
 						if (!name.startsWith("--")) return end;