@depup/webpack 5.106.0-depup.0 → 5.109.0-depup.0

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,
@@ -13,9 +13,7 @@ const {
 	RawSource,
 	ReplaceSource
 } = require("webpack-sources");
-const Compilation = require("../Compilation");
-const CssModule = require("../CssModule");
-const { tryRunOrWebpackError } = require("../HookWebpackError");
+/** @typedef {import("../Compilation")} Compilation */
 const HotUpdateChunk = require("../HotUpdateChunk");
 const { CSS_IMPORT_TYPE, CSS_TYPE } = require("../ModuleSourceTypeConstants");
 const {
@@ -27,25 +25,32 @@ 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 createHooksRegistry = require("../util/createHooksRegistry");
 const { getUndoPath } = require("../util/identifier");
+const implicitTypeLoaderFallback = require("../util/implicitTypeLoaderFallback");
 const memoize = require("../util/memoize");
-const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
+const { digestNonNumericOnlyWithFull } = require("../util/nonNumericOnlyHash");
+const {
+	PUBLIC_PATH_AUTO,
+	walkFullHashPlaceholders
+} = require("../util/publicPathPlaceholder");
 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,17 +58,19 @@ 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("./CssModule").CssModuleBuildInfo} CssModuleBuildInfo */
 /** @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 */
 
 /**
+ * Defines the render context type used by this module.
  * @typedef {object} RenderContext
  * @property {Chunk} chunk the chunk
  * @property {ChunkGraph} chunkGraph the chunk graph
@@ -71,29 +78,36 @@ 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
  */
 
 /**
+ * Defines the chunk render context type used by this module.
  * @typedef {object} ChunkRenderContext
  * @property {Chunk=} chunk the chunk
  * @property {ChunkGraph=} chunkGraph the chunk graph
  * @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
  */
 
 /**
+ * Defines the compilation hooks type used by this module.
  * @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
  */
@@ -101,14 +115,87 @@ const publicPathAutoRegex = new RegExp(CssUrlDependency.PUBLIC_PATH_AUTO, "g");
 const getCssLoadingRuntimeModule = memoize(() =>
 	require("./CssLoadingRuntimeModule")
 );
-const getCssMergeStyleSheetsRuntimeModule = memoize(() =>
-	require("./CssMergeStyleSheetsRuntimeModule")
-);
 const getCssInjectStyleRuntimeModule = memoize(() =>
 	require("./CssInjectStyleRuntimeModule")
 );
 
 /**
+ * @typedef {object} PublicPathPlaceholderPlan
+ * @property {number[]} autos start offsets of each `PUBLIC_PATH_AUTO` placeholder
+ * @property {{ start: number, end: number, length: number }[]} hashes `[start, end)` ranges of each `PUBLIC_PATH_FULL_HASH` placeholder and its requested hash length
+ */
+
+/**
+ * Public-path placeholder offsets are invariant for a given module source —
+ * they don't depend on `undoPath`/`hash`/`inheritance`/runtime — so scan once
+ * and reuse across renders instead of re-materializing and re-scanning the
+ * source on every cache miss. Weakly keyed so entries release with the source.
+ * @type {WeakMap<Source, PublicPathPlaceholderPlan>}
+ */
+const publicPathPlaceholderPlans = new WeakMap();
+
+/**
+ * Memoized inheritance chain per module, revalidated against its source
+ * fields — `updateCacheModule` reassigns them on watch rebuilds.
+ * @type {WeakMap<CssModule, { cssLayer: CssModule["cssLayer"], supports: CssModule["supports"], media: CssModule["media"], inheritance: CssModule["inheritance"], chain: Inheritance }>}
+ */
+const moduleInheritanceCache = new WeakMap();
+
+/**
+ * Gets the memoized inheritance chain of a css module.
+ * @param {CssModule} module css module
+ * @returns {Inheritance} inheritance chain including the module's own entry
+ */
+const getModuleInheritance = (module) => {
+	const entry = moduleInheritanceCache.get(module);
+	if (
+		entry !== undefined &&
+		entry.cssLayer === module.cssLayer &&
+		entry.supports === module.supports &&
+		entry.media === module.media &&
+		entry.inheritance === module.inheritance
+	) {
+		return entry.chain;
+	}
+	/** @type {Inheritance} */
+	const chain = [[module.cssLayer, module.supports, module.media]];
+	if (module.inheritance) chain.push(...module.inheritance);
+	moduleInheritanceCache.set(module, {
+		cssLayer: module.cssLayer,
+		supports: module.supports,
+		media: module.media,
+		inheritance: module.inheritance,
+		chain
+	});
+	return chain;
+};
+
+/**
+ * Locate the public-path placeholders in a materialized module source.
+ * @param {string} content materialized module source
+ * @returns {PublicPathPlaceholderPlan} placeholder offsets
+ */
+const computePublicPathPlaceholderPlan = (content) => {
+	/** @type {number[]} */
+	const autos = [];
+	const autoLen = PUBLIC_PATH_AUTO.length;
+	for (
+		let idx = content.indexOf(PUBLIC_PATH_AUTO);
+		idx !== -1;
+		idx = content.indexOf(PUBLIC_PATH_AUTO, idx + autoLen)
+	) {
+		autos.push(idx);
+	}
+	/** @type {{ start: number, end: number, length: number }[]} */
+	const hashes = [];
+	walkFullHashPlaceholders(content, (start, end, length) => {
+		hashes.push({ start, end, length });
+	});
+	return { autos, hashes };
+};
+
+/**
+ * Returns ], definitions: import("../../schemas/WebpackOptions.json")["definitions"] }} schema.
  * @param {string} name name
  * @returns {{ oneOf: [{ $ref: string }], definitions: import("../../schemas/WebpackOptions.json")["definitions"] }} schema
  */
@@ -131,51 +218,35 @@ const generatorValidationOptions = {
 	baseDataPath: "generator"
 };
 
-/** @type {WeakMap<Compilation, CompilationHooks>} */
-const compilationHooksMap = new WeakMap();
-
 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, ModuleFactoryCacheEntry>} */
 		this._moduleFactoryCache = new WeakMap();
 	}
 
 	/**
-	 * Apply the plugin
+	 * Applies the plugin by registering its hooks on the compiler.
 	 * @param {Compiler} compiler the compiler instance
 	 * @returns {void}
 	 */
 	apply(compiler) {
+		// `"auto"` marks implicit enablement (no user rule for CSS files) — see
+		// `applyExperimentsDefaults`. Only then loaders win over the built-in type.
+		// TODO webpack 6: css defaults to `true`, drop this implicit-only fallback.
+		const implicitlyEnabled = compiler.options.experiments.css === "auto";
 		compiler.hooks.compilation.tap(
 			PLUGIN_NAME,
 			(compilation, { normalModuleFactory }) => {
+				if (implicitlyEnabled) {
+					implicitTypeLoaderFallback(
+						normalModuleFactory,
+						PLUGIN_NAME,
+						/\.css$/i,
+						CSS_MODULE_TYPE_AUTO
+					);
+				}
 				const hooks = CssModulesPlugin.getCompilationHooks(compilation);
 				compilation.dependencyFactories.set(
 					CssImportDependency,
@@ -255,11 +326,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
 											)
 									);
@@ -268,11 +339,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
 											)
 									);
@@ -354,71 +425,28 @@ class CssModulesPlugin {
 							const exportType =
 								/** @type {CssParser} */
 								(createData.parser).options.exportType;
-							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 {Inheritance | undefined} */
-										let inheritance;
-
-										if (
-											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(
-											/** @type {CSSModuleCreateData} */
-											({
-												...createData,
-												cssLayer: dependency.layer,
-												supports: dependency.supports,
-												media: dependency.media,
-												inheritance,
-												exportType: exportType || parent.exportType
-											})
-										);
-									}
-
-									return new CssModule(
-										/** @type {CSSModuleCreateData} */
-										({
-											...createData,
-											cssLayer: dependency.layer,
-											supports: dependency.supports,
-											media: dependency.media,
-											exportType
-										})
-									);
-								}
+							// When CSS is imported from CSS there is only one dependency
+							const dependency =
+								resolveData.dependencies.length > 0
+									? resolveData.dependencies[0]
+									: undefined;
+
+							if (dependency instanceof CssImportDependency) {
+								return new CssModule(
+									/** @type {CssModuleCreateData} */
+									({
+										...createData,
+										cssLayer: dependency.layer,
+										supports: dependency.supports,
+										media: dependency.media,
+										inheritance: dependency.inheritance,
+										exportType: dependency.exportType || exportType
+									})
+								);
 							}
 
 							return new CssModule(
-								/** @type {CSSModuleCreateData} */
+								/** @type {CssModuleCreateData} */
 								(
 									/** @type {unknown} */ ({
 										...createData,
@@ -444,45 +472,78 @@ class CssModulesPlugin {
 
 				JavascriptModulesPlugin.getCompilationHooks(
 					compilation
-				).renderModuleContent.tap(PLUGIN_NAME, (source, module) => {
-					if (module instanceof CssModule && module.hot) {
-						const exportType = module.exportType;
+				).renderModuleContent.tap(PLUGIN_NAME, (source, module, ctx) => {
+					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 {CssModuleBuildInfo} */ (
+								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 (${ctx.runtimeTemplate.optionalChaining("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;
@@ -532,8 +593,8 @@ class CssModulesPlugin {
 							hash.update(chunkGraph.getModuleHash(module, chunk.runtime));
 						}
 					}
-					const digest = hash.digest(hashDigest);
-					chunk.contentHash.css = nonNumericOnlyHash(digest, hashDigestLength);
+					[chunk.contentHash.css, chunk.contentHashFull.css] =
+						digestNonNumericOnlyWithFull(hash, hashDigest, hashDigestLength);
 				});
 				compilation.hooks.renderManifest.tap(PLUGIN_NAME, (result, options) => {
 					const { chunkGraph } = compilation;
@@ -571,6 +632,7 @@ class CssModulesPlugin {
 										codeGenerationResults,
 										uniqueName: compilation.outputOptions.uniqueName,
 										undoPath,
+										hash,
 										modules,
 										runtimeTemplate
 									},
@@ -586,6 +648,7 @@ class CssModulesPlugin {
 				});
 				const globalChunkLoading = compilation.outputOptions.chunkLoading;
 				/**
+				 * Checks whether this css modules plugin is enabled for chunk.
 				 * @param {Chunk} chunk the chunk
 				 * @returns {boolean} true, when enabled
 				 */
@@ -600,6 +663,7 @@ class CssModulesPlugin {
 				/** @type {WeakSet<Chunk>} */
 				const onceForChunkSet = new WeakSet();
 				/**
+				 * Handles the hook callback for this code path.
 				 * @param {Chunk} chunk chunk to check
 				 * @param {RuntimeRequirements} set runtime requirements
 				 */
@@ -655,20 +719,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(
@@ -681,6 +736,7 @@ class CssModulesPlugin {
 	}
 
 	/**
+	 * Gets modules in order.
 	 * @param {Chunk} chunk chunk
 	 * @param {Iterable<Module> | undefined} modules unordered modules
 	 * @param {Compilation} compilation compilation
@@ -722,6 +778,7 @@ class CssModulesPlugin {
 		);
 
 		/**
+		 * Compares module lists.
 		 * @param {{ list: Module[] }} a a
 		 * @param {{ list: Module[] }} b b
 		 * @returns {-1 | 0 | 1} result
@@ -826,81 +883,138 @@ class CssModulesPlugin {
 	}
 
 	/**
+	 * Gets ordered chunk css modules.
 	 * @param {Chunk} chunk chunk
 	 * @param {ChunkGraph} chunkGraph chunk graph
 	 * @param {Compilation} compilation compilation
 	 * @returns {CssModule[]} ordered css modules
 	 */
 	getOrderedChunkCssModules(chunk, chunkGraph, compilation) {
-		return /** @type {CssModule[]} */ ([
-			...this.getModulesInOrder(
+		/** @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);
+		};
+
+		const comparator = compareModulesByFullName(compilation.compiler);
+		const importModules = orderModules(
+			chunkGraph.getOrderedChunkModulesIterableBySourceType(
 				chunk,
-				chunkGraph.getOrderedChunkModulesIterableBySourceType(
-					chunk,
-					CSS_IMPORT_TYPE,
-					compareModulesByFullName(compilation.compiler)
-				),
-				compilation
-			),
-			...this.getModulesInOrder(
+				CSS_IMPORT_TYPE,
+				comparator
+			)
+		);
+		const cssModules = orderModules(
+			chunkGraph.getOrderedChunkModulesIterableBySourceType(
 				chunk,
-				chunkGraph.getOrderedChunkModulesIterableBySourceType(
-					chunk,
-					CSS_TYPE,
-					compareModulesByFullName(compilation.compiler)
-				),
-				compilation
+				CSS_TYPE,
+				comparator
 			)
-		]);
+		);
+		for (const module of cssModules) {
+			if (
+				typeof (
+					/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
+				) !== "undefined"
+			) {
+				if (
+					typeof charset !== "undefined" &&
+					charset !==
+						/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
+				) {
+					const err = new WebpackError(
+						`Conflicting @charset at-rules detected: the module ${module.readableIdentifier(
+							compilation.requestShortener
+						)} (in chunk ${chunk.name || chunk.id}) specifies "${
+							/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
+						}", but "${charset}" was expected, all modules must use the same character set`
+					);
+
+					err.chunk = chunk;
+					err.module = module;
+					err.hideStack = true;
+
+					compilation.warnings.push(err);
+				}
+
+				if (typeof charset === "undefined") {
+					charset = /** @type {CssModuleBuildInfo} */ (module.buildInfo)
+						.charset;
+				}
+			}
+		}
+
+		return /** @type {CssModule[]} */ ([...importModules, ...cssModules]);
 	}
 
 	/**
+	 * Renders css module source.
 	 * @param {CssModule} module css module
 	 * @param {ChunkRenderContext} renderContext options object
 	 * @param {CompilationHooks} hooks hooks
 	 * @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} */
-		const inheritance = [[module.cssLayer, module.supports, module.media]];
-		if (module.inheritance) {
-			inheritance.push(...module.inheritance);
-		}
+		const inheritance = getModuleInheritance(module);
 
 		/** @type {CachedSource} */
 		let source;
 		if (
 			cacheEntry &&
 			cacheEntry.undoPath === undoPath &&
-			cacheEntry.inheritance.length === inheritance.length &&
-			cacheEntry.inheritance.every(([layer, supports, media], i) => {
-				const item = inheritance[i];
-				if (Array.isArray(item)) {
-					return layer === item[0] && supports === item[1] && media === item[2];
-				}
-				return false;
-			})
+			cacheEntry.hash === hash &&
+			// Memoized per module, so identity implies equal entries.
+			cacheEntry.inheritance === inheritance
 		) {
 			source = cacheEntry.source;
 		} else {
 			if (!moduleSourceContent) return null;
-			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
+			let plan = publicPathPlaceholderPlans.get(moduleSourceContent);
+			if (plan === undefined) {
+				plan = computePublicPathPlaceholderPlan(
+					/** @type {string} */ (moduleSourceContent.source())
 				);
+				publicPathPlaceholderPlans.set(moduleSourceContent, plan);
+			}
+
+			/** @type {Source} */
+			let moduleSource = moduleSourceContent;
+
+			// Apply placeholder substitutions only when present; the common
+			// (no-placeholder) case skips the ReplaceSource wrapper entirely.
+			if (plan.autos.length > 0 || (hash && plan.hashes.length > 0)) {
+				const replaceSource = new ReplaceSource(moduleSourceContent);
+				const autoLen = PUBLIC_PATH_AUTO.length;
+				for (let i = 0; i < plan.autos.length; i++) {
+					const start = plan.autos[i];
+					replaceSource.replace(start, start + autoLen - 1, undoPath);
+				}
+				if (hash) {
+					for (let i = 0; i < plan.hashes.length; i++) {
+						const { start, end, length } = plan.hashes[i];
+						// `end` is exclusive; ReplaceSource.replace takes an inclusive end.
+						replaceSource.replace(
+							start,
+							end - 1,
+							length === 0 ? hash : hash.slice(0, length)
+						);
+					}
+				}
+				moduleSource = replaceSource;
 			}
 
 			for (let i = 0; i < inheritance.length; i++) {
@@ -942,6 +1056,7 @@ class CssModulesPlugin {
 			moduleFactoryCache.set(moduleSourceContent, {
 				inheritance,
 				undoPath,
+				hash,
 				source
 			});
 		}
@@ -953,6 +1068,7 @@ class CssModulesPlugin {
 	}
 
 	/**
+	 * Renders generated source.
 	 * @param {RenderContext} renderContext the render context
 	 * @param {CompilationHooks} hooks hooks
 	 * @returns {Source} generated source
@@ -964,12 +1080,26 @@ class CssModulesPlugin {
 			codeGenerationResults,
 			modules,
 			runtimeTemplate,
-			chunkGraph
+			chunkGraph,
+			hash
 		},
 		hooks
 	) {
 		const source = new ConcatSource();
+
+		/** @type {string | undefined} */
+		let charset;
+
 		for (const module of modules) {
+			if (
+				typeof (
+					/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
+				) !== "undefined" &&
+				typeof charset === "undefined"
+			) {
+				charset = /** @type {CssModuleBuildInfo} */ (module.buildInfo).charset;
+			}
+
 			try {
 				const codeGenResult = codeGenerationResults.get(module, chunk.runtime);
 				const moduleSourceContent =
@@ -982,6 +1112,7 @@ class CssModulesPlugin {
 					module,
 					{
 						undoPath,
+						hash,
 						chunk,
 						chunkGraph,
 						codeGenerationResults,
@@ -1000,14 +1131,21 @@ class CssModulesPlugin {
 				throw err;
 			}
 		}
+
 		chunk.rendered = true;
+
+		if (charset) {
+			return new ConcatSource(`@charset "${charset}";\n`, source);
+		}
+
 		return source;
 	}
 
 	/**
+	 * 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) {
@@ -1019,6 +1157,7 @@ class CssModulesPlugin {
 	}
 
 	/**
+	 * Returns true, when the chunk has css.
 	 * @param {Chunk} chunk chunk
 	 * @param {ChunkGraph} chunkGraph chunk graph
 	 * @returns {boolean} true, when the chunk has css
@@ -1035,4 +1174,17 @@ class CssModulesPlugin {
 	}
 }
 
+CssModulesPlugin.getCompilationHooks = createHooksRegistry(
+	() =>
+		/** @type {CompilationHooks} */ ({
+			renderModulePackage: new SyncWaterfallHook([
+				"source",
+				"module",
+				"renderContext"
+			]),
+			chunkHash: new SyncHook(["chunk", "hash", "context"]),
+			orderModules: new SyncBailHook(["chunk", "modules", "compilation"])
+		})
+);
+
 module.exports = CssModulesPlugin;