webpack 5.105.3 → 5.106.0

package/lib/dependencies/CommonJsRequireContextDependency.js

@@ -5,6 +5,7 @@
 
 "use strict";
 
+const Dependency = require("../Dependency");
 const makeSerializable = require("../util/makeSerializable");
 const ContextDependency = require("./ContextDependency");
 const ContextDependencyTemplateAsRequireCall = require("./ContextDependencyTemplateAsRequireCall");
@@ -13,6 +14,10 @@ const ContextDependencyTemplateAsRequireCall = require("./ContextDependencyTempl
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 /** @typedef {import("./ContextDependency").ContextDependencyOptions} ContextDependencyOptions */
+/** @typedef {import("../Dependency").RawReferencedExports} RawReferencedExports */
+/** @typedef {import("../Dependency").ReferencedExports} ReferencedExports */
+/** @typedef {import("../ModuleGraph")} ModuleGraph */
+/** @typedef {import("../util/runtime").RuntimeSpec} RuntimeSpec */
 
 class CommonJsRequireContextDependency extends ContextDependency {
 	/**
@@ -35,6 +40,22 @@ class CommonJsRequireContextDependency extends ContextDependency {
 		return "cjs require context";
 	}
 
+	/**
+	 * Returns list of exports referenced by this dependency
+	 * @param {ModuleGraph} moduleGraph module graph
+	 * @param {RuntimeSpec} runtime the runtime for which the module is analysed
+	 * @returns {ReferencedExports} referenced exports
+	 */
+	getReferencedExports(moduleGraph, runtime) {
+		if (!this.options.referencedExports) {
+			return Dependency.EXPORTS_OBJECT_REFERENCED;
+		}
+		return this.options.referencedExports.map((name) => ({
+			name,
+			canMangle: false
+		}));
+	}
+
 	/**
 	 * @param {ObjectSerializerContext} context context
 	 */

package/lib/dependencies/CommonJsRequireDependency.js

@@ -5,22 +5,31 @@
 
 "use strict";
 
+const Dependency = require("../Dependency");
 const makeSerializable = require("../util/makeSerializable");
 const ModuleDependency = require("./ModuleDependency");
 const ModuleDependencyTemplateAsId = require("./ModuleDependencyTemplateAsId");
 
+/** @typedef {import("../Dependency").RawReferencedExports} RawReferencedExports */
+/** @typedef {import("../Dependency").ReferencedExports} ReferencedExports */
+/** @typedef {import("../ModuleGraph")} ModuleGraph */
 /** @typedef {import("../javascript/JavascriptParser").Range} Range */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
+/** @typedef {import("../util/runtime").RuntimeSpec} RuntimeSpec */
 
 class CommonJsRequireDependency extends ModuleDependency {
 	/**
 	 * @param {string} request request
 	 * @param {Range=} range location in source code
 	 * @param {string=} context request context
+	 * @param {RawReferencedExports | null=} referencedExports list of referenced exports
 	 */
-	constructor(request, range, context) {
+	constructor(request, range, context, referencedExports = null) {
 		super(request);
 		this.range = range;
 		this._context = context;
+		this.referencedExports = referencedExports;
 	}
 
 	get type() {
@@ -30,6 +39,38 @@ class CommonJsRequireDependency extends ModuleDependency {
 	get category() {
 		return "commonjs";
 	}
+
+	/**
+	 * Returns list of exports referenced by this dependency
+	 * @param {ModuleGraph} moduleGraph module graph
+	 * @param {RuntimeSpec} runtime the runtime for which the module is analysed
+	 * @returns {ReferencedExports} referenced exports
+	 */
+	getReferencedExports(moduleGraph, runtime) {
+		if (!this.referencedExports) return Dependency.EXPORTS_OBJECT_REFERENCED;
+		return this.referencedExports.map((name) => ({
+			name,
+			canMangle: false
+		}));
+	}
+
+	/**
+	 * @param {ObjectSerializerContext} context context
+	 */
+	serialize(context) {
+		const { write } = context;
+		write(this.referencedExports);
+		super.serialize(context);
+	}
+
+	/**
+	 * @param {ObjectDeserializerContext} context context
+	 */
+	deserialize(context) {
+		const { read } = context;
+		this.referencedExports = read();
+		super.deserialize(context);
+	}
 }
 
 CommonJsRequireDependency.Template = ModuleDependencyTemplateAsId;

package/lib/dependencies/CommonJsSelfReferenceDependency.js

@@ -8,7 +8,7 @@
 const RuntimeGlobals = require("../RuntimeGlobals");
 const { equals } = require("../util/ArrayHelpers");
 const makeSerializable = require("../util/makeSerializable");
-const propertyAccess = require("../util/propertyAccess");
+const { propertyAccess } = require("../util/property");
 const NullDependency = require("./NullDependency");
 
 /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */

package/lib/dependencies/ContextElementDependency.js

@@ -69,7 +69,7 @@ class ContextElementDependency extends ModuleDependency {
 	getResourceIdentifier() {
 		let str = super.getResourceIdentifier();
 		if (this.attributes) {
-			str += `|importAttributes${JSON.stringify(this.attributes)}`;
+			str += `|attributes${JSON.stringify(this.attributes)}`;
 		}
 		return str;
 	}

package/lib/dependencies/CreateRequireParserPlugin.js

@@ -328,6 +328,17 @@ class CreateRequireParserPlugin {
 					return processResolve(expr, false);
 				}
 			});
+		parser.hooks.expression
+			.for(createRequireSpecifierTag)
+			.tap(PLUGIN_NAME, (expr) => {
+				const clearDep = new ConstDependency(
+					"/* createRequire */ undefined",
+					/** @type {Range} */ (expr.range)
+				);
+				clearDep.loc = /** @type {DependencyLocation} */ (expr.loc);
+				parser.state.module.addPresentationalDependency(clearDep);
+				return true;
+			});
 		parser.hooks.call
 			.for(createRequireSpecifierTag)
 			.tap(PLUGIN_NAME, (expr) => {

package/lib/dependencies/CssIcssExportDependency.js

@@ -6,6 +6,7 @@
 "use strict";
 
 const { CSS_TYPE, JAVASCRIPT_TYPE } = require("../ModuleSourceTypeConstants");
+const { interpolate } = require("../TemplatedPathPlugin");
 const WebpackError = require("../WebpackError");
 const { cssExportConvention } = require("../util/conventions");
 const createHash = require("../util/createHash");
@@ -19,6 +20,7 @@ const NullDependency = require("./NullDependency");
 const getCssParser = memoize(() => require("../css/CssParser"));
 
 /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
+/** @typedef {import("../../declarations/WebpackOptions").HashFunction} HashFunction */
 /** @typedef {import("../../declarations/WebpackOptions").CssGeneratorExportsConvention} CssGeneratorExportsConvention */
 /** @typedef {import("../../declarations/WebpackOptions").CssGeneratorLocalIdentName} CssGeneratorLocalIdentName */
 /** @typedef {import("../CssModule")} CssModule */
@@ -62,13 +64,18 @@ const getLocalIdent = (local, module, chunkGraph, runtimeTemplate) => {
 
 	let localIdentHash = "";
 
-	if (/\[(?:fullhash|hash)\]/.test(localIdentName)) {
+	if (
+		typeof localIdentName === "function" ||
+		/\[(?:fullhash|hash)\]/.test(localIdentName)
+	) {
 		const hashSalt = generator.options.localIdentHashSalt;
 		const hashDigest =
 			/** @type {string} */
 			(generator.options.localIdentHashDigest);
 		const hashDigestLength = generator.options.localIdentHashDigestLength;
-		const { hashFunction } = runtimeTemplate.outputOptions;
+		const hashFunction =
+			/** @type {HashFunction} */
+			(generator.options.localIdentHashFunction);
 
 		const hash = createHash(hashFunction);
 
@@ -88,7 +95,10 @@ const getLocalIdent = (local, module, chunkGraph, runtimeTemplate) => {
 
 	let contentHash = "";
 
-	if (/\[contenthash\]/.test(localIdentName)) {
+	if (
+		typeof localIdentName === "function" ||
+		/\[contenthash\]/.test(localIdentName)
+	) {
 		const hash = createHash(runtimeTemplate.outputOptions.hashFunction);
 		const source = module.originalSource();
 
@@ -110,26 +120,32 @@ const getLocalIdent = (local, module, chunkGraph, runtimeTemplate) => {
 		);
 	}
 
-	let localIdent = runtimeTemplate.compilation.getPath(localIdentName, {
+	let localIdent = interpolate(localIdentName, {
 		prepareId: (id) => {
 			if (typeof id !== "string") return id;
 
-			return id
-				.replace(/^([.-]|[^a-z0-9_-])+/i, "")
-				.replace(/[^a-z0-9_-]+/gi, "_");
+			return (
+				id
+					.replace(/^([.-]|[^a-z0-9_-])+/i, "")
+					// We keep the `@` symbol because it can be used in the package name (e.g. `@company/package`), and if we replace it with `_`, a class conflict may occur.
+					// For example - `@import "@foo/package/style.module.css"` and `@import "foo/package/style.module.css"` (`foo` is a package, `package` is just a directory) will create a class conflict.
+					.replace(/[^a-z0-9@_-]+/gi, "_")
+			);
 		},
 		filename: relativeResourcePath,
 		hash: localIdentHash,
+		local,
 		contentHash,
 		chunkGraph,
 		module
 	});
 
-	if (/\[local\]/.test(localIdentName)) {
+	// TODO move these things into interpolate
+	if (/\[local\]/.test(localIdent)) {
 		localIdent = localIdent.replace(/\[local\]/g, local);
 	}
 
-	if (/\[uniqueName\]/.test(localIdentName)) {
+	if (/\[uniqueName\]/.test(localIdent)) {
 		localIdent = localIdent.replace(
 			/\[uniqueName\]/g,
 			/** @type {string} */ (uniqueName)
@@ -140,10 +156,12 @@ const getLocalIdent = (local, module, chunkGraph, runtimeTemplate) => {
 	return localIdent.replace(/^((-?\d)|--)/, "_$1");
 };
 
+/** @typedef {string | [string, string]} Value */
+
 // 0 - replace, 1 - replace, 2 - append,  2 - once
 /** @typedef {0 | 1 | 2 | 3 | 4} ExportMode */
-// 0 - normal, 1 - custom css variable, 2 - grid custom ident
-/** @typedef {0 | 1 | 2} ExportType */
+// 0 - normal, 1 - custom css variable, 2 - grid custom ident, 3 - composes
+/** @typedef {0 | 1 | 2 | 3} ExportType */
 
 class CssIcssExportDependency extends NullDependency {
 	/**
@@ -151,7 +169,7 @@ class CssIcssExportDependency extends NullDependency {
 	 *
 	 * :export { LOCAL_NAME: EXPORT_NAME }
 	 * @param {string} name export name
-	 * @param {string | [string, string, boolean]} value export value or true when we need interpolate name as a value
+	 * @param {Value} value value or local name and import name
 	 * @param {Range=} range range
 	 * @param {boolean=} interpolate true when value need to be interpolated, otherwise false
 	 * @param {ExportMode=} exportMode export mode
@@ -234,11 +252,9 @@ class CssIcssExportDependency extends NullDependency {
 			/** @type {CssGeneratorExportsConvention} */
 			(generator.options.exportsConvention)
 		);
+
 		return {
-			exports: [
-				...names,
-				...(Array.isArray(this.value) ? [this.value[1]] : [])
-			].map((name) => ({
+			exports: [...names].map((name) => ({
 				name,
 				canMangle: true
 			})),
@@ -330,45 +346,157 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 ) {
 	// TODO looking how to cache
 	/**
-	 * @param {string} symbol the name of symbol
+	 * @param {string} localName local name
+	 * @param {string} importName import name
 	 * @param {DependencyTemplateContext} templateContext the context object
+	 * @param {Set<CssIcssExportDependency>} seen seen to prevent cyclical problems
 	 * @returns {string | undefined} found reference
 	 */
-	static findReference(symbol, templateContext) {
-		for (const item of templateContext.module.dependencies) {
-			if (item instanceof CssIcssImportDependency) {
-				// Looking for the referring module
-				const module = templateContext.moduleGraph.getModule(item);
-
-				if (!module) {
-					return undefined;
-				}
+	static resolve(localName, importName, templateContext, seen = new Set()) {
+		const { moduleGraph } = templateContext;
+		const importDep =
+			/** @type {CssIcssImportDependency | undefined} */
+			(
+				templateContext.module.dependencies.find(
+					(d) =>
+						d instanceof CssIcssImportDependency && d.localName === localName
+				)
+			);
+		if (!importDep) return undefined;
 
-				for (let i = module.dependencies.length - 1; i >= 0; i--) {
-					const nestedDep = module.dependencies[i];
-					if (
-						nestedDep instanceof CssIcssExportDependency &&
-						symbol === nestedDep.name
-					) {
-						if (Array.isArray(nestedDep.value)) {
-							return this.findReference(nestedDep.value[1], {
-								...templateContext,
-								module
-							});
-						}
+		const module = /** @type {CssModule} */ (moduleGraph.getModule(importDep));
+		if (!module) return undefined;
+
+		const exportDep =
+			/** @type {CssIcssExportDependency} */
+			(
+				module.dependencies.find(
+					(d) => d instanceof CssIcssExportDependency && d.name === importName
+				)
+			);
+
+		if (!exportDep) return undefined;
 
-						return CssIcssExportDependency.Template.getIdentifier(
-							nestedDep.value,
-							nestedDep,
-							{
+		if (seen.has(exportDep)) return undefined;
+		seen.add(exportDep);
+
+		const { value, interpolate } = exportDep;
+
+		if (Array.isArray(value)) {
+			return this.resolve(
+				value[0],
+				value[1],
+				{
+					...templateContext,
+					module
+				},
+				seen
+			);
+		}
+
+		if (interpolate) {
+			return CssIcssExportDependency.Template.getIdentifier(value, exportDep, {
+				...templateContext,
+				module
+			});
+		}
+
+		return value;
+	}
+
+	/**
+	 * @param {CssIcssExportDependency} dep value
+	 * @param {DependencyTemplateContext} templateContext template context
+	 * @param {Set<CssIcssExportDependency>} seen to prevent cyclical problems
+	 * @returns {string[]} final names
+	 */
+	static resolveReferences(dep, templateContext, seen = new Set()) {
+		/** @type {string[]} */
+		const references = [];
+
+		if (seen.has(dep)) return references;
+		seen.add(dep);
+
+		if (Array.isArray(dep.value)) {
+			const importDep =
+				/** @type {CssIcssImportDependency | undefined} */
+				(
+					templateContext.module.dependencies.find(
+						(d) =>
+							d instanceof CssIcssImportDependency &&
+							d.localName === dep.value[0]
+					)
+				);
+			if (!importDep) return references;
+
+			const module =
+				/** @type {CssModule} */
+				(templateContext.moduleGraph.getModule(importDep));
+			if (!module) return references;
+
+			for (const d of module.dependencies) {
+				if (d instanceof CssIcssExportDependency && d.name === dep.value[1]) {
+					if (Array.isArray(d.value)) {
+						const deepReferences =
+							CssIcssExportDependencyTemplate.resolveReferences(
+								d,
+								{
+									...templateContext,
+									module
+								},
+								seen
+							);
+
+						references.push(...deepReferences);
+					} else {
+						references.push(
+							CssIcssExportDependencyTemplate.getIdentifier(d.value, d, {
 								...templateContext,
 								module
-							}
+							})
+						);
+					}
+				}
+			}
+		} else {
+			// Adding basic class
+			references.push(
+				CssIcssExportDependencyTemplate.getIdentifier(
+					dep.value,
+					dep,
+					templateContext
+				)
+			);
+
+			for (const d of templateContext.module.dependencies) {
+				if (
+					d instanceof CssIcssExportDependency &&
+					d.exportType === CssIcssExportDependency.EXPORT_TYPE.COMPOSES &&
+					d.name === dep.value
+				) {
+					if (Array.isArray(d.value)) {
+						const deepReferences =
+							CssIcssExportDependencyTemplate.resolveReferences(
+								d,
+								templateContext,
+								seen
+							);
+
+						references.push(...deepReferences);
+					} else {
+						references.push(
+							CssIcssExportDependencyTemplate.getIdentifier(
+								d.value,
+								d,
+								templateContext
+							)
 						);
 					}
 				}
 			}
 		}
+
+		return [...new Set(references)];
 	}
 
 	/**
@@ -400,7 +528,7 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 					getLocalIdent(
 						local,
 						/** @type {CssModule} */
-						(templateContext.module),
+						(m),
 						templateContext.chunkGraph,
 						templateContext.runtimeTemplate
 					)
@@ -408,7 +536,7 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 			);
 		}
 
-		return /** @type {string} */ (dep.value);
+		return value;
 	}
 
 	/**
@@ -420,46 +548,35 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 	apply(dependency, source, templateContext) {
 		const dep = /** @type {CssIcssExportDependency} */ (dependency);
 		if (!dep.range && templateContext.type !== JAVASCRIPT_TYPE) return;
-		const { cssData } = templateContext;
-		const { module: m, moduleGraph, runtime } = templateContext;
+		const { module: m, moduleGraph, runtime, cssData } = templateContext;
 		const module = /** @type {CssModule} */ (m);
 		const generator = /** @type {CssGenerator} */ (module.generator);
-		const names = dep.getExportsConventionNames(
-			dep.name,
-			/** @type {CssGeneratorExportsConvention} */
-			(generator.options.exportsConvention)
-		);
-		const usedNames =
-			/** @type {string[]} */
-			(
-				names
-					.map((name) =>
-						moduleGraph.getExportInfo(module, name).getUsedName(name, runtime)
-					)
-					.filter(Boolean)
-			);
-
-		const allNames = new Set([...usedNames, ...names]);
 		const isReference = Array.isArray(dep.value);
 
 		/** @type {string} */
 		let value;
 
-		if (isReference && dep.value[2] === true) {
-			const resolved = CssIcssExportDependencyTemplate.findReference(
+		// The `composes` has more complex logic for collecting all the classes
+		if (
+			dep.exportType === CssIcssExportDependency.EXPORT_TYPE.COMPOSES &&
+			templateContext.type === JAVASCRIPT_TYPE
+		) {
+			value = CssIcssExportDependencyTemplate.resolveReferences(
+				dep,
+				templateContext
+			).join(" ");
+		} else if (isReference) {
+			const resolved = CssIcssExportDependencyTemplate.resolve(
+				dep.value[0],
 				dep.value[1],
 				templateContext
 			);
 
-			// Fallback to the original name if not found
+			// Fallback to the local name if not resolved
 			value = resolved || dep.value[0];
 		} else {
-			value = isReference ? dep.value[1] : /** @type {string} */ (dep.value);
-		}
-
-		if (dep.interpolate) {
 			value = CssIcssExportDependencyTemplate.getIdentifier(
-				value,
+				/** @type {string} */ (dep.value),
 				dep,
 				templateContext
 			);
@@ -476,31 +593,36 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 			templateContext.type === JAVASCRIPT_TYPE &&
 			dep.exportMode !== CssIcssExportDependency.EXPORT_MODE.NONE
 		) {
+			const names = dep.getExportsConventionNames(
+				dep.name,
+				/** @type {CssGeneratorExportsConvention} */
+				(generator.options.exportsConvention)
+			);
+			const usedNames =
+				/** @type {string[]} */
+				(
+					names
+						.map((name) =>
+							moduleGraph.getExportInfo(module, name).getUsedName(name, runtime)
+						)
+						.filter(Boolean)
+				);
+			const allNames = new Set([...usedNames, ...names]);
+			const unescaped = getCssParser().unescapeIdentifier(value);
+
 			for (const used of allNames) {
 				if (dep.exportMode === CssIcssExportDependency.EXPORT_MODE.ONCE) {
-					const newValue = getCssParser().unescapeIdentifier(value);
-					if (isReference) {
-						cssData.exports.set(dep.value[1], newValue);
-					}
 					if (cssData.exports.has(used)) return;
-					cssData.exports.set(used, newValue);
+					cssData.exports.set(used, unescaped);
 				} else {
 					const originalValue =
 						dep.exportMode === CssIcssExportDependency.EXPORT_MODE.REPLACE
 							? undefined
 							: cssData.exports.get(used);
 
-					const newValue =
-						dep.exportMode ===
-						CssIcssExportDependency.EXPORT_MODE.SELF_REFERENCE
-							? cssData.exports.get(
-									isReference ? dep.value[0] : /** @type {string} */ (dep.value)
-								) || value
-							: getCssParser().unescapeIdentifier(value);
-
 					cssData.exports.set(
 						used,
-						`${originalValue ? `${originalValue}${newValue ? " " : ""}` : ""}${newValue}`
+						`${originalValue ? `${originalValue}${unescaped ? " " : ""}` : ""}${unescaped}`
 					);
 				}
 			}
@@ -524,11 +646,12 @@ CssIcssExportDependency.EXPORT_MODE = {
 	SELF_REFERENCE: 4
 };
 
-/** @type {Record<"NORMAL" | "CUSTOM_VARIABLE" | "GRID_CUSTOM_IDENTIFIER", ExportType>} */
+/** @type {Record<"NORMAL" | "CUSTOM_VARIABLE" | "GRID_CUSTOM_IDENTIFIER" | "COMPOSES", ExportType>} */
 CssIcssExportDependency.EXPORT_TYPE = {
 	NORMAL: 0,
 	CUSTOM_VARIABLE: 1,
-	GRID_CUSTOM_IDENTIFIER: 2
+	GRID_CUSTOM_IDENTIFIER: 2,
+	COMPOSES: 3
 };
 
 makeSerializable(