@depup/webpack 5.106.0-depup.0 → 5.109.0-depup.0

package/lib/css/CssGenerator.js

@@ -7,6 +7,7 @@
 
 const {
 	ConcatSource,
+	OriginalSource,
 	RawSource,
 	ReplaceSource,
 	SourceMapSource
@@ -15,18 +16,31 @@ const { UsageState } = require("../ExportsInfo");
 const Generator = require("../Generator");
 const InitFragment = require("../InitFragment");
 const {
+	CSS_TEXT_TYPE,
+	CSS_TEXT_TYPES,
 	CSS_TYPE,
 	CSS_TYPES,
+	JAVASCRIPT_AND_CSS_TEXT_TYPES,
 	JAVASCRIPT_AND_CSS_TYPES,
 	JAVASCRIPT_TYPE,
-	JAVASCRIPT_TYPES
+	JAVASCRIPT_TYPES,
+	NO_TYPES
 } = require("../ModuleSourceTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
+const { getPresentKinds } = require("../TemplatedPathPlugin");
 const CssImportDependency = require("../dependencies/CssImportDependency");
 const HarmonyImportSideEffectDependency = require("../dependencies/HarmonyImportSideEffectDependency");
 
+const { encodeMappings } = require("../util/createMappings");
 const memoize = require("../util/memoize");
+const {
+	PUBLIC_PATH_FULL_HASH,
+	walkFullHashPlaceholders
+} = require("../util/publicPathPlaceholder");
+
+// Avoids `type.split("/")[0]` allocation on the `getTypes` hot path.
+const CSS_TYPE_PREFIX = `${CSS_TYPE}/`;
 
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("../../declarations/WebpackOptions").CssModuleGeneratorOptions} CssModuleGeneratorOptions */
@@ -34,7 +48,8 @@ const memoize = require("../util/memoize");
 /** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
 /** @typedef {import("../Dependency")} Dependency */
 /** @typedef {import("../DependencyTemplate").CssData} CssData */
-/** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} DependencyTemplateContext */
+/** @typedef {import("../DependencyTemplate").DependencyTemplateContext} DependencyTemplateContext */
+/** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} CssDependencyTemplateContext */
 /** @typedef {import("../Generator").GenerateContext} GenerateContext */
 /** @typedef {import("../Generator").UpdateHashContext} UpdateHashContext */
 /** @typedef {import("../Module").BuildInfo} BuildInfo */
@@ -46,30 +61,123 @@ const memoize = require("../util/memoize");
 /** @typedef {import("../NormalModule")} NormalModule */
 /** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("./CssModulesPlugin").ModuleFactoryCacheEntry} ModuleFactoryCacheEntry */
-/** @typedef {import("../CssModule")} CssModule */
+/** @typedef {import("./CssModule")} CssModule */
+/** @typedef {import("./CssModule").CssModuleBuildInfo} CssModuleBuildInfo */
+/** @typedef {import("./CssModule").CssModuleBuildMeta} CssModuleBuildMeta */
 /** @typedef {import("../Compilation")} Compilation */
 /** @typedef {import("../Module").RuntimeRequirements} RuntimeRequirements */
 /** @typedef {import("../../declarations/WebpackOptions").CssParserExportType} CssParserExportType */
 
+/** @typedef {{ line: number, column: number }} SourcePosition */
+/** @typedef {Map<string, SourcePosition>} ExportLocsMap */
+
 const getPropertyName = memoize(() => require("../util/property"));
 const getCssModulesPlugin = memoize(() => require("./CssModulesPlugin"));
 
+/** @typedef {import("webpack-sources").RawSourceMap} RawSourceMap */
+
+/**
+ * Build a v3 source map mapping CSS-class export lines back to their selector positions.
+ * @param {string} generatedJs the generated JS string
+ * @param {ExportLocsMap} exportLocs map of export names to CSS source location
+ * @param {string} cssContent original CSS source content
+ * @param {string} sourceName source identifier to use in the map
+ * @returns {RawSourceMap} a v3 RawSourceMap
+ */
+const buildExportsSourceMap = (
+	generatedJs,
+	exportLocs,
+	cssContent,
+	sourceName
+) => {
+	const lines = generatedJs.split("\n");
+
+	// O(L) pass: match `\t"<name>": <value>` lines against export names.
+	const keyToName = new Map();
+	for (const [exportName] of exportLocs) {
+		keyToName.set(JSON.stringify(exportName), exportName);
+	}
+	const lineByExport = new Map();
+	for (let i = 0; i < lines.length && lineByExport.size < keyToName.size; i++) {
+		const line = lines[i];
+		if (line.charCodeAt(0) !== 9 || line.charCodeAt(1) !== 34) continue;
+		let j = 2;
+		while (j < line.length) {
+			const c = line.charCodeAt(j);
+			if (c === 92) {
+				j += 2;
+				continue;
+			}
+			if (c === 34) break;
+			j++;
+		}
+		if (line.charCodeAt(j + 1) !== 58) continue;
+		const name = keyToName.get(line.slice(1, j + 1));
+		if (name !== undefined && !lineByExport.has(name)) {
+			lineByExport.set(name, i);
+		}
+	}
+
+	/** @type {(import("../util/createMappings").LineMappings)[]} */
+	const perLine = lines.map(() => null);
+	for (const [exportName, genLine] of lineByExport) {
+		const pos = /** @type {SourcePosition} */ (exportLocs.get(exportName));
+		// V3 source maps are 0-based; webpack `loc` lines are 1-based.
+		perLine[genLine] = {
+			generatedColumn: 0,
+			sourceIndex: 0,
+			originalLine: pos.line - 1,
+			originalColumn: pos.column
+		};
+	}
+
+	return {
+		version: 3,
+		file: "",
+		sources: [sourceName],
+		sourcesContent: [cssContent],
+		names: [],
+		mappings: encodeMappings(perLine)
+	};
+};
+
 class CssGenerator extends Generator {
 	/**
+	 * Creates an instance of CssGenerator.
 	 * @param {CssModuleGeneratorOptions} options options
 	 * @param {ModuleGraph} moduleGraph the module graph
 	 */
 	constructor(options, moduleGraph) {
 		super();
+		/** @type {CssModuleGeneratorOptions} */
 		this.options = options;
+		/** @type {boolean | undefined} */
 		this._exportsOnly = options.exportsOnly;
+		/** @type {boolean | undefined} */
 		this._esModule = options.esModule;
+		/** @type {ModuleGraph} */
 		this._moduleGraph = moduleGraph;
 		/** @type {WeakMap<Source, ModuleFactoryCacheEntry>} */
 		this._moduleFactoryCache = new WeakMap();
+		const localIdentName = options.localIdentName;
+		// Detect hash placeholders via the canonical template parser so this stays
+		// in sync with `interpolate`'s grammar.
+		const isFn = typeof localIdentName === "function";
+		const kinds =
+			typeof localIdentName === "string"
+				? getPresentKinds(localIdentName)
+				: undefined;
+		/** @type {boolean} */
+		this._localIdentNeedsHash =
+			isFn ||
+			(kinds !== undefined && (kinds.has("fullhash") || kinds.has("hash")));
+		/** @type {boolean} */
+		this._localIdentNeedsContentHash =
+			isFn || (kinds !== undefined && kinds.has("contenthash"));
 	}
 
 	/**
+	 * Returns the reason this module cannot be concatenated, when one exists.
 	 * @param {NormalModule} module module for which the bailout reason should be determined
 	 * @param {ConcatenationBailoutReasonContext} context context
 	 * @returns {string | undefined} reason why this module can't be concatenated, undefined when it can be concatenated
@@ -83,133 +191,40 @@ class CssGenerator extends Generator {
 	}
 
 	/**
-	 * 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
-	 * @param {boolean} getDefaultExport whether to get the default export
-	 * @returns {{ expr: string, type: CssParserExportType }[]} JavaScript code that concatenates all imported CSS
-	 */
-	_generateImportCode(module, generateContext, getDefaultExport = true) {
-		const moduleGraph = generateContext.moduleGraph;
-		/** @type {{ expr: string, type: CssParserExportType }[]} */
-		const parts = [];
-
-		// 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
-				});
-
-				if (getDefaultExport) {
-					generateContext.runtimeRequirements.add(
-						RuntimeGlobals.compatGetDefaultExport
-					);
-					parts.push({
-						expr: `(${RuntimeGlobals.compatGetDefaultExport}(${importVar})() || "")`,
-						type: /** @type {CssParserExportType} */ (
-							/** @type {CssModule} */ (depModule).exportType
-						)
-					});
-				} else {
-					parts.push({
-						expr: importVar,
-						type: /** @type {CssParserExportType} */ (
-							/** @type {CssModule} */ (depModule).exportType
-						)
-					});
-				}
-			}
-		}
-
-		return parts;
-	}
-
-	/**
-	 * Generate CSS source for the current module
-	 * @param {NormalModule} module the module to generate CSS source for
-	 * @param {GenerateContext} generateContext the generate context
-	 * @returns {Source | null} the CSS source
-	 */
-	_generateContentSource(module, generateContext) {
-		const moduleSourceContent = /** @type {Source} */ (
-			this.generate(module, {
-				...generateContext,
-				type: CSS_TYPE
-			})
-		);
-
-		if (!moduleSourceContent) {
-			return null;
-		}
-
-		const compilation = generateContext.runtimeTemplate.compilation;
-		// For non-link exportTypes (style, text, css-style-sheet), url() in the CSS
-		// is resolved relative to the document URL (for <style> tags and CSSStyleSheet),
-		// not relative to any output file. Use empty undoPath so urls are relative to
-		// the output root.
-		const undoPath = "";
-
-		const CssModulesPlugin = getCssModulesPlugin();
-		const hooks = CssModulesPlugin.getCompilationHooks(compilation);
-		return CssModulesPlugin.renderModule(
-			/** @type {CssModule} */ (module),
-			{
-				undoPath,
-				moduleSourceContent,
-				moduleFactoryCache: this._moduleFactoryCache,
-				runtimeTemplate: generateContext.runtimeTemplate
-			},
-			hooks
-		);
-	}
-
-	/**
-	 * Convert a CSS Source to a JS string literal Source, preserving source map.
-	 * Wraps the CSS content with JSON.stringify so it can be embedded in JS code.
-	 * @param {Source} cssSource the CSS source
-	 * @param {NormalModule} module the module
-	 * @returns {Source} a Source representing a JS string literal
-	 */
-	_cssSourceToJsStringLiteral(cssSource, module) {
-		const { source, map } = cssSource.sourceAndMap();
-		const content = /** @type {string} */ (source);
-		const escaped = JSON.stringify(content);
-		if (map) {
-			return new SourceMapSource(escaped, module.identifier(), map, content);
-		}
-		return new RawSource(escaped);
-	}
-
-	/**
-	 * @param {NormalModule} module the current module
+	 * Processes the provided 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
+	 * @param {DependencyTemplateContext & { cssData: CssData, type: string }} templateContext the template context (shared across all dependencies of the module)
 	 * @returns {void}
 	 */
-	sourceDependency(module, dependency, initFragments, source, generateContext) {
+	sourceDependency(dependency, source, templateContext) {
 		const constructor =
 			/** @type {DependencyConstructor} */
 			(dependency.constructor);
-		const template = generateContext.dependencyTemplates.get(constructor);
+		const template = templateContext.dependencyTemplates.get(constructor);
 		if (!template) {
 			throw new Error(
 				`No template for dependency: ${dependency.constructor.name}`
 			);
 		}
 
-		/** @type {DependencyTemplateContext} */
+		template.apply(dependency, source, templateContext);
+	}
+
+	/**
+	 * Processes the provided module.
+	 * @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) {
+		// Only `dependency` varies across `template.apply` calls, so one context
+		// (and one lazy `chunkInitFragments` getter) serves the whole module.
 		/** @type {InitFragment<GenerateContext>[] | undefined} */
 		let chunkInitFragments;
-		/** @type {DependencyTemplateContext} */
+		/** @type {CssDependencyTemplateContext} */
 		const templateContext = {
 			runtimeTemplate: generateContext.runtimeTemplate,
 			dependencyTemplates: generateContext.dependencyTemplates,
@@ -241,41 +256,19 @@ class CssGenerator extends Generator {
 			}
 		};
 
-		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
-			);
+			this.sourceDependency(dependency, source, templateContext);
 		}
 
 		if (module.presentationalDependencies !== undefined) {
 			for (const dependency of module.presentationalDependencies) {
-				this.sourceDependency(
-					module,
-					dependency,
-					initFragments,
-					source,
-					generateContext
-				);
+				this.sourceDependency(dependency, source, templateContext);
 			}
 		}
 	}
 
 	/**
+	 * Generates generated code for this runtime module.
 	 * @param {NormalModule} module module for which the code should be generated
 	 * @param {GenerateContext} generateContext context for generate
 	 * @returns {Source | null} generated code
@@ -291,7 +284,8 @@ class CssGenerator extends Generator {
 		/** @type {CssData} */
 		const cssData = {
 			esModule: /** @type {boolean} */ (this._esModule),
-			exports: new Map()
+			exports: new Map(),
+			exportLocs: new Map()
 		};
 
 		this.sourceModule(module, initFragments, source, {
@@ -301,23 +295,36 @@ class CssGenerator extends Generator {
 
 		switch (generateContext.type) {
 			case JAVASCRIPT_TYPE: {
+				const compilation = generateContext.runtimeTemplate.compilation;
+				const devtool = compilation.options.devtool;
+				const isCssModule = /** @type {CssModuleBuildMeta} */ (module.buildMeta)
+					.isCssModule;
+
 				const generateContentCode = () => {
 					switch (exportType) {
 						case "style": {
-							const cssSource = this._generateContentSource(
-								module,
-								generateContext
-							);
+							const cssSource = this._renderCss(module, generateContext);
 							if (!cssSource) return "";
-							const moduleId = generateContext.chunkGraph.getModuleId(module);
 
 							generateContext.runtimeRequirements.add(
 								RuntimeGlobals.cssInjectStyle
 							);
 
+							const moduleId = generateContext.chunkGraph.getModuleId(module);
+
+							if (generateContext.concatenationScope) {
+								return new ConcatSource(
+									`__webpack_css_styles__.push([${JSON.stringify(moduleId)}, `,
+									this._cssToJsLiteral(cssSource, devtool, generateContext),
+									"]);"
+								);
+							}
+
 							return new ConcatSource(
-								`${RuntimeGlobals.cssInjectStyle}(${JSON.stringify(moduleId || "")}, `,
-								this._cssSourceToJsStringLiteral(cssSource, module),
+								`${RuntimeGlobals.cssInjectStyle}(${JSON.stringify(
+									moduleId
+								)}, `,
+								this._cssToJsLiteral(cssSource, devtool, generateContext),
 								");"
 							);
 						}
@@ -329,8 +336,8 @@ class CssGenerator extends Generator {
 				const generateImportCode = () => {
 					switch (exportType) {
 						case "style": {
-							return this._generateImportCode(module, generateContext, false)
-								.map((part) => `${part.expr};`)
+							return this._generateImportExpressions(module, generateContext)
+								.map((expr) => `${expr};`)
 								.join("\n");
 						}
 						default:
@@ -338,69 +345,41 @@ class CssGenerator extends Generator {
 					}
 				};
 				const generateExportCode = () => {
-					/** @returns {Source} generated CSS text as JS expression */
-					const generateCssText = () => {
-						const importCode = this._generateImportCode(
-							module,
-							generateContext
-						);
-						const cssSource = this._generateContentSource(
-							module,
-							generateContext
-						);
-						const jsLiteral = cssSource
-							? this._cssSourceToJsStringLiteral(cssSource, module)
-							: new RawSource('""');
-
-						if (importCode.length > 0) {
-							if (
-								exportType === "css-style-sheet" ||
-								importCode.some((part) => part.type !== exportType)
-							) {
-								generateContext.runtimeRequirements.add(
-									RuntimeGlobals.cssMergeStyleSheets
-								);
-
-								const args = importCode.map((part) => part.expr);
-								return new ConcatSource(
-									`${RuntimeGlobals.cssMergeStyleSheets}([${args.join(", ")}, `,
-									jsLiteral,
-									"])"
-								);
-							}
-							return new ConcatSource(
-								`${generateContext.runtimeTemplate.concatenation(
-									...importCode
-								)} + `,
-								jsLiteral
-							);
-						}
-						return jsLiteral;
-					};
 					/**
+					 * Generates js default export.
 					 * @returns {Source | null} the default export
 					 */
 					const generateJSDefaultExport = () => {
 						switch (exportType) {
 							case "text": {
-								return generateCssText();
+								return this._generateCssText(module, generateContext, true);
 							}
 							case "css-style-sheet": {
-								const constOrVar =
-									generateContext.runtimeTemplate.renderConst();
-								const cssText = generateCssText();
-								const fnPrefix =
-									generateContext.runtimeTemplate.supportsArrowFunction()
-										? "() => {\n"
-										: "function() {\n";
-								const body =
-									`${constOrVar} sheet = new CSSStyleSheet();\n` +
-									"sheet.replaceSync(cssText);\n" +
-									"return sheet;\n";
+								const rt = generateContext.runtimeTemplate;
+								const fnPrefix = rt.supportsArrowFunction()
+									? "() => {\n"
+									: "function() {\n";
+								const constOrVar = rt.renderConst();
+								const fallback =
+									"{ cssText: css, replaceSync: function(value) { this.cssText = value; } }";
+								if (rt.compilation.compiler.platform.node === true) {
+									return new ConcatSource(
+										`(${fnPrefix}${constOrVar} css = `,
+										this._generateCssText(module, generateContext, true),
+										`;\nreturn ${fallback};\n})()`
+									);
+								}
+								if (rt.isUniversalTarget()) {
+									return new ConcatSource(
+										`(${fnPrefix}${constOrVar} css = `,
+										this._generateCssText(module, generateContext, true),
+										`;\nif (typeof CSSStyleSheet === 'undefined') return ${fallback};\n${constOrVar} sheet = new CSSStyleSheet();\nsheet.replaceSync(css);\nreturn sheet;\n})()`
+									);
+								}
 								return new ConcatSource(
-									`(${fnPrefix}${constOrVar} cssText = `,
-									cssText,
-									`;\n${body}})()`
+									`(${fnPrefix}${constOrVar} sheet = new CSSStyleSheet();\nsheet.replaceSync(`,
+									this._generateCssText(module, generateContext, true),
+									");\nreturn sheet;\n})()"
 								);
 							}
 							default:
@@ -408,12 +387,10 @@ class CssGenerator extends Generator {
 						}
 					};
 
-					const isCSSModule = /** @type {BuildMeta} */ (module.buildMeta)
-						.isCSSModule;
 					/** @type {Source | null} */
 					const defaultExport = generateJSDefaultExport();
 
-					/** @type {BuildInfo} */
+					/** @type {CssModuleBuildInfo} */
 					(module.buildInfo).cssData = cssData;
 
 					// Required for HMR
@@ -421,10 +398,24 @@ class CssGenerator extends Generator {
 						generateContext.runtimeRequirements.add(RuntimeGlobals.module);
 					}
 
-					if (!defaultExport && cssData.exports.size === 0 && !isCSSModule) {
+					if (!defaultExport && cssData.exports.size === 0 && !isCssModule) {
 						return new RawSource("");
 					}
 
+					const exportsInfo =
+						generateContext.moduleGraph.getExportsInfo(module);
+
+					/**
+					 * @param {string} name export name
+					 * @returns {string | false} used export name when the export is referenced
+					 */
+					const getUsedExportName = (name) =>
+						/** @type {string | false} */ (
+							exportsInfo
+								.getExportInfo(name)
+								.getUsedName(name, generateContext.runtime)
+						);
+
 					if (generateContext.concatenationScope) {
 						const source = new ConcatSource();
 						/** @type {Set<string>} */
@@ -432,9 +423,7 @@ class CssGenerator extends Generator {
 						const { RESERVED_IDENTIFIER } = getPropertyName();
 
 						if (defaultExport) {
-							const usedName = generateContext.moduleGraph
-								.getExportInfo(module, "default")
-								.getUsedName("default", generateContext.runtime);
+							const usedName = getUsedExportName("default");
 							if (usedName) {
 								let identifier = Template.toIdentifier(usedName);
 								if (RESERVED_IDENTIFIER.has(identifier)) {
@@ -454,14 +443,8 @@ class CssGenerator extends Generator {
 						}
 
 						for (const [name, v] of cssData.exports) {
-							const usedName = generateContext.moduleGraph
-								.getExportInfo(module, name)
-								.getUsedName(name, generateContext.runtime);
-							if (!usedName) {
-								continue;
-							}
-
-							let identifier = Template.toIdentifier(usedName);
+							const usedName = getUsedExportName(name);
+							let identifier = Template.toIdentifier(usedName || name);
 							if (RESERVED_IDENTIFIER.has(identifier)) {
 								identifier = `_${identifier}`;
 							}
@@ -476,7 +459,9 @@ class CssGenerator extends Generator {
 								identifier
 							);
 							source.add(
-								`${generateContext.runtimeTemplate.renderConst()} ${identifier} = ${JSON.stringify(v)};\n`
+								`${generateContext.runtimeTemplate.renderConst()} ${identifier} = ${JSON.stringify(
+									v
+								)};\n`
 							);
 						}
 						return source;
@@ -484,9 +469,7 @@ class CssGenerator extends Generator {
 
 					const needNsObj =
 						this._esModule &&
-						generateContext.moduleGraph
-							.getExportsInfo(module)
-							.otherExportsInfo.getUsed(generateContext.runtime) !==
+						exportsInfo.otherExportsInfo.getUsed(generateContext.runtime) !==
 							UsageState.Unused;
 
 					if (needNsObj) {
@@ -498,7 +481,25 @@ class CssGenerator extends Generator {
 					// Should be after `concatenationScope` to allow module inlining
 					generateContext.runtimeRequirements.add(RuntimeGlobals.module);
 
-					if (!isCSSModule && !needNsObj) {
+					const defaultUsedName = defaultExport
+						? getUsedExportName("default")
+						: false;
+
+					/** @type {string[]} */
+					const exportEntries = [];
+					for (const [name, v] of cssData.exports) {
+						const exportKey = getUsedExportName(name) || name;
+						exportEntries.push(
+							`\t${JSON.stringify(exportKey)}: ${JSON.stringify(v)}`
+						);
+					}
+
+					if (
+						!isCssModule &&
+						!needNsObj &&
+						exportEntries.length === 0 &&
+						defaultUsedName
+					) {
 						return new ConcatSource(
 							`${module.moduleArgument}.exports = `,
 							/** @type {Source} */ (defaultExport)
@@ -512,21 +513,14 @@ class CssGenerator extends Generator {
 						}.exports = {\n`
 					);
 
-					if (defaultExport) {
+					if (defaultUsedName) {
 						result.add('\t"default": ');
-						result.add(defaultExport);
-						if (cssData.exports.size > 0) {
+						result.add(/** @type {Source} */ (defaultExport));
+						if (exportEntries.length > 0) {
 							result.add(",\n");
 						}
 					}
 
-					/** @type {string[]} */
-					const exportEntries = [];
-					for (const [name, v] of cssData.exports) {
-						exportEntries.push(
-							`\t${JSON.stringify(name)}: ${JSON.stringify(v)}`
-						);
-					}
 					if (exportEntries.length > 0) {
 						result.add(exportEntries.join(",\n"));
 					}
@@ -546,26 +540,53 @@ class CssGenerator extends Generator {
 						source.add("\n");
 					}
 				}
-				return source;
-			}
-			case CSS_TYPE: {
 				if (
-					!(
-						this._exportsOnly ||
-						/** @type {boolean} */ (exportType && exportType !== "link")
-					)
+					exportType === "link" &&
+					!isCssModule &&
+					cssData.exports.size === 0
 				) {
+					return source;
+				}
+
+				const generatedJs = /** @type {string} */ (source.source());
+				const sourceName = module.readableIdentifier(
+					compilation.requestShortener
+				);
+
+				if (
+					/** @type {ExportLocsMap} */
+					(cssData.exportLocs).size > 0
+				) {
+					const cssOriginal = module.originalSource();
+					if (cssOriginal) {
+						const sourceMap = buildExportsSourceMap(
+							generatedJs,
+							/** @type {ExportLocsMap} */
+							(cssData.exportLocs),
+							/** @type {string} */ (cssOriginal.source()),
+							sourceName
+						);
+						return new SourceMapSource(generatedJs, sourceName, sourceMap);
+					}
+				}
+				return new OriginalSource(generatedJs, sourceName);
+			}
+			case CSS_TYPE: {
+				if (!(this._exportsOnly || exportType !== "link")) {
 					generateContext.runtimeRequirements.add(RuntimeGlobals.hasCssModules);
 				}
 
 				return InitFragment.addToSource(source, initFragments, generateContext);
 			}
+			case CSS_TEXT_TYPE:
+				return this._generateCssText(module, generateContext, false);
 			default:
 				return null;
 		}
 	}
 
 	/**
+	 * Generates fallback output for the provided error condition.
 	 * @param {Error} error the error
 	 * @param {NormalModule} module module for which the code should be generated
 	 * @param {GenerateContext} generateContext context for generate
@@ -587,6 +608,7 @@ class CssGenerator extends Generator {
 	}
 
 	/**
+	 * Returns the source types available for this module.
 	 * @param {NormalModule} module fresh module
 	 * @returns {SourceTypes} available types (do not mutate)
 	 */
@@ -596,10 +618,15 @@ class CssGenerator extends Generator {
 			return JAVASCRIPT_TYPES;
 		}
 
-		const sourceTypes = new Set();
+		let hasJs = false;
+		let hasCssText = false;
+		// Uncached per call (#20800) — the common link case stops scanning once
+		// js is seen; `hasCssText` only matters for exports-only / non-link.
+		const needsCssText = this._exportsOnly || exportType !== "link";
 		const connections = this._moduleGraph.getIncomingConnections(module);
 
 		for (const connection of connections) {
+			if (hasJs && (hasCssText || !needsCssText)) break;
 			if (
 				exportType === "link" &&
 				connection.dependency instanceof CssImportDependency
@@ -607,47 +634,56 @@ class CssGenerator extends Generator {
 				continue;
 			}
 
-			// when no hmr required, css module js output contains no sideEffects at all
-			// js sideeffect connection doesn't require js type output
 			if (connection.dependency instanceof HarmonyImportSideEffectDependency) {
 				continue;
 			}
 
+			// HTML inline styles consume CSS_TEXT_TYPE directly.
+			if (
+				connection.dependency &&
+				(connection.dependency.category === "html-style" ||
+					connection.dependency.category === "html-style-attribute")
+			) {
+				hasCssText = true;
+				continue;
+			}
+
 			if (!connection.originModule) {
 				continue;
 			}
 
-			if (connection.originModule.type.split("/")[0] !== CSS_TYPE) {
-				sourceTypes.add(JAVASCRIPT_TYPE);
+			if (!connection.originModule.type.startsWith(CSS_TYPE_PREFIX)) {
+				hasJs = true;
 			} else {
 				const originModule = /** @type {CssModule} */ connection.originModule;
-				const originExportType = /** @type {CssModule} */ (originModule)
-					.exportType;
-				if (
-					/** @type {boolean} */ (
-						originExportType && originExportType !== "link"
-					)
-				) {
-					sourceTypes.add(JAVASCRIPT_TYPE);
+				const originExportType =
+					/** @type {CssModule} */ (originModule).exportType || "link";
+				if (originExportType !== "link") {
+					hasJs = true;
 				}
 			}
 		}
-		if (
-			this._exportsOnly ||
-			/** @type {boolean} */ (exportType && exportType !== "link")
-		) {
-			if (sourceTypes.has(JAVASCRIPT_TYPE)) {
-				return JAVASCRIPT_TYPES;
-			}
-			return new Set();
+		if (this._exportsOnly || exportType !== "link") {
+			if (hasJs && hasCssText) return JAVASCRIPT_AND_CSS_TEXT_TYPES;
+			if (hasJs) return JAVASCRIPT_TYPES;
+			if (hasCssText) return CSS_TEXT_TYPES;
+			return NO_TYPES;
 		}
-		if (sourceTypes.has(JAVASCRIPT_TYPE)) {
+		if (hasJs) {
 			return JAVASCRIPT_AND_CSS_TYPES;
 		}
 		return CSS_TYPES;
 	}
 
 	/**
+	 * @returns {boolean} whether getTypes() depends on the module's incoming connections
+	 */
+	getTypesDependOnIncomingConnections() {
+		return true;
+	}
+
+	/**
+	 * Returns the estimated size for the requested source type.
 	 * @param {NormalModule} module the module
 	 * @param {SourceType=} type source type
 	 * @returns {number} estimate size of the module
@@ -655,26 +691,30 @@ class CssGenerator extends Generator {
 	getSize(module, type) {
 		switch (type) {
 			case JAVASCRIPT_TYPE: {
-				const cssData = /** @type {BuildInfo} */ (module.buildInfo).cssData;
+				const cssData = /** @type {CssModuleBuildInfo} */ (module.buildInfo)
+					.cssData;
 				if (!cssData) {
 					return 42;
 				}
 				if (cssData.exports.size === 0) {
-					if (/** @type {BuildMeta} */ (module.buildMeta).isCSSModule) {
+					if (
+						/** @type {CssModuleBuildMeta} */ (module.buildMeta).isCssModule
+					) {
 						return 42;
 					}
 					return 0;
 				}
-				const exports = cssData.exports;
-				/** @type {Record<string, string>} */
-				const exportsObj = {};
-				for (const [key, value] of exports) {
-					exportsObj[key] = value;
+				// `JSON.stringify({...exports}).length` computed entry-wise, without
+				// materializing the object or the full string.
+				let length = 2 + (cssData.exports.size - 1);
+				for (const [key, value] of cssData.exports) {
+					length +=
+						JSON.stringify(key).length + 1 + JSON.stringify(value).length;
 				}
-				const stringifiedExports = JSON.stringify(exportsObj);
 
-				return stringifiedExports.length + 42;
+				return length + 42;
 			}
+			case CSS_TEXT_TYPE:
 			case CSS_TYPE: {
 				const originalSource = module.originalSource();
 
@@ -690,11 +730,233 @@ class CssGenerator extends Generator {
 	}
 
 	/**
+	 * Updates the hash with the data contributed by this instance.
 	 * @param {Hash} hash hash that will be modified
 	 * @param {UpdateHashContext} updateHashContext context for updating hash
 	 */
 	updateHash(hash, { module }) {
 		hash.update(/** @type {boolean} */ (this._esModule).toString());
+		hash.update(/** @type {boolean} */ (this._exportsOnly).toString());
+	}
+
+	/**
+	 * Resolve the effective `@charset` by walking text imports.
+	 * @param {NormalModule} module the module
+	 * @param {ModuleGraph} moduleGraph module graph
+	 * @param {WeakSet<NormalModule>=} visited cycle guard
+	 * @returns {string | undefined} the effective charset
+	 */
+	_getEffectiveCharset(module, moduleGraph, visited = new WeakSet()) {
+		if (!module || visited.has(module)) return undefined;
+		const exportType = /** @type {CssModule} */ (module).exportType;
+		if (exportType !== "text" && exportType !== "css-style-sheet") {
+			return undefined;
+		}
+		visited.add(module);
+		const own =
+			module.buildInfo &&
+			/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset;
+		if (own !== undefined) return own;
+		if (exportType !== "text") return undefined;
+		for (const dep of module.dependencies) {
+			if (dep instanceof CssImportDependency) {
+				const depModule = /** @type {NormalModule} */ (
+					moduleGraph.getModule(dep)
+				);
+				const inherited = this._getEffectiveCharset(
+					depModule,
+					moduleGraph,
+					visited
+				);
+				if (inherited !== undefined) return inherited;
+			}
+		}
+		return undefined;
+	}
+
+	/**
+	 * Generate JS expressions for `@import` side effects (`style` exportType only).
+	 * @param {NormalModule} module the module to generate CSS text for
+	 * @param {GenerateContext} generateContext the generate context
+	 * @returns {string[]} JS expressions, one per `@import` dependency
+	 */
+	_generateImportExpressions(module, generateContext) {
+		const { moduleGraph, concatenationScope } = generateContext;
+		const parts = [];
+
+		for (const dep of module.dependencies) {
+			if (!(dep instanceof CssImportDependency)) continue;
+			const depModule = /** @type {CssModule} */ (moduleGraph.getModule(dep));
+			if (concatenationScope && concatenationScope.isModuleInScope(depModule)) {
+				continue;
+			}
+			parts.push(
+				generateContext.runtimeTemplate.moduleExports({
+					module: depModule,
+					chunkGraph: generateContext.chunkGraph,
+					request: depModule.userRequest,
+					weak: false,
+					runtimeRequirements: generateContext.runtimeRequirements
+				})
+			);
+		}
+
+		return parts;
+	}
+
+	/**
+	 * Recursively merge `@import`'d CSS into a single Source (text/css-style-sheet only).
+	 * @param {NormalModule} module the module to render
+	 * @param {GenerateContext} generateContext the generate context
+	 * @param {Set<NormalModule>} ancestors modules on the current path (cycle guard)
+	 * @returns {Source | null} merged CSS source, or null when the module has no content
+	 */
+	_renderMergedCss(module, generateContext, ancestors) {
+		if (ancestors.has(module)) return null;
+		ancestors.add(module);
+		try {
+			const { moduleGraph } = generateContext;
+			/** @type {Source[]} */
+			const parts = [];
+
+			for (const dep of module.dependencies) {
+				if (!(dep instanceof CssImportDependency)) continue;
+				const depModule = /** @type {CssModule} */ (moduleGraph.getModule(dep));
+				if (!depModule) continue;
+				const depExportType = depModule.exportType;
+				if (depExportType !== "text" && depExportType !== "css-style-sheet") {
+					continue;
+				}
+				const depMerged = this._renderMergedCss(
+					depModule,
+					generateContext,
+					ancestors
+				);
+				if (depMerged) parts.push(depMerged);
+			}
+
+			const own = this._renderCss(module, generateContext);
+			if (own) parts.push(own);
+
+			if (parts.length === 0) return null;
+			if (parts.length === 1) return parts[0];
+			return new ConcatSource(...parts);
+		} finally {
+			ancestors.delete(module);
+		}
+	}
+
+	/**
+	 * Generate CSS source for the current module
+	 * @param {NormalModule} module the module to generate CSS source for
+	 * @param {GenerateContext} generateContext the generate context
+	 * @returns {Source | null} the CSS source
+	 */
+	_renderCss(module, generateContext) {
+		const moduleSourceContent = /** @type {Source} */ (
+			this.generate(module, {
+				...generateContext,
+				type: CSS_TYPE
+			})
+		);
+
+		if (!moduleSourceContent) {
+			return null;
+		}
+
+		const compilation = generateContext.runtimeTemplate.compilation;
+		const undoPath = "";
+
+		const CssModulesPlugin = getCssModulesPlugin();
+		const hooks = CssModulesPlugin.getCompilationHooks(compilation);
+		return CssModulesPlugin.renderModule(
+			/** @type {CssModule} */ (module),
+			{
+				undoPath,
+				moduleSourceContent,
+				moduleFactoryCache: this._moduleFactoryCache,
+				runtimeTemplate: generateContext.runtimeTemplate
+			},
+			hooks
+		);
+	}
+
+	/**
+	 * Convert a CSS Source into a JS string literal, splicing `__webpack_require__.h()` for `[fullhash]` placeholders.
+	 * @param {Source} cssSource the CSS source
+	 * @param {import("../../declarations/WebpackOptions").DevTool | undefined} devtool the devtool option
+	 * @param {GenerateContext} generateContext the generate context
+	 * @returns {Source} a Source representing a JS string literal
+	 */
+	_cssToJsLiteral(cssSource, devtool, generateContext) {
+		const { source, map } = cssSource.sourceAndMap();
+		let content = /** @type {string} */ (source);
+		if (map) {
+			const inlineMap =
+				typeof devtool === "string" && devtool.includes("nosources")
+					? { ...map, sourcesContent: undefined }
+					: map;
+			const base64Map = Buffer.from(JSON.stringify(inlineMap), "utf8").toString(
+				"base64"
+			);
+			const trailingNewline = content.endsWith("\n") ? "" : "\n";
+			content += `${trailingNewline}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${base64Map}*/`;
+		}
+
+		if (!content.includes(PUBLIC_PATH_FULL_HASH)) {
+			return new RawSource(JSON.stringify(content));
+		}
+
+		const result = new ConcatSource();
+		let last = 0;
+		walkFullHashPlaceholders(content, (start, end, length) => {
+			result.add(JSON.stringify(content.slice(last, start)));
+			result.add(
+				length === 0
+					? ` + ${RuntimeGlobals.getFullHash}() + `
+					: ` + ${RuntimeGlobals.getFullHash}().slice(0, ${length}) + `
+			);
+			last = end;
+		});
+
+		result.add(JSON.stringify(content.slice(last)));
+		generateContext.runtimeRequirements.add(RuntimeGlobals.getFullHash);
+		return result;
+	}
+
+	/**
+	 * Generate the merged CSS text for a module, optionally wrapped as a
+	 * JS string literal for embedding in JavaScript output.
+	 * @param {NormalModule} module the module
+	 * @param {GenerateContext} generateContext the generate context
+	 * @param {boolean} asJsLiteral wrap the result as a JS string literal
+	 * @returns {Source} the CSS text source
+	 */
+	_generateCssText(module, generateContext, asJsLiteral) {
+		const cssSource = this._renderMergedCss(module, generateContext, new Set());
+		const effectiveCharset = this._getEffectiveCharset(
+			module,
+			generateContext.moduleGraph
+		);
+
+		let result;
+		if (effectiveCharset !== undefined) {
+			const prefix = `@charset "${effectiveCharset}";\n`;
+			result = cssSource
+				? new ConcatSource(prefix, cssSource)
+				: new RawSource(prefix);
+		} else {
+			result = cssSource;
+		}
+
+		if (asJsLiteral) {
+			const devtool =
+				generateContext.runtimeTemplate.compilation.options.devtool;
+			return result
+				? this._cssToJsLiteral(result, devtool, generateContext)
+				: new RawSource('""');
+		}
+		return result || new RawSource("");
 	}
 }