webpack 5.102.1 → 5.104.0

package/lib/css/CssModulesPlugin.js

@@ -17,6 +17,7 @@ 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,
@@ -25,15 +26,12 @@ const {
 } = 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");
@@ -45,6 +43,7 @@ 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 */
@@ -62,6 +61,7 @@ const CssParser = require("./CssParser");
 /** @typedef {import("../Template").RuntimeTemplate} RuntimeTemplate */
 /** @typedef {import("../TemplatedPathPlugin").TemplatePath} TemplatePath */
 /** @typedef {import("../util/Hash")} Hash */
+/** @typedef {import("../Module").BuildMeta} BuildMeta */
 
 /**
  * @typedef {object} RenderContext
@@ -76,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
  */
 
 /**
@@ -89,6 +91,13 @@ 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")
 );
@@ -117,8 +126,8 @@ const validateGeneratorOptions = {
 		generatorValidationOptions
 	),
 	"css/auto": createSchemaValidation(
-		require("../../schemas/plugins/css/CssAutoGeneratorOptions.check"),
-		() => getSchema("CssAutoGeneratorOptions"),
+		require("../../schemas/plugins/css/CssModuleGeneratorOptions.check"),
+		() => getSchema("CssModuleGeneratorOptions"),
 		generatorValidationOptions
 	),
 	"css/module": createSchemaValidation(
@@ -127,8 +136,8 @@ const validateGeneratorOptions = {
 		generatorValidationOptions
 	),
 	"css/global": createSchemaValidation(
-		require("../../schemas/plugins/css/CssGlobalGeneratorOptions.check"),
-		() => getSchema("CssGlobalGeneratorOptions"),
+		require("../../schemas/plugins/css/CssModuleGeneratorOptions.check"),
+		() => getSchema("CssModuleGeneratorOptions"),
 		generatorValidationOptions
 	)
 };
@@ -144,8 +153,8 @@ const validateParserOptions = {
 		parserValidationOptions
 	),
 	"css/auto": createSchemaValidation(
-		require("../../schemas/plugins/css/CssAutoParserOptions.check"),
-		() => getSchema("CssAutoParserOptions"),
+		require("../../schemas/plugins/css/CssModuleParserOptions.check"),
+		() => getSchema("CssModuleParserOptions"),
 		parserValidationOptions
 	),
 	"css/module": createSchemaValidation(
@@ -154,8 +163,8 @@ const validateParserOptions = {
 		parserValidationOptions
 	),
 	"css/global": createSchemaValidation(
-		require("../../schemas/plugins/css/CssGlobalParserOptions.check"),
-		() => getSchema("CssGlobalParserOptions"),
+		require("../../schemas/plugins/css/CssModuleParserOptions.check"),
+		() => getSchema("CssModuleParserOptions"),
 		parserValidationOptions
 	)
 };
@@ -192,7 +201,7 @@ class CssModulesPlugin {
 	}
 
 	constructor() {
-		/** @type {WeakMap<Source, { undoPath: string, inheritance: Inheritance, source: CachedSource }>} */
+		/** @type {WeakMap<Source, ModuleFactoryCacheEntry>} */
 		this._moduleFactoryCache = new WeakMap();
 	}
 
@@ -206,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
@@ -223,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
@@ -264,36 +260,31 @@ class CssModulesPlugin {
 					normalModuleFactory.hooks.createParser
 						.for(type)
 						.tap(PLUGIN_NAME, (parserOptions) => {
-							validateParserOptions[type](parserOptions);
-							const { url, import: importOption, namedExports } = 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
 									});
 							}
 						});
@@ -545,8 +536,6 @@ class CssModulesPlugin {
 					onceForChunkSet.add(chunk);
 					if (!isEnabledForChunk(chunk)) return;
 
-					set.add(RuntimeGlobals.makeNamespaceObject);
-
 					const CssLoadingRuntimeModule = getCssLoadingRuntimeModule();
 					compilation.addRuntimeModule(chunk, new CssLoadingRuntimeModule(set));
 				};
@@ -593,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()
+						);
+					});
 			}
 		);
 	}
@@ -733,7 +731,7 @@ class CssModulesPlugin {
 				(
 					chunkGraph.getOrderedChunkModulesIterableBySourceType(
 						chunk,
-						"css-import",
+						CSS_IMPORT_TYPE,
 						compareModulesByIdOrIdentifier(chunkGraph)
 					)
 				),
@@ -745,7 +743,7 @@ class CssModulesPlugin {
 				(
 					chunkGraph.getOrderedChunkModulesIterableBySourceType(
 						chunk,
-						"css",
+						CSS_TYPE,
 						compareModulesByIdOrIdentifier(chunkGraph)
 					)
 				),
@@ -758,18 +756,11 @@ class CssModulesPlugin {
 	 * @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]];
@@ -791,6 +782,7 @@ class CssModulesPlugin {
 		) {
 			source = cacheEntry.source;
 		} else {
+			if (!moduleSourceContent) return null;
 			const moduleSourceCode =
 				/** @type {string} */
 				(moduleSourceContent.source());
@@ -845,7 +837,7 @@ class CssModulesPlugin {
 			}
 
 			source = new CachedSource(moduleSource);
-			this._moduleFactoryCache.set(moduleSourceContent, {
+			moduleFactoryCache.set(moduleSourceContent, {
 				inheritance,
 				undoPath,
 				source
@@ -867,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()}`;
@@ -920,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)
 			)
 		);
 	}