webpack 5.107.1 → 5.108.0

package/lib/css/CssGenerator.js

@@ -23,15 +23,24 @@ const {
 	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 */
@@ -52,6 +61,8 @@ const memoize = require("../util/memoize");
 /** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("./CssModulesPlugin").ModuleFactoryCacheEntry} ModuleFactoryCacheEntry */
 /** @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 */
@@ -65,10 +76,7 @@ const getCssModulesPlugin = memoize(() => require("./CssModulesPlugin"));
 /** @typedef {import("webpack-sources").RawSourceMap} RawSourceMap */
 
 /**
- * Build a v3 source map that maps each line in `generatedJs` containing a
- * known CSS-class export entry back to the corresponding selector position
- * in the original CSS. Lines without an associated export are left
- * unmapped — devtools simply shows them as part of the bundled JS.
+ * 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
@@ -83,14 +91,29 @@ const buildExportsSourceMap = (
 ) => {
 	const lines = generatedJs.split("\n");
 
-	const lineByExport = new Map();
+	// O(L) pass: match `\t"<name>": <value>` lines against export names.
+	const keyToName = new Map();
 	for (const [exportName] of exportLocs) {
-		const needle = `${JSON.stringify(exportName)}:`;
-		for (let i = 0; i < lines.length; i++) {
-			if (lines[i].includes(needle)) {
-				lineByExport.set(exportName, i);
-				break;
+		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);
 		}
 	}
 
@@ -98,9 +121,7 @@ const buildExportsSourceMap = (
 	const perLine = lines.map(() => null);
 	for (const [exportName, genLine] of lineByExport) {
 		const pos = /** @type {SourcePosition} */ (exportLocs.get(exportName));
-		// Source-map V3 uses 0-based lines and 0-based columns. webpack's
-		// dependency `loc` uses 1-based lines and 0-based columns, so subtract
-		// one from the line.
+		// V3 source maps are 0-based; webpack `loc` lines are 1-based.
 		perLine[genLine] = {
 			generatedColumn: 0,
 			sourceIndex: 0,
@@ -127,12 +148,31 @@ class CssGenerator extends Generator {
 	 */
 	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"));
 	}
 
 	/**
@@ -149,201 +189,6 @@ class CssGenerator extends Generator {
 		return undefined;
 	}
 
-	/**
-	 * Returns the `@charset` that will appear at the start of this module's
-	 * default export, walking through text imports when the module has no
-	 * local `@charset` of its own.
-	 * @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 {BuildInfo} */ (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 JavaScript expressions that evaluate each `@import`'d module
-	 * for side effects. Only used by `style` exportType, where each imported
-	 * style module injects its own `<style>` element independently — no
-	 * content merging happens at the parent. `text` and `css-style-sheet`
-	 * instead inline their imports at build time via
-	 * {@link CssGenerator#_generateMergedContentSource}.
-	 * @param {NormalModule} module the module to generate CSS text for
-	 * @param {GenerateContext} generateContext the generate context
-	 * @returns {string[]} JS expressions, one per `@import` dependency
-	 */
-	_generateImportSideEffects(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));
-			// Concat-scoped deps are inlined into the same module; their side
-			// effect (own `<style>` injection) is emitted at the dep's own
-			// site, so no explicit reference is needed here.
-			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;
-	}
-
-	/**
-	 * Build a single CSS `Source` that contains, in source order, the rendered
-	 * CSS text of every transitively `@import`'d module followed by the
-	 * current module's own CSS text. Imports are inlined at build time so
-	 * the resulting `Source` carries a single, accurate source map covering
-	 * every contributing file — no runtime merge helper required.
-	 *
-	 * Only `text` / `css-style-sheet` imports contribute CSS text; `link` and
-	 * `style` imports are emitted separately (own `.css` file or own
-	 * `<style>` injection) and are skipped here.
-	 *
-	 * `ancestors` tracks the path from the top-level caller down to the
-	 * current module — not every module ever visited. A module reappearing
-	 * along a sibling branch (a "diamond import" like two different files
-	 * each `@import`'ing the same shared module) must be inlined every time,
-	 * matching the prior runtime behavior where each `default` getter was
-	 * invoked at every import site.
-	 * @param {NormalModule} module the module to render
-	 * @param {GenerateContext} generateContext the generate context
-	 * @param {Set<NormalModule>} ancestors modules on the current path
-	 * @returns {Source | null} merged CSS source, or null when the module has no content
-	 */
-	_generateMergedContentSource(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._generateMergedContentSource(
-					depModule,
-					generateContext,
-					ancestors
-				);
-				if (depMerged) parts.push(depMerged);
-			}
-
-			const own = this._generateContentSource(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
-	 */
-	_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
-		);
-	}
-
-	/**
-	 * Serialize a CSS Source into a JS string literal with an optional
-	 * inline `sourceMappingURL` data URI so DevTools can resolve the
-	 * original sources at runtime.
-	 * @param {Source} cssSource the CSS source
-	 * @param {import("../../declarations/WebpackOptions").DevTool | undefined} devtool the devtool option
-	 * @returns {Source} a Source representing a JS string literal
-	 */
-	_cssToJsLiteral(cssSource, devtool) {
-		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}*/`;
-		}
-		return new RawSource(JSON.stringify(content));
-	}
-
 	/**
 	 * Processes the provided module.
 	 * @param {NormalModule} module the current module
@@ -464,16 +309,13 @@ class CssGenerator extends Generator {
 			case JAVASCRIPT_TYPE: {
 				const compilation = generateContext.runtimeTemplate.compilation;
 				const devtool = compilation.options.devtool;
-				const isCssModule = /** @type {BuildMeta} */ (module.buildMeta)
+				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 "";
 
 							generateContext.runtimeRequirements.add(
@@ -485,14 +327,16 @@ class CssGenerator extends Generator {
 							if (generateContext.concatenationScope) {
 								return new ConcatSource(
 									`__webpack_css_styles__.push([${JSON.stringify(moduleId)}, `,
-									this._cssToJsLiteral(cssSource, devtool),
+									this._cssToJsLiteral(cssSource, devtool, generateContext),
 									"]);"
 								);
 							}
 
 							return new ConcatSource(
-								`${RuntimeGlobals.cssInjectStyle}(${JSON.stringify(moduleId)}, `,
-								this._cssToJsLiteral(cssSource, devtool),
+								`${RuntimeGlobals.cssInjectStyle}(${JSON.stringify(
+									moduleId
+								)}, `,
+								this._cssToJsLiteral(cssSource, devtool, generateContext),
 								");"
 							);
 						}
@@ -504,7 +348,7 @@ class CssGenerator extends Generator {
 				const generateImportCode = () => {
 					switch (exportType) {
 						case "style": {
-							return this._generateImportSideEffects(module, generateContext)
+							return this._generateImportExpressions(module, generateContext)
 								.map((expr) => `${expr};`)
 								.join("\n");
 						}
@@ -513,31 +357,6 @@ class CssGenerator extends Generator {
 					}
 				};
 				const generateExportCode = () => {
-					/** @returns {Source} generated CSS text as JS expression */
-					const generateCssText = () => {
-						const cssSource = this._generateMergedContentSource(
-							module,
-							generateContext,
-							new Set()
-						);
-
-						let jsLiteral = cssSource
-							? this._cssToJsLiteral(cssSource, devtool)
-							: new RawSource('""');
-
-						const effectiveCharset =
-							exportType === "css-style-sheet" || exportType === "text"
-								? this._getEffectiveCharset(module, generateContext.moduleGraph)
-								: undefined;
-						if (effectiveCharset !== undefined) {
-							jsLiteral = new ConcatSource(
-								`'@charset "${effectiveCharset}";\\n' + `,
-								jsLiteral
-							);
-						}
-
-						return jsLiteral;
-					};
 					/**
 					 * Generates js default export.
 					 * @returns {Source | null} the default export
@@ -545,21 +364,33 @@ class CssGenerator extends Generator {
 					const generateJSDefaultExport = () => {
 						switch (exportType) {
 							case "text": {
-								return generateCssText();
+								return this._generateCssText(module, generateContext, true);
 							}
 							case "css-style-sheet": {
-								// Build a constructable stylesheet from the statically
-								// merged CSS text. The merged literal carries a single
-								// inline source map covering every contributing module.
-								const fnPrefix =
-									generateContext.runtimeTemplate.supportsArrowFunction()
-										? "() => {\n"
-										: "function() {\n";
-								const constOrVar =
-									generateContext.runtimeTemplate.renderConst();
+								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} sheet = new CSSStyleSheet();\nsheet.replaceSync(`,
-									generateCssText(),
+									this._generateCssText(module, generateContext, true),
 									");\nreturn sheet;\n})()"
 								);
 							}
@@ -571,7 +402,7 @@ class CssGenerator extends Generator {
 					/** @type {Source | null} */
 					const defaultExport = generateJSDefaultExport();
 
-					/** @type {BuildInfo} */
+					/** @type {CssModuleBuildInfo} */
 					(module.buildInfo).cssData = cssData;
 
 					// Required for HMR
@@ -588,11 +419,15 @@ class CssGenerator extends Generator {
 						/** @type {Set<string>} */
 						const usedIdentifiers = new Set();
 						const { RESERVED_IDENTIFIER } = getPropertyName();
+						const exportsInfo =
+							generateContext.moduleGraph.getExportsInfo(module);
 
 						if (defaultExport) {
-							const usedName = generateContext.moduleGraph
-								.getExportInfo(module, "default")
-								.getUsedName("default", generateContext.runtime);
+							const usedName = /** @type {string | false} */ (
+								exportsInfo
+									.getExportInfo("default")
+									.getUsedName("default", generateContext.runtime)
+							);
 							if (usedName) {
 								let identifier = Template.toIdentifier(usedName);
 								if (RESERVED_IDENTIFIER.has(identifier)) {
@@ -612,9 +447,11 @@ class CssGenerator extends Generator {
 						}
 
 						for (const [name, v] of cssData.exports) {
-							const usedName = generateContext.moduleGraph
-								.getExportInfo(module, name)
-								.getUsedName(name, generateContext.runtime);
+							const usedName = /** @type {string | false} */ (
+								exportsInfo
+									.getExportInfo(name)
+									.getUsedName(name, generateContext.runtime)
+							);
 							if (!usedName) {
 								continue;
 							}
@@ -634,7 +471,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;
@@ -704,7 +543,6 @@ class CssGenerator extends Generator {
 						source.add("\n");
 					}
 				}
-				// For link-type modules without any JS emit, skip source wrapping
 				if (
 					exportType === "link" &&
 					!isCssModule &&
@@ -718,9 +556,6 @@ class CssGenerator extends Generator {
 					compilation.requestShortener
 				);
 
-				// When per-export source positions are available, emit a
-				// SourceMapSource mapping each export line back to its CSS
-				// selector; otherwise fall back to OriginalSource.
 				if (
 					/** @type {ExportLocsMap} */
 					(cssData.exportLocs).size > 0
@@ -740,42 +575,14 @@ class CssGenerator extends Generator {
 				return new OriginalSource(generatedJs, sourceName);
 			}
 			case CSS_TYPE: {
-				if (!(this._exportsOnly || (exportType && exportType !== "link"))) {
+				if (!(this._exportsOnly || exportType !== "link")) {
 					generateContext.runtimeRequirements.add(RuntimeGlobals.hasCssModules);
 				}
 
 				return InitFragment.addToSource(source, initFragments, generateContext);
 			}
-			case CSS_TEXT_TYPE: {
-				// The merged CSS text — what consumers like
-				// `HtmlInlineStyleDependency.Template` need when they want to
-				// drop the processed CSS straight into an inline `<style>`
-				// tag. Mirrors the JS-side `generateCssText()` (charset
-				// prefix included), without the JS string-literal wrapper.
-				const cssSource = this._generateMergedContentSource(
-					module,
-					generateContext,
-					new Set()
-				);
-
-				const effectiveCharset = this._getEffectiveCharset(
-					module,
-					generateContext.moduleGraph
-				);
-				const charsetPrefix =
-					effectiveCharset !== undefined
-						? `@charset "${effectiveCharset}";\n`
-						: "";
-
-				if (!cssSource) {
-					return charsetPrefix
-						? new RawSource(charsetPrefix)
-						: new RawSource("");
-				}
-				return charsetPrefix
-					? new ConcatSource(charsetPrefix, cssSource)
-					: cssSource;
-			}
+			case CSS_TEXT_TYPE:
+				return this._generateCssText(module, generateContext, false);
 			default:
 				return null;
 		}
@@ -814,10 +621,12 @@ class CssGenerator extends Generator {
 			return JAVASCRIPT_TYPES;
 		}
 
-		const sourceTypes = new Set();
+		let hasJs = false;
+		let hasCssText = false;
 		const connections = this._moduleGraph.getIncomingConnections(module);
 
 		for (const connection of connections) {
+			if (hasJs && hasCssText) break;
 			if (
 				exportType === "link" &&
 				connection.dependency instanceof CssImportDependency
@@ -825,22 +634,17 @@ 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;
 			}
 
-			// Inline `<style>` blocks in HTML modules read the merged CSS
-			// text directly via the `css-text` source type — they don't go
-			// through the JS-string wrapper that other consumers use.
-			// Matched by dependency category so the CSS package doesn't
-			// have to import HtmlInlineStyleDependency.
+			// HTML inline styles consume CSS_TEXT_TYPE directly.
 			if (
 				connection.dependency &&
-				connection.dependency.category === "html-style"
+				(connection.dependency.category === "html-style" ||
+					connection.dependency.category === "html-style-attribute")
 			) {
-				sourceTypes.add(CSS_TEXT_TYPE);
+				hasCssText = true;
 				continue;
 			}
 
@@ -848,38 +652,36 @@ class CssGenerator extends Generator {
 				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")
-		) {
-			const hasJs = sourceTypes.has(JAVASCRIPT_TYPE);
-			const hasCssText = sourceTypes.has(CSS_TEXT_TYPE);
+		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 new Set();
+			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
@@ -889,12 +691,15 @@ 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;
@@ -909,6 +714,7 @@ class CssGenerator extends Generator {
 
 				return stringifiedExports.length + 42;
 			}
+			case CSS_TEXT_TYPE:
 			case CSS_TYPE: {
 				const originalSource = module.originalSource();
 
@@ -932,6 +738,226 @@ class CssGenerator extends Generator {
 		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("");
+	}
 }
 
 module.exports = CssGenerator;