webpack 5.106.2 → 5.107.0

package/lib/css/CssGenerator.js

@@ -7,6 +7,7 @@
 
 const {
 	ConcatSource,
+	OriginalSource,
 	RawSource,
 	ReplaceSource,
 	SourceMapSource
@@ -15,8 +16,11 @@ 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
@@ -26,6 +30,7 @@ const Template = require("../Template");
 const CssImportDependency = require("../dependencies/CssImportDependency");
 const HarmonyImportSideEffectDependency = require("../dependencies/HarmonyImportSideEffectDependency");
 
+const { encodeMappings } = require("../util/createMappings");
 const memoize = require("../util/memoize");
 
 /** @typedef {import("webpack-sources").Source} Source */
@@ -46,14 +51,74 @@ 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("../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 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.
+ * @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");
+
+	const lineByExport = 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;
+			}
+		}
+	}
+
+	/** @type {(import("../util/createMappings").LineMappings)[]} */
+	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.
+		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.
@@ -85,47 +150,134 @@ class CssGenerator extends Generator {
 	}
 
 	/**
-	 * Generate JavaScript code that requires and concatenates all CSS imports
+	 * 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
-	 * @param {boolean} getDefaultExport whether to get the default export
-	 * @returns {{ expr: string, type: CssParserExportType }[]} JavaScript code that concatenates all imported CSS
+	 * @returns {string[]} JS expressions, one per `@import` dependency
 	 */
-	_generateImportCode(module, generateContext, getDefaultExport = true) {
-		const moduleGraph = generateContext.moduleGraph;
-		/** @type {{ expr: string, type: CssParserExportType }[]} */
+	_generateImportSideEffects(module, generateContext) {
+		const { moduleGraph, concatenationScope } = generateContext;
 		const parts = [];
 
-		// Iterate through module.dependencies to maintain source order
 		for (const dep of module.dependencies) {
-			if (dep instanceof CssImportDependency) {
-				const depModule = /** @type {CssModule} */ (moduleGraph.getModule(dep));
-				const importVar = generateContext.runtimeTemplate.moduleExports({
+			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
-				});
+				})
+			);
+		}
 
-				if (getDefaultExport) {
-					generateContext.runtimeRequirements.add(
-						RuntimeGlobals.compatGetDefaultExport
-					);
-					parts.push({
-						expr: `(${RuntimeGlobals.compatGetDefaultExport}(${importVar})() || "")`,
-						type: /** @type {CssParserExportType} */ (depModule.exportType)
-					});
-				} else {
-					parts.push({
-						expr: importVar,
-						type: /** @type {CssParserExportType} */ (depModule.exportType)
-					});
+		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);
 			}
-		}
 
-		return parts;
+			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);
+		}
 	}
 
 	/**
@@ -168,20 +320,28 @@ class CssGenerator extends Generator {
 	}
 
 	/**
-	 * 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.
+	 * 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 {NormalModule} module the module
+	 * @param {import("../../declarations/WebpackOptions").DevTool | undefined} devtool the devtool option
 	 * @returns {Source} a Source representing a JS string literal
 	 */
-	_cssSourceToJsStringLiteral(cssSource, module) {
+	_cssToJsLiteral(cssSource, devtool) {
 		const { source, map } = cssSource.sourceAndMap();
-		const content = /** @type {string} */ (source);
-		const escaped = JSON.stringify(content);
+		let content = /** @type {string} */ (source);
 		if (map) {
-			return new SourceMapSource(escaped, module.identifier(), map, content);
+			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(escaped);
+		return new RawSource(JSON.stringify(content));
 	}
 
 	/**
@@ -291,7 +451,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,6 +462,11 @@ class CssGenerator extends Generator {
 
 		switch (generateContext.type) {
 			case JAVASCRIPT_TYPE: {
+				const compilation = generateContext.runtimeTemplate.compilation;
+				const devtool = compilation.options.devtool;
+				const isCssModule = /** @type {BuildMeta} */ (module.buildMeta)
+					.isCssModule;
+
 				const generateContentCode = () => {
 					switch (exportType) {
 						case "style": {
@@ -309,15 +475,24 @@ class CssGenerator extends Generator {
 								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),
+									"]);"
+								);
+							}
+
 							return new ConcatSource(
-								`${RuntimeGlobals.cssInjectStyle}(${JSON.stringify(moduleId || "")}, `,
-								this._cssSourceToJsStringLiteral(cssSource, module),
+								`${RuntimeGlobals.cssInjectStyle}(${JSON.stringify(moduleId)}, `,
+								this._cssToJsLiteral(cssSource, devtool),
 								");"
 							);
 						}
@@ -329,8 +504,8 @@ class CssGenerator extends Generator {
 				const generateImportCode = () => {
 					switch (exportType) {
 						case "style": {
-							return this._generateImportCode(module, generateContext, false)
-								.map((part) => `${part.expr};`)
+							return this._generateImportSideEffects(module, generateContext)
+								.map((expr) => `${expr};`)
 								.join("\n");
 						}
 						default:
@@ -340,52 +515,23 @@ 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(
+						const cssSource = this._generateMergedContentSource(
 							module,
-							generateContext
+							generateContext,
+							new Set()
 						);
 
 						let jsLiteral = cssSource
-							? this._cssSourceToJsStringLiteral(cssSource, module)
+							? this._cssToJsLiteral(cssSource, devtool)
 							: 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);
-
-								jsLiteral = new ConcatSource(
-									`${RuntimeGlobals.cssMergeStyleSheets}([${args.join(", ")}, `,
-									jsLiteral,
-									"])"
-								);
-							} else {
-								jsLiteral = new ConcatSource(
-									`${generateContext.runtimeTemplate.concatenation(
-										...importCode
-									)} + `,
-									jsLiteral
-								);
-							}
-						}
-
-						if (
-							exportType === "css-style-sheet" &&
-							typeof (/** @type {BuildInfo} */ (module.buildInfo).charset) !==
-								"undefined"
-						) {
+						const effectiveCharset =
+							exportType === "css-style-sheet" || exportType === "text"
+								? this._getEffectiveCharset(module, generateContext.moduleGraph)
+								: undefined;
+						if (effectiveCharset !== undefined) {
 							jsLiteral = new ConcatSource(
-								`'@charset "${/** @type {BuildInfo} */ (module.buildInfo).charset}";\\n' + `,
+								`'@charset "${effectiveCharset}";\\n' + `,
 								jsLiteral
 							);
 						}
@@ -402,21 +548,19 @@ class CssGenerator extends Generator {
 								return generateCssText();
 							}
 							case "css-style-sheet": {
-								const constOrVar =
-									generateContext.runtimeTemplate.renderConst();
-								const cssText = generateCssText();
+								// 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 body =
-									`${constOrVar} sheet = new CSSStyleSheet();\n` +
-									"sheet.replaceSync(cssText);\n" +
-									"return sheet;\n";
+								const constOrVar =
+									generateContext.runtimeTemplate.renderConst();
 								return new ConcatSource(
-									`(${fnPrefix}${constOrVar} cssText = `,
-									cssText,
-									`;\n${body}})()`
+									`(${fnPrefix}${constOrVar} sheet = new CSSStyleSheet();\nsheet.replaceSync(`,
+									generateCssText(),
+									");\nreturn sheet;\n})()"
 								);
 							}
 							default:
@@ -424,8 +568,6 @@ class CssGenerator extends Generator {
 						}
 					};
 
-					const isCSSModule = /** @type {BuildMeta} */ (module.buildMeta)
-						.isCSSModule;
 					/** @type {Source | null} */
 					const defaultExport = generateJSDefaultExport();
 
@@ -437,7 +579,7 @@ 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("");
 					}
 
@@ -514,7 +656,7 @@ class CssGenerator extends Generator {
 					// Should be after `concatenationScope` to allow module inlining
 					generateContext.runtimeRequirements.add(RuntimeGlobals.module);
 
-					if (!isCSSModule && !needNsObj) {
+					if (!isCssModule && !needNsObj) {
 						return new ConcatSource(
 							`${module.moduleArgument}.exports = `,
 							/** @type {Source} */ (defaultExport)
@@ -562,20 +704,78 @@ class CssGenerator extends Generator {
 						source.add("\n");
 					}
 				}
-				return source;
-			}
-			case CSS_TYPE: {
+				// For link-type modules without any JS emit, skip source wrapping
 				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
+				);
+
+				// 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
 				) {
+					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 && 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;
+			}
 			default:
 				return null;
 		}
@@ -631,6 +831,19 @@ class CssGenerator extends Generator {
 				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.
+			if (
+				connection.dependency &&
+				connection.dependency.category === "html-style"
+			) {
+				sourceTypes.add(CSS_TEXT_TYPE);
+				continue;
+			}
+
 			if (!connection.originModule) {
 				continue;
 			}
@@ -654,9 +867,11 @@ class CssGenerator extends Generator {
 			this._exportsOnly ||
 			/** @type {boolean} */ (exportType && exportType !== "link")
 		) {
-			if (sourceTypes.has(JAVASCRIPT_TYPE)) {
-				return JAVASCRIPT_TYPES;
-			}
+			const hasJs = sourceTypes.has(JAVASCRIPT_TYPE);
+			const hasCssText = sourceTypes.has(CSS_TEXT_TYPE);
+			if (hasJs && hasCssText) return JAVASCRIPT_AND_CSS_TEXT_TYPES;
+			if (hasJs) return JAVASCRIPT_TYPES;
+			if (hasCssText) return CSS_TEXT_TYPES;
 			return new Set();
 		}
 		if (sourceTypes.has(JAVASCRIPT_TYPE)) {
@@ -679,7 +894,7 @@ class CssGenerator extends Generator {
 					return 42;
 				}
 				if (cssData.exports.size === 0) {
-					if (/** @type {BuildMeta} */ (module.buildMeta).isCSSModule) {
+					if (/** @type {BuildMeta} */ (module.buildMeta).isCssModule) {
 						return 42;
 					}
 					return 0;