webpack 5.106.2 → 5.107.1

package/lib/css/CssModulesPlugin.js

@@ -5,7 +5,7 @@
 
 "use strict";
 
-const { SyncHook, SyncWaterfallHook } = require("tapable");
+const { SyncBailHook, SyncHook, SyncWaterfallHook } = require("tapable");
 const {
 	CachedSource,
 	ConcatSource,
@@ -14,8 +14,6 @@ const {
 	ReplaceSource
 } = require("webpack-sources");
 const Compilation = require("../Compilation");
-const CssModule = require("../CssModule");
-const { tryRunOrWebpackError } = require("../HookWebpackError");
 const HotUpdateChunk = require("../HotUpdateChunk");
 const { CSS_IMPORT_TYPE, CSS_TYPE } = require("../ModuleSourceTypeConstants");
 const {
@@ -27,14 +25,16 @@ const {
 const NormalModule = require("../NormalModule");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
-const WebpackError = require("../WebpackError");
 const CssIcssExportDependency = require("../dependencies/CssIcssExportDependency");
 const CssIcssImportDependency = require("../dependencies/CssIcssImportDependency");
 const CssIcssSymbolDependency = require("../dependencies/CssIcssSymbolDependency");
 const CssImportDependency = require("../dependencies/CssImportDependency");
 const CssUrlDependency = require("../dependencies/CssUrlDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
+const { tryRunOrWebpackError } = require("../errors/HookWebpackError");
+const WebpackError = require("../errors/WebpackError");
 const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
+const ConcatenatedModule = require("../optimize/ConcatenatedModule");
 const { compareModulesByFullName } = require("../util/comparators");
 const createHash = require("../util/createHash");
 const { getUndoPath } = require("../util/identifier");
@@ -42,10 +42,9 @@ const memoize = require("../util/memoize");
 const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
 const removeBOM = require("../util/removeBOM");
 const CssGenerator = require("./CssGenerator");
+const CssModule = require("./CssModule");
 const CssParser = require("./CssParser");
 
-const publicPathAutoRegex = new RegExp(CssUrlDependency.PUBLIC_PATH_AUTO, "g");
-
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("../config/defaults").OutputNormalizedWithDefaults} OutputOptions */
 /** @typedef {import("../Chunk")} Chunk */
@@ -53,13 +52,13 @@ const publicPathAutoRegex = new RegExp(CssUrlDependency.PUBLIC_PATH_AUTO, "g");
 /** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
 /** @typedef {import("../Compilation").ChunkHashContext} ChunkHashContext */
 /** @typedef {import("../Compiler")} Compiler */
-/** @typedef {import("../CssModule").Inheritance} Inheritance */
-/** @typedef {import("../CssModule").CSSModuleCreateData} CSSModuleCreateData */
+/** @typedef {import("./CssModule").Inheritance} Inheritance */
+/** @typedef {import("./CssModule").CssModuleCreateData} CssModuleCreateData */
 /** @typedef {import("../Module")} Module */
 /** @typedef {import("../Module").BuildInfo} BuildInfo */
 /** @typedef {import("../Module").RuntimeRequirements} RuntimeRequirements */
 /** @typedef {import("../Template").RuntimeTemplate} RuntimeTemplate */
-/** @typedef {import("../TemplatedPathPlugin").TemplatePath} TemplatePath */
+/** @typedef {import("../Chunk").ChunkFilenameTemplate} ChunkFilenameTemplate */
 /** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("../Module").BuildMeta} BuildMeta */
 
@@ -72,6 +71,7 @@ const publicPathAutoRegex = new RegExp(CssUrlDependency.PUBLIC_PATH_AUTO, "g");
  * @property {RuntimeTemplate} runtimeTemplate the runtime template
  * @property {string} uniqueName the unique name
  * @property {string} undoPath undo path to css file
+ * @property {string=} hash compilation hash
  * @property {CssModule[]} modules modules
  */
 
@@ -83,6 +83,7 @@ const publicPathAutoRegex = new RegExp(CssUrlDependency.PUBLIC_PATH_AUTO, "g");
  * @property {CodeGenerationResults=} codeGenerationResults results of code generation
  * @property {RuntimeTemplate} runtimeTemplate the runtime template
  * @property {string} undoPath undo path to css file
+ * @property {string=} hash compilation hash
  * @property {WeakMap<Source, ModuleFactoryCacheEntry>} moduleFactoryCache moduleFactoryCache
  * @property {Source} moduleSourceContent content
  */
@@ -92,12 +93,14 @@ const publicPathAutoRegex = new RegExp(CssUrlDependency.PUBLIC_PATH_AUTO, "g");
  * @typedef {object} CompilationHooks
  * @property {SyncWaterfallHook<[Source, Module, ChunkRenderContext]>} renderModulePackage
  * @property {SyncHook<[Chunk, Hash, ChunkHashContext]>} chunkHash
+ * @property {SyncBailHook<[Chunk, Module[], Compilation], Module[] | undefined | void>} orderModules called for each CSS source type (CSS_IMPORT_TYPE, CSS_TYPE) with the chunk's modules pre-sorted by full module name; return an ordered `Module[]` to override the default import-order topological sort, or return `undefined` to keep the default
  */
 
 /**
  * Defines the module factory cache entry type used by this module.
  * @typedef {object} ModuleFactoryCacheEntry
  * @property {string} undoPath - The undo path to the CSS file
+ * @property {string | undefined} hash - The compilation hash
  * @property {Inheritance} inheritance - The inheritance chain
  * @property {CachedSource} source - The cached source
  */
@@ -105,9 +108,6 @@ const publicPathAutoRegex = new RegExp(CssUrlDependency.PUBLIC_PATH_AUTO, "g");
 const getCssLoadingRuntimeModule = memoize(() =>
 	require("./CssLoadingRuntimeModule")
 );
-const getCssMergeStyleSheetsRuntimeModule = memoize(() =>
-	require("./CssMergeStyleSheetsRuntimeModule")
-);
 const getCssInjectStyleRuntimeModule = memoize(() =>
 	require("./CssInjectStyleRuntimeModule")
 );
@@ -161,7 +161,8 @@ class CssModulesPlugin {
 					"module",
 					"renderContext"
 				]),
-				chunkHash: new SyncHook(["chunk", "hash", "context"])
+				chunkHash: new SyncHook(["chunk", "hash", "context"]),
+				orderModules: new SyncBailHook(["chunk", "modules", "compilation"])
 			};
 			compilationHooksMap.set(compilation, hooks);
 		}
@@ -261,11 +262,11 @@ class CssModulesPlugin {
 								case CSS_MODULE_TYPE_MODULE: {
 									defaultMode = "local";
 									compiler.validate(
-										() => getSchema("CssModuleParserOptions"),
+										() => getSchema("CssAutoOrModuleParserOptions"),
 										parserOptions,
 										parserValidationOptions,
 										(options) =>
-											require("../../schemas/plugins/css/CssModuleParserOptions.check")(
+											require("../../schemas/plugins/css/CssAutoOrModuleParserOptions.check")(
 												options
 											)
 									);
@@ -274,11 +275,11 @@ class CssModulesPlugin {
 								case CSS_MODULE_TYPE_AUTO: {
 									defaultMode = "auto";
 									compiler.validate(
-										() => getSchema("CssModuleParserOptions"),
+										() => getSchema("CssAutoOrModuleParserOptions"),
 										parserOptions,
 										parserValidationOptions,
 										(options) =>
-											require("../../schemas/plugins/css/CssModuleParserOptions.check")(
+											require("../../schemas/plugins/css/CssAutoOrModuleParserOptions.check")(
 												options
 											)
 									);
@@ -398,7 +399,7 @@ class CssModulesPlugin {
 										}
 
 										return new CssModule(
-											/** @type {CSSModuleCreateData} */
+											/** @type {CssModuleCreateData} */
 											({
 												...createData,
 												cssLayer: dependency.layer,
@@ -411,7 +412,7 @@ class CssModulesPlugin {
 									}
 
 									return new CssModule(
-										/** @type {CSSModuleCreateData} */
+										/** @type {CssModuleCreateData} */
 										({
 											...createData,
 											cssLayer: dependency.layer,
@@ -424,7 +425,7 @@ class CssModulesPlugin {
 							}
 
 							return new CssModule(
-								/** @type {CSSModuleCreateData} */
+								/** @type {CssModuleCreateData} */
 								(
 									/** @type {unknown} */ ({
 										...createData,
@@ -451,44 +452,76 @@ class CssModulesPlugin {
 				JavascriptModulesPlugin.getCompilationHooks(
 					compilation
 				).renderModuleContent.tap(PLUGIN_NAME, (source, module) => {
-					if (module instanceof CssModule && module.hot) {
-						const exportType = module.exportType;
+					const injectCssStylesVar =
+						module instanceof ConcatenatedModule &&
+						module.modules.find(
+							(m) =>
+								m instanceof CssModule &&
+								m.exportType === "style" &&
+								!(/** @type {CssGenerator} */ (m.generator)._exportsOnly)
+						);
+					const injectHMRCode =
+						(module instanceof CssModule && module.hot) ||
+						(module instanceof ConcatenatedModule &&
+							module.rootModule instanceof CssModule &&
+							module.rootModule.hot);
+
+					if (injectCssStylesVar) {
+						source = new ConcatSource(
+							"var __webpack_css_styles__ = [];",
+							"\n",
+							source
+						);
+					}
+					if (injectHMRCode) {
+						const currentModule = /** @type {CssModule} */ (
+							module instanceof ConcatenatedModule ? module.rootModule : module
+						);
+						const exportType = currentModule.exportType || "link";
 						// When exportType !== "link", modules behave like JavaScript modules
-						if (exportType && !["link", "style"].includes(exportType)) {
-							return source;
-						}
-						// For exportType === "link", we can optimize with self-acceptance
-						const cssData = /** @type {BuildInfo} */ (module.buildInfo).cssData;
-						if (!cssData) {
-							return source;
-						}
-						const exports = cssData.exports;
-						/** @type {Record<string, string>} */
-						const exportsObj = {};
-						for (const [key, value] of exports) {
-							exportsObj[key] = value;
+						if (["link", "style"].includes(exportType)) {
+							// For exportType === "link", we can optimize with self-acceptance
+							const cssData = /** @type {BuildInfo} */ (module.buildInfo)
+								.cssData;
+							if (!cssData) {
+								return source;
+							}
+							const exports = cssData.exports;
+							/** @type {Record<string, string>} */
+							const exportsObj = {};
+							for (const [key, value] of exports) {
+								exportsObj[key] = value;
+							}
+							const stringifiedExports = JSON.stringify(
+								JSON.stringify(exportsObj)
+							);
+
+							const hmrCode = Template.asString([
+								"",
+								`var __webpack_css_exports__ = ${stringifiedExports};`,
+								"// only invalidate when locals change",
+								"if (module.hot.data && module.hot.data.__webpack_css_exports__ && module.hot.data.__webpack_css_exports__ != __webpack_css_exports__) {",
+								Template.indent("module.hot.invalidate();"),
+								"} else {",
+								Template.indent("module.hot.accept();"),
+								"}",
+								"module.hot.dispose(function(data) {",
+								Template.indent([
+									"data.__webpack_css_exports__ = __webpack_css_exports__;"
+								]),
+								"});"
+							]);
+
+							source = new ConcatSource(source, "\n", new RawSource(hmrCode));
 						}
-						const stringifiedExports = JSON.stringify(
-							JSON.stringify(exportsObj)
+					}
+					if (injectCssStylesVar) {
+						/** @type {ConcatSource} */
+						(source).add(
+							"for (let i = 0; i < __webpack_css_styles__.length; i++) {\n" +
+								`${RuntimeGlobals.cssInjectStyle}(__webpack_css_styles__[i][0], __webpack_css_styles__[i][1]);\n` +
+								"}"
 						);
-
-						const hmrCode = Template.asString([
-							"",
-							`var __webpack_css_exports__ = ${stringifiedExports};`,
-							"// only invalidate when locals change",
-							"if (module.hot.data && module.hot.data.__webpack_css_exports__ && module.hot.data.__webpack_css_exports__ != __webpack_css_exports__) {",
-							Template.indent("module.hot.invalidate();"),
-							"} else {",
-							Template.indent("module.hot.accept();"),
-							"}",
-							"module.hot.dispose(function(data) {",
-							Template.indent([
-								"data.__webpack_css_exports__ = __webpack_css_exports__;"
-							]),
-							"});"
-						]);
-
-						return new ConcatSource(source, "\n", new RawSource(hmrCode));
 					}
 
 					return source;
@@ -577,6 +610,7 @@ class CssModulesPlugin {
 										codeGenerationResults,
 										uniqueName: compilation.outputOptions.uniqueName,
 										undoPath,
+										hash,
 										modules,
 										runtimeTemplate
 									},
@@ -663,20 +697,11 @@ class CssModulesPlugin {
 						set.add(RuntimeGlobals.getChunkCssFilename);
 					});
 
-				compilation.hooks.runtimeRequirementInTree
-					.for(RuntimeGlobals.cssMergeStyleSheets)
-					.tap(PLUGIN_NAME, (chunk) => {
-						const CssMergeStyleSheetsRuntimeModule =
-							getCssMergeStyleSheetsRuntimeModule();
-						compilation.addRuntimeModule(
-							chunk,
-							new CssMergeStyleSheetsRuntimeModule()
-						);
-					});
-
 				compilation.hooks.runtimeRequirementInTree
 					.for(RuntimeGlobals.cssInjectStyle)
 					.tap(PLUGIN_NAME, (chunk, set) => {
+						// Same as above: namespace stub is enough.
+						set.add(RuntimeGlobals.requireScope);
 						const CssInjectStyleRuntimeModule =
 							getCssInjectStyleRuntimeModule();
 						compilation.addRuntimeModule(
@@ -846,24 +871,33 @@ class CssModulesPlugin {
 		/** @type {string | undefined} */
 		let charset;
 
+		const hooks = CssModulesPlugin.getCompilationHooks(compilation);
+
+		/**
+		 * @param {Iterable<Module> | undefined} iter modules pre-sorted by full module name
+		 * @returns {Module[]} ordered modules
+		 */
+		const orderModules = (iter) => {
+			const modules = iter ? [...iter] : [];
+			const result = hooks.orderModules.call(chunk, modules, compilation);
+			if (result !== undefined) return result;
+			return this.getModulesInOrder(chunk, modules, compilation);
+		};
+
 		return /** @type {CssModule[]} */ ([
-			...this.getModulesInOrder(
-				chunk,
+			...orderModules(
 				chunkGraph.getOrderedChunkModulesIterableBySourceType(
 					chunk,
 					CSS_IMPORT_TYPE,
 					compareModulesByFullName(compilation.compiler)
-				),
-				compilation
+				)
 			),
-			...this.getModulesInOrder(
-				chunk,
+			...orderModules(
 				chunkGraph.getOrderedChunkModulesIterableBySourceType(
 					chunk,
 					CSS_TYPE,
 					compareModulesByFullName(compilation.compiler)
-				),
-				compilation
+				)
 			).map((module) => {
 				if (
 					typeof (/** @type {BuildInfo} */ (module.buildInfo).charset) !==
@@ -906,7 +940,8 @@ class CssModulesPlugin {
 	 * @returns {Source | null} css module source
 	 */
 	static renderModule(module, renderContext, hooks) {
-		const { undoPath, moduleFactoryCache, moduleSourceContent } = renderContext;
+		const { undoPath, hash, moduleFactoryCache, moduleSourceContent } =
+			renderContext;
 		const cacheEntry = moduleFactoryCache.get(moduleSourceContent);
 
 		/** @type {Inheritance} */
@@ -920,6 +955,7 @@ class CssModulesPlugin {
 		if (
 			cacheEntry &&
 			cacheEntry.undoPath === undoPath &&
+			cacheEntry.hash === hash &&
 			cacheEntry.inheritance.length === inheritance.length &&
 			cacheEntry.inheritance.every(([layer, supports, media], i) => {
 				const item = inheritance[i];
@@ -935,19 +971,60 @@ class CssModulesPlugin {
 			const moduleSourceCode =
 				/** @type {string} */
 				(moduleSourceContent.source());
-			publicPathAutoRegex.lastIndex = 0;
-			/** @type {Source} */
-			let moduleSource = new ReplaceSource(moduleSourceContent);
-			/** @type {null | RegExpExecArray} */
-			let match;
-			while ((match = publicPathAutoRegex.exec(moduleSourceCode))) {
-				/** @type {ReplaceSource} */ (moduleSource).replace(
-					match.index,
-					match.index + match[0].length - 1,
-					undoPath
-				);
+			const replaceSource = new ReplaceSource(moduleSourceContent);
+
+			const autoPlaceholder = CssUrlDependency.PUBLIC_PATH_AUTO;
+			const autoPlaceholderLen = autoPlaceholder.length;
+			for (
+				let idx = moduleSourceCode.indexOf(autoPlaceholder);
+				idx !== -1;
+				idx = moduleSourceCode.indexOf(
+					autoPlaceholder,
+					idx + autoPlaceholderLen
+				)
+			) {
+				replaceSource.replace(idx, idx + autoPlaceholderLen - 1, undoPath);
 			}
 
+			if (hash) {
+				const hashPrefix = CssUrlDependency.PUBLIC_PATH_FULL_HASH;
+				const hashPrefixLen = hashPrefix.length;
+				const sourceLen = moduleSourceCode.length;
+				let idx = moduleSourceCode.indexOf(hashPrefix);
+				while (idx !== -1) {
+					let digitEnd = idx + hashPrefixLen;
+					while (digitEnd < sourceLen) {
+						const cc = moduleSourceCode.charCodeAt(digitEnd);
+						if (cc < 48 || cc > 57) break;
+						digitEnd++;
+					}
+					let nextSearch;
+					if (
+						digitEnd > idx + hashPrefixLen &&
+						digitEnd + 1 < sourceLen &&
+						moduleSourceCode.charCodeAt(digitEnd) === 95 &&
+						moduleSourceCode.charCodeAt(digitEnd + 1) === 95
+					) {
+						const length = Number.parseInt(
+							moduleSourceCode.slice(idx + hashPrefixLen, digitEnd),
+							10
+						);
+						replaceSource.replace(
+							idx,
+							digitEnd + 1,
+							length === 0 ? hash : hash.slice(0, length)
+						);
+						nextSearch = digitEnd + 2;
+					} else {
+						nextSearch = idx + hashPrefixLen;
+					}
+					idx = moduleSourceCode.indexOf(hashPrefix, nextSearch);
+				}
+			}
+
+			/** @type {Source} */
+			let moduleSource = replaceSource;
+
 			for (let i = 0; i < inheritance.length; i++) {
 				const layer = inheritance[i][0];
 				const supports = inheritance[i][1];
@@ -987,6 +1064,7 @@ class CssModulesPlugin {
 			moduleFactoryCache.set(moduleSourceContent, {
 				inheritance,
 				undoPath,
+				hash,
 				source
 			});
 		}
@@ -1010,7 +1088,8 @@ class CssModulesPlugin {
 			codeGenerationResults,
 			modules,
 			runtimeTemplate,
-			chunkGraph
+			chunkGraph,
+			hash
 		},
 		hooks
 	) {
@@ -1040,6 +1119,7 @@ class CssModulesPlugin {
 					module,
 					{
 						undoPath,
+						hash,
 						chunk,
 						chunkGraph,
 						codeGenerationResults,
@@ -1072,7 +1152,7 @@ class CssModulesPlugin {
 	 * Gets chunk filename template.
 	 * @param {Chunk} chunk chunk
 	 * @param {OutputOptions} outputOptions output options
-	 * @returns {TemplatePath} used filename template
+	 * @returns {ChunkFilenameTemplate} used filename template
 	 */
 	static getChunkFilenameTemplate(chunk, outputOptions) {
 		if (chunk.cssFilenameTemplate) {