webpack 5.97.1 → 5.104.1

package/lib/css/CssModulesPlugin.js

@@ -5,60 +5,63 @@
 
 "use strict";
 
-const { SyncWaterfallHook, SyncHook } = require("tapable");
+const { SyncHook, SyncWaterfallHook } = require("tapable");
 const {
+	CachedSource,
 	ConcatSource,
 	PrefixSource,
-	ReplaceSource,
-	CachedSource,
-	RawSource
+	RawSource,
+	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 {
 	CSS_MODULE_TYPE,
+	CSS_MODULE_TYPE_AUTO,
 	CSS_MODULE_TYPE_GLOBAL,
-	CSS_MODULE_TYPE_MODULE,
-	CSS_MODULE_TYPE_AUTO
+	CSS_MODULE_TYPE_MODULE
 } = require("../ModuleTypeConstants");
+const NormalModule = require("../NormalModule");
 const RuntimeGlobals = require("../RuntimeGlobals");
-const SelfModuleFactory = require("../SelfModuleFactory");
 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 CssLocalIdentifierDependency = require("../dependencies/CssLocalIdentifierDependency");
-const CssSelfLocalIdentifierDependency = require("../dependencies/CssSelfLocalIdentifierDependency");
 const CssUrlDependency = require("../dependencies/CssUrlDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
 const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
-const { compareModulesByIdentifier } = require("../util/comparators");
+const { compareModulesByIdOrIdentifier } = require("../util/comparators");
 const createSchemaValidation = require("../util/create-schema-validation");
 const createHash = require("../util/createHash");
 const { getUndoPath } = require("../util/identifier");
 const memoize = require("../util/memoize");
 const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
+const removeBOM = require("../util/removeBOM");
 const CssGenerator = require("./CssGenerator");
+const CssMergeStyleSheetsRuntimeModule = require("./CssMergeStyleSheetsRuntimeModule");
 const CssParser = require("./CssParser");
 
 /** @typedef {import("webpack-sources").Source} Source */
-/** @typedef {import("../../declarations/WebpackOptions").OutputNormalized} OutputOptions */
+/** @typedef {import("../config/defaults").OutputNormalizedWithDefaults} OutputOptions */
 /** @typedef {import("../Chunk")} Chunk */
 /** @typedef {import("../ChunkGraph")} ChunkGraph */
 /** @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("../Module")} Module */
+/** @typedef {import("../Module").BuildInfo} BuildInfo */
+/** @typedef {import("../Module").RuntimeRequirements} RuntimeRequirements */
 /** @typedef {import("../Template").RuntimeTemplate} RuntimeTemplate */
 /** @typedef {import("../TemplatedPathPlugin").TemplatePath} TemplatePath */
 /** @typedef {import("../util/Hash")} Hash */
-/** @typedef {import("../util/createHash").Algorithm} Algorithm */
-/** @typedef {import("../util/memoize")} Memoize */
+/** @typedef {import("../Module").BuildMeta} BuildMeta */
 
 /**
  * @typedef {object} RenderContext
@@ -73,11 +76,13 @@ const CssParser = require("./CssParser");
 
 /**
  * @typedef {object} ChunkRenderContext
- * @property {Chunk} chunk the chunk
- * @property {ChunkGraph} chunkGraph the chunk graph
- * @property {CodeGenerationResults} codeGenerationResults results of code generation
+ * @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 {WeakMap<Source, ModuleFactoryCacheEntry>} moduleFactoryCache moduleFactoryCache
+ * @property {Source} moduleSourceContent content
  */
 
 /**
@@ -86,16 +91,24 @@ const CssParser = require("./CssParser");
  * @property {SyncHook<[Chunk, Hash, ChunkHashContext]>} chunkHash
  */
 
+/**
+ * @typedef {object} ModuleFactoryCacheEntry
+ * @property {string} undoPath - The undo path to the CSS file
+ * @property {Inheritance} inheritance - The inheritance chain
+ * @property {CachedSource} source - The cached source
+ */
+
 const getCssLoadingRuntimeModule = memoize(() =>
 	require("./CssLoadingRuntimeModule")
 );
 
 /**
  * @param {string} name name
- * @returns {{oneOf: [{$ref: string}], definitions: *}} schema
+ * @returns {{ oneOf: [{ $ref: string }], definitions: import("../../schemas/WebpackOptions.json")["definitions"] }} schema
  */
-const getSchema = name => {
+const getSchema = (name) => {
 	const { definitions } = require("../../schemas/WebpackOptions.json");
+
 	return {
 		definitions,
 		oneOf: [{ $ref: `#/definitions/${name}` }]
@@ -108,23 +121,23 @@ const generatorValidationOptions = {
 };
 const validateGeneratorOptions = {
 	css: createSchemaValidation(
-		require("../../schemas/plugins/css/CssGeneratorOptions.check.js"),
+		require("../../schemas/plugins/css/CssGeneratorOptions.check"),
 		() => getSchema("CssGeneratorOptions"),
 		generatorValidationOptions
 	),
 	"css/auto": createSchemaValidation(
-		require("../../schemas/plugins/css/CssAutoGeneratorOptions.check.js"),
-		() => getSchema("CssAutoGeneratorOptions"),
+		require("../../schemas/plugins/css/CssModuleGeneratorOptions.check"),
+		() => getSchema("CssModuleGeneratorOptions"),
 		generatorValidationOptions
 	),
 	"css/module": createSchemaValidation(
-		require("../../schemas/plugins/css/CssModuleGeneratorOptions.check.js"),
+		require("../../schemas/plugins/css/CssModuleGeneratorOptions.check"),
 		() => getSchema("CssModuleGeneratorOptions"),
 		generatorValidationOptions
 	),
 	"css/global": createSchemaValidation(
-		require("../../schemas/plugins/css/CssGlobalGeneratorOptions.check.js"),
-		() => getSchema("CssGlobalGeneratorOptions"),
+		require("../../schemas/plugins/css/CssModuleGeneratorOptions.check"),
+		() => getSchema("CssModuleGeneratorOptions"),
 		generatorValidationOptions
 	)
 };
@@ -135,23 +148,23 @@ const parserValidationOptions = {
 };
 const validateParserOptions = {
 	css: createSchemaValidation(
-		require("../../schemas/plugins/css/CssParserOptions.check.js"),
+		require("../../schemas/plugins/css/CssParserOptions.check"),
 		() => getSchema("CssParserOptions"),
 		parserValidationOptions
 	),
 	"css/auto": createSchemaValidation(
-		require("../../schemas/plugins/css/CssAutoParserOptions.check.js"),
-		() => getSchema("CssAutoParserOptions"),
+		require("../../schemas/plugins/css/CssModuleParserOptions.check"),
+		() => getSchema("CssModuleParserOptions"),
 		parserValidationOptions
 	),
 	"css/module": createSchemaValidation(
-		require("../../schemas/plugins/css/CssModuleParserOptions.check.js"),
+		require("../../schemas/plugins/css/CssModuleParserOptions.check"),
 		() => getSchema("CssModuleParserOptions"),
 		parserValidationOptions
 	),
 	"css/global": createSchemaValidation(
-		require("../../schemas/plugins/css/CssGlobalParserOptions.check.js"),
-		() => getSchema("CssGlobalParserOptions"),
+		require("../../schemas/plugins/css/CssModuleParserOptions.check"),
+		() => getSchema("CssModuleParserOptions"),
 		parserValidationOptions
 	)
 };
@@ -188,7 +201,7 @@ class CssModulesPlugin {
 	}
 
 	constructor() {
-		/** @type {WeakMap<Source, { undoPath: string, inheritance: Inheritance, source: CachedSource }>} */
+		/** @type {WeakMap<Source, ModuleFactoryCacheEntry>} */
 		this._moduleFactoryCache = new WeakMap();
 	}
 
@@ -202,7 +215,6 @@ class CssModulesPlugin {
 			PLUGIN_NAME,
 			(compilation, { normalModuleFactory }) => {
 				const hooks = CssModulesPlugin.getCompilationHooks(compilation);
-				const selfFactory = new SelfModuleFactory(compilation.moduleGraph);
 				compilation.dependencyFactories.set(
 					CssImportDependency,
 					normalModuleFactory
@@ -219,18 +231,6 @@ class CssModulesPlugin {
 					CssUrlDependency,
 					new CssUrlDependency.Template()
 				);
-				compilation.dependencyTemplates.set(
-					CssLocalIdentifierDependency,
-					new CssLocalIdentifierDependency.Template()
-				);
-				compilation.dependencyFactories.set(
-					CssSelfLocalIdentifierDependency,
-					selfFactory
-				);
-				compilation.dependencyTemplates.set(
-					CssSelfLocalIdentifierDependency,
-					new CssSelfLocalIdentifierDependency.Template()
-				);
 				compilation.dependencyFactories.set(
 					CssIcssImportDependency,
 					normalModuleFactory
@@ -259,46 +259,44 @@ class CssModulesPlugin {
 				]) {
 					normalModuleFactory.hooks.createParser
 						.for(type)
-						.tap(PLUGIN_NAME, parserOptions => {
-							validateParserOptions[type](parserOptions);
-							const { url, import: importOption, namedExports } = parserOptions;
-
+						.tap(PLUGIN_NAME, (parserOptions) => {
 							switch (type) {
 								case CSS_MODULE_TYPE:
-									return new CssParser({
-										importOption,
-										url,
-										namedExports
-									});
+									validateParserOptions[type](parserOptions);
+
+									return new CssParser(parserOptions);
 								case CSS_MODULE_TYPE_GLOBAL:
+									validateParserOptions[type](parserOptions);
+
 									return new CssParser({
 										defaultMode: "global",
-										importOption,
-										url,
-										namedExports
+										...parserOptions
 									});
 								case CSS_MODULE_TYPE_MODULE:
+									validateParserOptions[type](parserOptions);
+
 									return new CssParser({
 										defaultMode: "local",
-										importOption,
-										url,
-										namedExports
+										...parserOptions
 									});
 								case CSS_MODULE_TYPE_AUTO:
+									validateParserOptions[type](parserOptions);
+
 									return new CssParser({
 										defaultMode: "auto",
-										importOption,
-										url,
-										namedExports
+										...parserOptions
 									});
 							}
 						});
 					normalModuleFactory.hooks.createGenerator
 						.for(type)
-						.tap(PLUGIN_NAME, generatorOptions => {
+						.tap(PLUGIN_NAME, (generatorOptions) => {
 							validateGeneratorOptions[type](generatorOptions);
 
-							return new CssGenerator(generatorOptions);
+							return new CssGenerator(
+								generatorOptions,
+								compilation.moduleGraph
+							);
 						});
 					normalModuleFactory.hooks.createModuleClass
 						.for(type)
@@ -340,39 +338,65 @@ class CssModulesPlugin {
 											inheritance.push(...parent.inheritance);
 										}
 
-										return new CssModule({
+										return new CssModule(
+											/** @type {CSSModuleCreateData} */
+											({
+												...createData,
+												cssLayer: dependency.layer,
+												supports: dependency.supports,
+												media: dependency.media,
+												inheritance
+											})
+										);
+									}
+
+									return new CssModule(
+										/** @type {CSSModuleCreateData} */
+										({
 											...createData,
 											cssLayer: dependency.layer,
 											supports: dependency.supports,
-											media: dependency.media,
-											inheritance
-										});
-									}
-
-									return new CssModule({
-										...createData,
-										cssLayer: dependency.layer,
-										supports: dependency.supports,
-										media: dependency.media
-									});
+											media: dependency.media
+										})
+									);
 								}
 							}
 
-							return new CssModule(createData);
+							return new CssModule(
+								/** @type {CSSModuleCreateData} */
+								(createData)
+							);
 						});
+
+					NormalModule.getCompilationHooks(compilation).processResult.tap(
+						PLUGIN_NAME,
+						(result, module) => {
+							if (module.type === type) {
+								const [source, ...rest] = result;
+
+								return [removeBOM(source), ...rest];
+							}
+
+							return result;
+						}
+					);
 				}
 
 				JavascriptModulesPlugin.getCompilationHooks(
 					compilation
 				).renderModuleContent.tap(PLUGIN_NAME, (source, module) => {
 					if (module instanceof CssModule && module.hot) {
-						const exports = module.buildInfo.cssData.exports;
+						const cssData = /** @type {BuildInfo} */ (module.buildInfo).cssData;
+						if (!cssData) {
+							return source;
+						}
+						const exports = cssData.exports;
 						const stringifiedExports = JSON.stringify(
 							JSON.stringify(
-								Array.from(exports).reduce((obj, [key, value]) => {
+								[...exports].reduce((obj, [key, value]) => {
 									obj[key] = value;
 									return obj;
-								}, {})
+								}, /** @type {Record<string, string>} */ ({}))
 							)
 						);
 
@@ -390,6 +414,8 @@ class CssModulesPlugin {
 
 						return new ConcatSource(source, "\n", new RawSource(hmrCode));
 					}
+
+					return source;
 				});
 				const orderedCssModulesPerChunk = new WeakMap();
 				compilation.hooks.afterCodeGeneration.tap(PLUGIN_NAME, () => {
@@ -406,10 +432,9 @@ class CssModulesPlugin {
 				compilation.hooks.chunkHash.tap(PLUGIN_NAME, (chunk, hash, context) => {
 					hooks.chunkHash.call(chunk, hash, context);
 				});
-				compilation.hooks.contentHash.tap(PLUGIN_NAME, chunk => {
+				compilation.hooks.contentHash.tap(PLUGIN_NAME, (chunk) => {
 					const {
 						chunkGraph,
-						codeGenerationResults,
 						moduleGraph,
 						runtimeTemplate,
 						outputOptions: {
@@ -419,8 +444,11 @@ class CssModulesPlugin {
 							hashFunction
 						}
 					} = compilation;
-					const hash = createHash(/** @type {Algorithm} */ (hashFunction));
+					const hash = createHash(hashFunction);
 					if (hashSalt) hash.update(hashSalt);
+					const codeGenerationResults =
+						/** @type {CodeGenerationResults} */
+						(compilation.codeGenerationResults);
 					hooks.chunkHash.call(chunk, hash, {
 						chunkGraph,
 						codeGenerationResults,
@@ -433,12 +461,8 @@ class CssModulesPlugin {
 							hash.update(chunkGraph.getModuleHash(module, chunk.runtime));
 						}
 					}
-					const digest = /** @type {string} */ (hash.digest(hashDigest));
-					chunk.contentHash.css = nonNumericOnlyHash(
-						digest,
-						/** @type {number} */
-						(hashDigestLength)
-					);
+					const digest = hash.digest(hashDigest);
+					chunk.contentHash.css = nonNumericOnlyHash(digest, hashDigestLength);
 				});
 				compilation.hooks.renderManifest.tap(PLUGIN_NAME, (result, options) => {
 					const { chunkGraph } = compilation;
@@ -464,8 +488,7 @@ class CssModulesPlugin {
 						);
 						const undoPath = getUndoPath(
 							filename,
-							/** @type {string} */
-							(compilation.outputOptions.path),
+							compilation.outputOptions.path,
 							false
 						);
 						result.push({
@@ -495,7 +518,7 @@ class CssModulesPlugin {
 				 * @param {Chunk} chunk the chunk
 				 * @returns {boolean} true, when enabled
 				 */
-				const isEnabledForChunk = chunk => {
+				const isEnabledForChunk = (chunk) => {
 					const options = chunk.getEntryOptions();
 					const chunkLoading =
 						options && options.chunkLoading !== undefined
@@ -506,15 +529,13 @@ class CssModulesPlugin {
 				const onceForChunkSet = new WeakSet();
 				/**
 				 * @param {Chunk} chunk chunk to check
-				 * @param {Set<string>} set runtime requirements
+				 * @param {RuntimeRequirements} set runtime requirements
 				 */
 				const handler = (chunk, set) => {
 					if (onceForChunkSet.has(chunk)) return;
 					onceForChunkSet.add(chunk);
 					if (!isEnabledForChunk(chunk)) return;
 
-					set.add(RuntimeGlobals.makeNamespaceObject);
-
 					const CssLoadingRuntimeModule = getCssLoadingRuntimeModule();
 					compilation.addRuntimeModule(chunk, new CssLoadingRuntimeModule(set));
 				};
@@ -528,7 +549,7 @@ class CssModulesPlugin {
 						if (
 							!chunkGraph.hasModuleInGraph(
 								chunk,
-								m =>
+								(m) =>
 									m.type === CSS_MODULE_TYPE ||
 									m.type === CSS_MODULE_TYPE_GLOBAL ||
 									m.type === CSS_MODULE_TYPE_MODULE ||
@@ -549,7 +570,7 @@ class CssModulesPlugin {
 						if (
 							!chunkGraph.hasModuleInGraph(
 								chunk,
-								m =>
+								(m) =>
 									m.type === CSS_MODULE_TYPE ||
 									m.type === CSS_MODULE_TYPE_GLOBAL ||
 									m.type === CSS_MODULE_TYPE_MODULE ||
@@ -561,6 +582,15 @@ class CssModulesPlugin {
 						set.add(RuntimeGlobals.publicPath);
 						set.add(RuntimeGlobals.getChunkCssFilename);
 					});
+
+				compilation.hooks.runtimeRequirementInTree
+					.for(RuntimeGlobals.cssMergeStyleSheets)
+					.tap(PLUGIN_NAME, (chunk) => {
+						compilation.addRuntimeModule(
+							chunk,
+							new CssMergeStyleSheetsRuntimeModule()
+						);
+					});
 			}
 		);
 	}
@@ -579,24 +609,32 @@ class CssModulesPlugin {
 
 		// Get ordered list of modules per chunk group
 		// Lists are in reverse order to allow to use Array.pop()
-		const modulesByChunkGroup = Array.from(chunk.groupsIterable, chunkGroup => {
-			const sortedModules = modulesList
-				.map(module => ({
-					module,
-					index: chunkGroup.getModulePostOrderIndex(module)
-				}))
-				.filter(item => item.index !== undefined)
-				.sort(
-					(a, b) =>
-						/** @type {number} */ (b.index) - /** @type {number} */ (a.index)
-				)
-				.map(item => item.module);
-
-			return { list: sortedModules, set: new Set(sortedModules) };
-		});
-
-		if (modulesByChunkGroup.length === 1)
+		const modulesByChunkGroup = Array.from(
+			chunk.groupsIterable,
+			(chunkGroup) => {
+				const sortedModules = modulesList
+					.map((module) => ({
+						module,
+						index: chunkGroup.getModulePostOrderIndex(module)
+					}))
+					.filter((item) => item.index !== undefined)
+					.sort(
+						(a, b) =>
+							/** @type {number} */ (b.index) - /** @type {number} */ (a.index)
+					)
+					.map((item) => item.module);
+
+				return { list: sortedModules, set: new Set(sortedModules) };
+			}
+		);
+
+		if (modulesByChunkGroup.length === 1) {
 			return modulesByChunkGroup[0].list.reverse();
+		}
+
+		const boundCompareModulesByIdOrIdentifier = compareModulesByIdOrIdentifier(
+			compilation.chunkGraph
+		);
 
 		/**
 		 * @param {{ list: Module[] }} a a
@@ -608,7 +646,10 @@ class CssModulesPlugin {
 				return b.length === 0 ? 0 : 1;
 			}
 			if (b.length === 0) return -1;
-			return compareModulesByIdentifier(a[a.length - 1], b[b.length - 1]);
+			return boundCompareModulesByIdOrIdentifier(
+				a[a.length - 1],
+				b[b.length - 1]
+			);
 		};
 
 		modulesByChunkGroup.sort(compareModuleLists);
@@ -664,8 +705,9 @@ class CssModulesPlugin {
 			// Remove the selected module from all lists
 			for (const { list, set } of modulesByChunkGroup) {
 				const lastModule = list[list.length - 1];
-				if (lastModule === selectedModule) list.pop();
-				else if (hasFailed && set.has(selectedModule)) {
+				if (lastModule === selectedModule) {
+					list.pop();
+				} else if (hasFailed && set.has(selectedModule)) {
 					const idx = list.indexOf(selectedModule);
 					if (idx >= 0) list.splice(idx, 1);
 				}
@@ -689,8 +731,8 @@ class CssModulesPlugin {
 				(
 					chunkGraph.getOrderedChunkModulesIterableBySourceType(
 						chunk,
-						"css-import",
-						compareModulesByIdentifier
+						CSS_IMPORT_TYPE,
+						compareModulesByIdOrIdentifier(chunkGraph)
 					)
 				),
 				compilation
@@ -701,8 +743,8 @@ class CssModulesPlugin {
 				(
 					chunkGraph.getOrderedChunkModulesIterableBySourceType(
 						chunk,
-						"css",
-						compareModulesByIdentifier
+						CSS_TYPE,
+						compareModulesByIdOrIdentifier(chunkGraph)
 					)
 				),
 				compilation
@@ -711,21 +753,14 @@ class CssModulesPlugin {
 	}
 
 	/**
-	 * @param {CssModule}  module css module
+	 * @param {CssModule} module css module
 	 * @param {ChunkRenderContext} renderContext options object
 	 * @param {CompilationHooks} hooks hooks
-	 * @returns {Source} css module source
+	 * @returns {Source | null} css module source
 	 */
-	renderModule(module, renderContext, hooks) {
-		const { codeGenerationResults, chunk, undoPath } = renderContext;
-		const codeGenResult = codeGenerationResults.get(module, chunk.runtime);
-		const moduleSourceContent =
-			/** @type {Source} */
-			(
-				codeGenResult.sources.get("css") ||
-					codeGenResult.sources.get("css-import")
-			);
-		const cacheEntry = this._moduleFactoryCache.get(moduleSourceContent);
+	static renderModule(module, renderContext, hooks) {
+		const { undoPath, moduleFactoryCache, moduleSourceContent } = renderContext;
+		const cacheEntry = moduleFactoryCache.get(moduleSourceContent);
 
 		/** @type {Inheritance} */
 		const inheritance = [[module.cssLayer, module.supports, module.media]];
@@ -747,6 +782,7 @@ class CssModulesPlugin {
 		) {
 			source = cacheEntry.source;
 		} else {
+			if (!moduleSourceContent) return null;
 			const moduleSourceCode =
 				/** @type {string} */
 				(moduleSourceContent.source());
@@ -801,7 +837,7 @@ class CssModulesPlugin {
 			}
 
 			source = new CachedSource(moduleSource);
-			this._moduleFactoryCache.set(moduleSourceContent, {
+			moduleFactoryCache.set(moduleSourceContent, {
 				inheritance,
 				undoPath,
 				source
@@ -823,28 +859,39 @@ class CssModulesPlugin {
 		{
 			undoPath,
 			chunk,
-			chunkGraph,
 			codeGenerationResults,
 			modules,
-			runtimeTemplate
+			runtimeTemplate,
+			chunkGraph
 		},
 		hooks
 	) {
 		const source = new ConcatSource();
 		for (const module of modules) {
 			try {
-				const moduleSource = this.renderModule(
+				const codeGenResult = codeGenerationResults.get(module, chunk.runtime);
+				const moduleSourceContent =
+					/** @type {Source} */
+					(
+						codeGenResult.sources.get(CSS_TYPE) ||
+							codeGenResult.sources.get(CSS_IMPORT_TYPE)
+					);
+				const moduleSource = CssModulesPlugin.renderModule(
 					module,
 					{
 						undoPath,
 						chunk,
 						chunkGraph,
 						codeGenerationResults,
+						moduleSourceContent,
+						moduleFactoryCache: this._moduleFactoryCache,
 						runtimeTemplate
 					},
 					hooks
 				);
-				source.add(moduleSource);
+				if (moduleSource) {
+					source.add(moduleSource);
+				}
 			} catch (err) {
 				/** @type {Error} */
 				(err).message += `\nduring rendering of css ${module.identifier()}`;
@@ -864,9 +911,9 @@ class CssModulesPlugin {
 		if (chunk.cssFilenameTemplate) {
 			return chunk.cssFilenameTemplate;
 		} else if (chunk.canBeInitial()) {
-			return /** @type {TemplatePath} */ (outputOptions.cssFilename);
+			return outputOptions.cssFilename;
 		}
-		return /** @type {TemplatePath} */ (outputOptions.cssChunkFilename);
+		return outputOptions.cssChunkFilename;
 	}
 
 	/**
@@ -876,9 +923,11 @@ class CssModulesPlugin {
 	 */
 	static chunkHasCss(chunk, chunkGraph) {
 		return (
-			Boolean(chunkGraph.getChunkModulesIterableBySourceType(chunk, "css")) ||
 			Boolean(
-				chunkGraph.getChunkModulesIterableBySourceType(chunk, "css-import")
+				chunkGraph.getChunkModulesIterableBySourceType(chunk, CSS_TYPE)
+			) ||
+			Boolean(
+				chunkGraph.getChunkModulesIterableBySourceType(chunk, CSS_IMPORT_TYPE)
 			)
 		);
 	}