webpack 5.102.0 → 5.103.0

package/lib/css/CssModulesPlugin.js

@@ -29,11 +29,13 @@ const SelfModuleFactory = require("../SelfModuleFactory");
 const Template = require("../Template");
 const WebpackError = require("../WebpackError");
 const CssIcssExportDependency = require("../dependencies/CssIcssExportDependency");
+const CssIcssFromIdentifierDependency = require("../dependencies/CssIcssFromIdentifierDependency");
+const CssIcssGlobalIdentifierDependency = require("../dependencies/CssIcssGlobalIdentifierDependency");
 const CssIcssImportDependency = require("../dependencies/CssIcssImportDependency");
+const CssIcssLocalIdentifierDependency = require("../dependencies/CssIcssLocalIdentifierDependency");
+const CssIcssSelfLocalIdentifierDependency = require("../dependencies/CssIcssSelfLocalIdentifierDependency");
 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 +47,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 +65,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 +80,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 +95,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")
 );
@@ -192,7 +205,7 @@ class CssModulesPlugin {
 	}
 
 	constructor() {
-		/** @type {WeakMap<Source, { undoPath: string, inheritance: Inheritance, source: CachedSource }>} */
+		/** @type {WeakMap<Source, ModuleFactoryCacheEntry>} */
 		this._moduleFactoryCache = new WeakMap();
 	}
 
@@ -224,16 +237,16 @@ class CssModulesPlugin {
 					new CssUrlDependency.Template()
 				);
 				compilation.dependencyTemplates.set(
-					CssLocalIdentifierDependency,
-					new CssLocalIdentifierDependency.Template()
+					CssIcssLocalIdentifierDependency,
+					new CssIcssLocalIdentifierDependency.Template()
 				);
 				compilation.dependencyFactories.set(
-					CssSelfLocalIdentifierDependency,
+					CssIcssSelfLocalIdentifierDependency,
 					selfFactory
 				);
 				compilation.dependencyTemplates.set(
-					CssSelfLocalIdentifierDependency,
-					new CssSelfLocalIdentifierDependency.Template()
+					CssIcssSelfLocalIdentifierDependency,
+					new CssIcssSelfLocalIdentifierDependency.Template()
 				);
 				compilation.dependencyFactories.set(
 					CssIcssImportDependency,
@@ -243,6 +256,22 @@ class CssModulesPlugin {
 					CssIcssImportDependency,
 					new CssIcssImportDependency.Template()
 				);
+				compilation.dependencyFactories.set(
+					CssIcssFromIdentifierDependency,
+					normalModuleFactory
+				);
+				compilation.dependencyTemplates.set(
+					CssIcssFromIdentifierDependency,
+					new CssIcssFromIdentifierDependency.Template()
+				);
+				compilation.dependencyFactories.set(
+					CssIcssGlobalIdentifierDependency,
+					normalModuleFactory
+				);
+				compilation.dependencyTemplates.set(
+					CssIcssGlobalIdentifierDependency,
+					new CssIcssGlobalIdentifierDependency.Template()
+				);
 				compilation.dependencyTemplates.set(
 					CssIcssExportDependency,
 					new CssIcssExportDependency.Template()
@@ -265,35 +294,44 @@ class CssModulesPlugin {
 						.for(type)
 						.tap(PLUGIN_NAME, (parserOptions) => {
 							validateParserOptions[type](parserOptions);
-							const { url, import: importOption, namedExports } = parserOptions;
+							const {
+								url,
+								import: importOption,
+								namedExports,
+								exportType
+							} = parserOptions;
 
 							switch (type) {
 								case CSS_MODULE_TYPE:
 									return new CssParser({
 										importOption,
 										url,
-										namedExports
+										namedExports,
+										exportType
 									});
 								case CSS_MODULE_TYPE_GLOBAL:
 									return new CssParser({
 										defaultMode: "global",
 										importOption,
 										url,
-										namedExports
+										namedExports,
+										exportType
 									});
 								case CSS_MODULE_TYPE_MODULE:
 									return new CssParser({
 										defaultMode: "local",
 										importOption,
 										url,
-										namedExports
+										namedExports,
+										exportType
 									});
 								case CSS_MODULE_TYPE_AUTO:
 									return new CssParser({
 										defaultMode: "auto",
 										importOption,
 										url,
-										namedExports
+										namedExports,
+										exportType
 									});
 							}
 						});
@@ -470,12 +508,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;
@@ -549,8 +583,6 @@ class CssModulesPlugin {
 					onceForChunkSet.add(chunk);
 					if (!isEnabledForChunk(chunk)) return;
 
-					set.add(RuntimeGlobals.makeNamespaceObject);
-
 					const CssLoadingRuntimeModule = getCssLoadingRuntimeModule();
 					compilation.addRuntimeModule(chunk, new CssLoadingRuntimeModule(set));
 				};
@@ -597,6 +629,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()
+						);
+					});
 			}
 		);
 	}
@@ -762,18 +803,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]];
@@ -795,6 +829,7 @@ class CssModulesPlugin {
 		) {
 			source = cacheEntry.source;
 		} else {
+			if (!moduleSourceContent) return null;
 			const moduleSourceCode =
 				/** @type {string} */
 				(moduleSourceContent.source());
@@ -849,7 +884,7 @@ class CssModulesPlugin {
 			}
 
 			source = new CachedSource(moduleSource);
-			this._moduleFactoryCache.set(moduleSourceContent, {
+			moduleFactoryCache.set(moduleSourceContent, {
 				inheritance,
 				undoPath,
 				source
@@ -871,28 +906,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") ||
+							codeGenResult.sources.get("css-import")
+					);
+				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()}`;