webpack 5.97.1 → 5.104.1

package/lib/css/CssGenerator.js

@@ -5,42 +5,62 @@
 
 "use strict";
 
-const { ReplaceSource, RawSource, ConcatSource } = require("webpack-sources");
+const { ConcatSource, RawSource, ReplaceSource } = require("webpack-sources");
 const { UsageState } = require("../ExportsInfo");
 const Generator = require("../Generator");
 const InitFragment = require("../InitFragment");
 const {
-	JS_AND_CSS_EXPORT_TYPES,
-	JS_AND_CSS_TYPES
-} = require("../ModuleSourceTypesConstants");
+	CSS_TYPE,
+	CSS_TYPES,
+	JAVASCRIPT_AND_CSS_TYPES,
+	JAVASCRIPT_TYPE,
+	JAVASCRIPT_TYPES
+} = require("../ModuleSourceTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
+const CssImportDependency = require("../dependencies/CssImportDependency");
+const { getUndoPath } = require("../util/identifier");
+const memoize = require("../util/memoize");
 
 /** @typedef {import("webpack-sources").Source} Source */
-/** @typedef {import("../../declarations/WebpackOptions").CssAutoGeneratorOptions} CssAutoGeneratorOptions */
-/** @typedef {import("../../declarations/WebpackOptions").CssGlobalGeneratorOptions} CssGlobalGeneratorOptions */
 /** @typedef {import("../../declarations/WebpackOptions").CssModuleGeneratorOptions} CssModuleGeneratorOptions */
+/** @typedef {import("../Compilation").DependencyConstructor} DependencyConstructor */
 /** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
 /** @typedef {import("../Dependency")} Dependency */
 /** @typedef {import("../DependencyTemplate").CssData} CssData */
 /** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} DependencyTemplateContext */
 /** @typedef {import("../Generator").GenerateContext} GenerateContext */
 /** @typedef {import("../Generator").UpdateHashContext} UpdateHashContext */
+/** @typedef {import("../Module").BuildInfo} BuildInfo */
+/** @typedef {import("../Module").BuildMeta} BuildMeta */
 /** @typedef {import("../Module").ConcatenationBailoutReasonContext} ConcatenationBailoutReasonContext */
+/** @typedef {import("../Module").SourceType} SourceType */
 /** @typedef {import("../Module").SourceTypes} SourceTypes */
+/** @typedef {import("../ModuleGraph")} ModuleGraph */
 /** @typedef {import("../NormalModule")} NormalModule */
 /** @typedef {import("../util/Hash")} Hash */
+/** @typedef {import("./CssModulesPlugin").ModuleFactoryCacheEntry} ModuleFactoryCacheEntry */
+/** @typedef {import("../CssModule")} CssModule */
+/** @typedef {import("../Compilation")} Compilation */
+/** @typedef {import("../Module").RuntimeRequirements} RuntimeRequirements */
+/** @typedef {import("../../declarations/WebpackOptions").CssParserExportType} CssParserExportType */
+
+const getPropertyName = memoize(() => require("../util/propertyName"));
+const getCssModulesPlugin = memoize(() => require("./CssModulesPlugin"));
 
 class CssGenerator extends Generator {
 	/**
-	 * @param {CssAutoGeneratorOptions | CssGlobalGeneratorOptions | CssModuleGeneratorOptions} options options
+	 * @param {CssModuleGeneratorOptions} options options
+	 * @param {ModuleGraph} moduleGraph the module graph
 	 */
-	constructor(options) {
+	constructor(options, moduleGraph) {
 		super();
-		this.convention = options.exportsConvention;
-		this.localIdentName = options.localIdentName;
-		this.exportsOnly = options.exportsOnly;
-		this.esModule = options.esModule;
+		this.options = options;
+		this._exportsOnly = options.exportsOnly;
+		this._esModule = options.esModule;
+		this._moduleGraph = moduleGraph;
+		/** @type {WeakMap<Source, ModuleFactoryCacheEntry>} */
+		this._moduleFactoryCache = new WeakMap();
 	}
 
 	/**
@@ -49,7 +69,7 @@ class CssGenerator extends Generator {
 	 * @returns {string | undefined} reason why this module can't be concatenated, undefined when it can be concatenated
 	 */
 	getConcatenationBailoutReason(module, context) {
-		if (!this.esModule) {
+		if (!this._esModule) {
 			return "Module is not an ECMAScript module";
 		}
 
@@ -57,24 +77,117 @@ class CssGenerator extends Generator {
 	}
 
 	/**
-	 * @param {NormalModule} module module for which the code should be generated
-	 * @param {GenerateContext} generateContext context for generate
-	 * @returns {Source | null} generated code
+	 * Generate JavaScript code that requires and concatenates all CSS imports
+	 * @param {NormalModule} module the module to generate CSS text for
+	 * @param {GenerateContext} generateContext the generate context
+	 * @returns {{ expr: string, type: CssParserExportType }[]} JavaScript code that concatenates all imported CSS
 	 */
-	generate(module, generateContext) {
-		const source =
-			generateContext.type === "javascript"
-				? new ReplaceSource(new RawSource(""))
-				: new ReplaceSource(/** @type {Source} */ (module.originalSource()));
+	_generateImportCode(module, generateContext) {
+		const moduleGraph = generateContext.moduleGraph;
+		/** @type {{ expr: string, type: CssParserExportType }[]} */
+		const parts = [];
 
-		/** @type {InitFragment<GenerateContext>[]} */
-		const initFragments = [];
-		/** @type {CssData} */
-		const cssData = {
-			esModule: this.esModule,
-			exports: new Map()
-		};
+		// Iterate through module.dependencies to maintain source order
+		for (const dep of module.dependencies) {
+			if (dep instanceof CssImportDependency) {
+				/** @type {CssModule} */
+				const depModule = /** @type {CssModule} */ (moduleGraph.getModule(dep));
+				const importVar = generateContext.runtimeTemplate.moduleExports({
+					module: depModule,
+					chunkGraph: generateContext.chunkGraph,
+					request: /** @type {CssModule} */ (depModule).userRequest,
+					weak: false,
+					runtimeRequirements: generateContext.runtimeRequirements
+				});
+
+				generateContext.runtimeRequirements.add(
+					RuntimeGlobals.compatGetDefaultExport
+				);
+				parts.push({
+					expr: `(${RuntimeGlobals.compatGetDefaultExport}(${importVar})() || "")`,
+					type: /** @type {CssParserExportType} */ (
+						/** @type {BuildMeta} */ (depModule.buildMeta).exportType
+					)
+				});
+			}
+		}
+
+		return parts;
+	}
+
+	/**
+	 * Generate CSS code for the current module
+	 * @param {NormalModule} module the module to generate CSS code for
+	 * @param {GenerateContext} generateContext the generate context
+	 * @returns {string} the CSS code as string
+	 */
+	_generateModuleCode(module, generateContext) {
+		const moduleSourceContent = /** @type {Source} */ (
+			this.generate(module, {
+				...generateContext,
+				type: CSS_TYPE
+			})
+		);
+
+		if (!moduleSourceContent) {
+			return "";
+		}
+
+		const compilation = generateContext.runtimeTemplate.compilation;
+		const { path: filename } = compilation.getPathWithInfo(
+			compilation.outputOptions.cssChunkFilename,
+			{
+				runtime: generateContext.runtime,
+				contentHashType: "css"
+			}
+		);
+		const undoPath = getUndoPath(
+			filename,
+			compilation.outputOptions.path,
+			false
+		);
+
+		const CssModulesPlugin = getCssModulesPlugin();
+		const hooks = CssModulesPlugin.getCompilationHooks(compilation);
+		const renderedSource = CssModulesPlugin.renderModule(
+			/** @type {CssModule} */ (module),
+			{
+				undoPath,
+				moduleSourceContent,
+				moduleFactoryCache: this._moduleFactoryCache,
+				runtimeTemplate: generateContext.runtimeTemplate
+			},
+			hooks
+		);
+
+		if (!renderedSource) {
+			return "";
+		}
+
+		const content = renderedSource.source();
+		return typeof content === "string" ? content : content.toString("utf8");
+	}
 
+	/**
+	 * @param {NormalModule} module the current module
+	 * @param {Dependency} dependency the dependency to generate
+	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
+	 * @param {ReplaceSource} source the current replace source which can be modified
+	 * @param {GenerateContext & { cssData: CssData }} generateContext the render context
+	 * @returns {void}
+	 */
+	sourceDependency(module, dependency, initFragments, source, generateContext) {
+		const constructor =
+			/** @type {DependencyConstructor} */
+			(dependency.constructor);
+		const template = generateContext.dependencyTemplates.get(constructor);
+		if (!template) {
+			throw new Error(
+				`No template for dependency: ${dependency.constructor.name}`
+			);
+		}
+
+		/** @type {DependencyTemplateContext} */
 		/** @type {InitFragment<GenerateContext>[] | undefined} */
 		let chunkInitFragments;
 		/** @type {DependencyTemplateContext} */
@@ -91,7 +204,8 @@ class CssGenerator extends Generator {
 				/** @type {CodeGenerationResults} */
 				(generateContext.codeGenerationResults),
 			initFragments,
-			cssData,
+			cssData: generateContext.cssData,
+			type: generateContext.type,
 			get chunkInitFragments() {
 				if (!chunkInitFragments) {
 					const data =
@@ -108,36 +222,149 @@ class CssGenerator extends Generator {
 			}
 		};
 
-		/**
-		 * @param {Dependency} dependency dependency
-		 */
-		const handleDependency = dependency => {
-			const constructor =
-				/** @type {new (...args: EXPECTED_ANY[]) => Dependency} */
-				(dependency.constructor);
-			const template = generateContext.dependencyTemplates.get(constructor);
-			if (!template) {
-				throw new Error(
-					`No template for dependency: ${dependency.constructor.name}`
+		template.apply(dependency, source, templateContext);
+	}
+
+	/**
+	 * @param {NormalModule} module the module to generate
+	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
+	 * @param {ReplaceSource} source the current replace source which can be modified
+	 * @param {GenerateContext & { cssData: CssData }} generateContext the generateContext
+	 * @returns {void}
+	 */
+	sourceModule(module, initFragments, source, generateContext) {
+		for (const dependency of module.dependencies) {
+			this.sourceDependency(
+				module,
+				dependency,
+				initFragments,
+				source,
+				generateContext
+			);
+		}
+
+		if (module.presentationalDependencies !== undefined) {
+			for (const dependency of module.presentationalDependencies) {
+				this.sourceDependency(
+					module,
+					dependency,
+					initFragments,
+					source,
+					generateContext
 				);
 			}
+		}
+	}
 
-			template.apply(dependency, source, templateContext);
+	/**
+	 * @param {NormalModule} module module for which the code should be generated
+	 * @param {GenerateContext} generateContext context for generate
+	 * @returns {Source | null} generated code
+	 */
+	generate(module, generateContext) {
+		const exportType = /** @type {BuildMeta} */ (module.buildMeta).exportType;
+		const source =
+			generateContext.type === JAVASCRIPT_TYPE
+				? exportType === "link"
+					? new ReplaceSource(new RawSource(""))
+					: new ReplaceSource(/** @type {Source} */ (module.originalSource()))
+				: new ReplaceSource(/** @type {Source} */ (module.originalSource()));
+		/** @type {InitFragment<GenerateContext>[]} */
+		const initFragments = [];
+		/** @type {CssData} */
+		const cssData = {
+			esModule: /** @type {boolean} */ (this._esModule),
+			exports: new Map()
 		};
 
-		for (const dependency of module.dependencies) {
-			handleDependency(dependency);
-		}
+		this.sourceModule(module, initFragments, source, {
+			...generateContext,
+			cssData
+		});
+
+		const generateCssText = () => {
+			const importCode = this._generateImportCode(module, generateContext);
+			const moduleCode = this._generateModuleCode(module, generateContext);
+
+			if (importCode.length > 0) {
+				if (
+					exportType === "css-style-sheet" ||
+					importCode.some((part) => part.type !== exportType)
+				) {
+					generateContext.runtimeRequirements.add(
+						RuntimeGlobals.cssMergeStyleSheets
+					);
+
+					return `${RuntimeGlobals.cssMergeStyleSheets}([${[...importCode.map((part) => part.expr), JSON.stringify(moduleCode)].join(", ")}])`;
+				}
+				return generateContext.runtimeTemplate.concatenation(
+					...importCode,
+					moduleCode
+				);
+			}
+			return JSON.stringify(moduleCode);
+		};
+
+		/**
+		 * @returns {string | null} the default export
+		 */
+		const generateJSDefaultExport = () => {
+			switch (exportType) {
+				case "text": {
+					return generateCssText();
+				}
+				case "css-style-sheet": {
+					const constOrVar = generateContext.runtimeTemplate.renderConst();
+					return `(${generateContext.runtimeTemplate.basicFunction("", [
+						`${constOrVar} cssText = ${generateCssText()};`,
+						`${constOrVar} sheet = new CSSStyleSheet();`,
+						"sheet.replaceSync(cssText);",
+						"return sheet;"
+					])})()`;
+				}
+				default:
+					return null;
+			}
+		};
 
 		switch (generateContext.type) {
-			case "javascript": {
-				module.buildInfo.cssData = cssData;
+			case JAVASCRIPT_TYPE: {
+				const isCSSModule = /** @type {BuildMeta} */ (module.buildMeta)
+					.isCSSModule;
+				const defaultExport = generateJSDefaultExport();
+				/**
+				 * @param {string} name the export name
+				 * @param {string} value the export value
+				 * @returns {string} the value to be used in the export
+				 */
+				const stringifyExportValue = (name, value) => {
+					if (defaultExport) {
+						return name === "default" ? value : JSON.stringify(value);
+					}
+					return JSON.stringify(value);
+				};
 
-				generateContext.runtimeRequirements.add(RuntimeGlobals.module);
+				/** @type {BuildInfo} */
+				(module.buildInfo).cssData = cssData;
+
+				// Required for HMR
+				if (module.hot) {
+					generateContext.runtimeRequirements.add(RuntimeGlobals.module);
+				}
+
+				if (defaultExport) {
+					cssData.exports.set("default", /** @type {string} */ (defaultExport));
+				}
+
+				if (cssData.exports.size === 0 && !isCSSModule) {
+					return new RawSource("");
+				}
 
 				if (generateContext.concatenationScope) {
 					const source = new ConcatSource();
 					const usedIdentifiers = new Set();
+					const { RESERVED_IDENTIFIER } = getPropertyName();
+
 					for (const [name, v] of cssData.exports) {
 						const usedName = generateContext.moduleGraph
 							.getExportInfo(module, name)
@@ -145,30 +372,27 @@ class CssGenerator extends Generator {
 						if (!usedName) {
 							continue;
 						}
+
 						let identifier = Template.toIdentifier(usedName);
-						const { RESERVED_IDENTIFIER } = require("../util/propertyName");
 						if (RESERVED_IDENTIFIER.has(identifier)) {
 							identifier = `_${identifier}`;
 						}
-						const i = 0;
+						let i = 0;
 						while (usedIdentifiers.has(identifier)) {
 							identifier = Template.toIdentifier(name + i);
+							i += 1;
 						}
 						usedIdentifiers.add(identifier);
 						generateContext.concatenationScope.registerExport(name, identifier);
 						source.add(
-							`${
-								generateContext.runtimeTemplate.supportsConst()
-									? "const"
-									: "var"
-							} ${identifier} = ${JSON.stringify(v)};\n`
+							`${generateContext.runtimeTemplate.renderConst()} ${identifier} = ${stringifyExportValue(name, v)};\n`
 						);
 					}
 					return source;
 				}
 
 				const needNsObj =
-					this.esModule &&
+					this._esModule &&
 					generateContext.moduleGraph
 						.getExportsInfo(module)
 						.otherExportsInfo.getUsed(generateContext.runtime) !==
@@ -180,10 +404,21 @@ class CssGenerator extends Generator {
 					);
 				}
 
+				// Should be after `concatenationScope` to allow module inlining
+				generateContext.runtimeRequirements.add(RuntimeGlobals.module);
+
+				if (!isCSSModule && !needNsObj) {
+					return new RawSource(
+						`${module.moduleArgument}.exports = ${defaultExport}`
+					);
+				}
+
 				const exports = [];
 
 				for (const [name, v] of cssData.exports) {
-					exports.push(`\t${JSON.stringify(name)}: ${JSON.stringify(v)}`);
+					exports.push(
+						`\t${JSON.stringify(name)}: ${stringifyExportValue(name, v)}`
+					);
 				}
 
 				return new RawSource(
@@ -192,17 +427,36 @@ class CssGenerator extends Generator {
 					}.exports = {\n${exports.join(",\n")}\n}${needNsObj ? ")" : ""};`
 				);
 			}
-			case "css": {
-				if (module.presentationalDependencies !== undefined) {
-					for (const dependency of module.presentationalDependencies) {
-						handleDependency(dependency);
-					}
+			case CSS_TYPE: {
+				if (!this._generatesJsOnly(module)) {
+					generateContext.runtimeRequirements.add(RuntimeGlobals.hasCssModules);
 				}
 
-				generateContext.runtimeRequirements.add(RuntimeGlobals.hasCssModules);
-
 				return InitFragment.addToSource(source, initFragments, generateContext);
 			}
+			default:
+				return null;
+		}
+	}
+
+	/**
+	 * @param {Error} error the error
+	 * @param {NormalModule} module module for which the code should be generated
+	 * @param {GenerateContext} generateContext context for generate
+	 * @returns {Source | null} generated code
+	 */
+	generateError(error, module, generateContext) {
+		switch (generateContext.type) {
+			case JAVASCRIPT_TYPE: {
+				return new RawSource(
+					`throw new Error(${JSON.stringify(error.message)});`
+				);
+			}
+			case CSS_TYPE: {
+				return new RawSource(`/**\n ${error.message} \n**/`);
+			}
+			default:
+				return null;
 		}
 	}
 
@@ -211,33 +465,57 @@ class CssGenerator extends Generator {
 	 * @returns {SourceTypes} available types (do not mutate)
 	 */
 	getTypes(module) {
-		// TODO, find a better way to prevent the original module from being removed after concatenation, maybe it is a bug
-		return this.exportsOnly ? JS_AND_CSS_EXPORT_TYPES : JS_AND_CSS_TYPES;
+		if (this._generatesJsOnly(module)) {
+			return JAVASCRIPT_TYPES;
+		}
+		const sourceTypes = new Set();
+		const connections = this._moduleGraph.getIncomingConnections(module);
+		for (const connection of connections) {
+			if (connection.dependency instanceof CssImportDependency) {
+				continue;
+			}
+			if (!connection.originModule) {
+				continue;
+			}
+			if (connection.originModule.type.split("/")[0] !== CSS_TYPE) {
+				sourceTypes.add(JAVASCRIPT_TYPE);
+			}
+		}
+		if (sourceTypes.has(JAVASCRIPT_TYPE)) {
+			return JAVASCRIPT_AND_CSS_TYPES;
+		}
+		return CSS_TYPES;
 	}
 
 	/**
 	 * @param {NormalModule} module the module
-	 * @param {string=} type source type
+	 * @param {SourceType=} type source type
 	 * @returns {number} estimate size of the module
 	 */
 	getSize(module, type) {
 		switch (type) {
-			case "javascript": {
-				if (!module.buildInfo.cssData) {
+			case JAVASCRIPT_TYPE: {
+				const cssData = /** @type {BuildInfo} */ (module.buildInfo).cssData;
+				if (!cssData) {
 					return 42;
 				}
-
-				const exports = module.buildInfo.cssData.exports;
+				if (cssData.exports.size === 0) {
+					if (/** @type {BuildMeta} */ (module.buildMeta).isCSSModule) {
+						return 42;
+					}
+					return 0;
+				}
+				const exports = cssData.exports;
 				const stringifiedExports = JSON.stringify(
-					Array.from(exports).reduce((obj, [key, value]) => {
+					[...exports].reduce((obj, [key, value]) => {
 						obj[key] = value;
 						return obj;
-					}, {})
+					}, /** @type {Record<string, string>} */ ({}))
 				);
 
 				return stringifiedExports.length + 42;
 			}
-			case "css": {
+			case CSS_TYPE: {
 				const originalSource = module.originalSource();
 
 				if (!originalSource) {
@@ -246,6 +524,8 @@ class CssGenerator extends Generator {
 
 				return originalSource.size();
 			}
+			default:
+				return 0;
 		}
 	}
 
@@ -254,7 +534,19 @@ class CssGenerator extends Generator {
 	 * @param {UpdateHashContext} updateHashContext context for updating hash
 	 */
 	updateHash(hash, { module }) {
-		hash.update(this.esModule.toString());
+		hash.update(/** @type {boolean} */ (this._esModule).toString());
+	}
+
+	/**
+	 * @param {NormalModule} module module
+	 * @returns {boolean} true if the module only outputs JavaScript
+	 */
+	_generatesJsOnly(module) {
+		const exportType = /** @type {BuildMeta} */ (module.buildMeta).exportType;
+		return (
+			this._exportsOnly ||
+			/** @type {boolean} */ (exportType && exportType !== "link")
+		);
 	}
 }