webpack 5.105.4 → 5.106.1

package/lib/css/CssGenerator.js

@@ -5,7 +5,12 @@
 
 "use strict";
 
-const { ConcatSource, RawSource, ReplaceSource } = require("webpack-sources");
+const {
+	ConcatSource,
+	RawSource,
+	ReplaceSource,
+	SourceMapSource
+} = require("webpack-sources");
 const { UsageState } = require("../ExportsInfo");
 const Generator = require("../Generator");
 const InitFragment = require("../InitFragment");
@@ -20,7 +25,7 @@ const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
 const CssImportDependency = require("../dependencies/CssImportDependency");
 const HarmonyImportSideEffectDependency = require("../dependencies/HarmonyImportSideEffectDependency");
-const { getUndoPath } = require("../util/identifier");
+
 const memoize = require("../util/memoize");
 
 /** @typedef {import("webpack-sources").Source} Source */
@@ -46,7 +51,7 @@ const memoize = require("../util/memoize");
 /** @typedef {import("../Module").RuntimeRequirements} RuntimeRequirements */
 /** @typedef {import("../../declarations/WebpackOptions").CssParserExportType} CssParserExportType */
 
-const getPropertyName = memoize(() => require("../util/propertyName"));
+const getPropertyName = memoize(() => require("../util/property"));
 const getCssModulesPlugin = memoize(() => require("./CssModulesPlugin"));
 
 class CssGenerator extends Generator {
@@ -81,9 +86,10 @@ 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) {
+	_generateImportCode(module, generateContext, getDefaultExport = true) {
 		const moduleGraph = generateContext.moduleGraph;
 		/** @type {{ expr: string, type: CssParserExportType }[]} */
 		const parts = [];
@@ -101,15 +107,24 @@ class CssGenerator extends Generator {
 					runtimeRequirements: generateContext.runtimeRequirements
 				});
 
-				generateContext.runtimeRequirements.add(
-					RuntimeGlobals.compatGetDefaultExport
-				);
-				parts.push({
-					expr: `(${RuntimeGlobals.compatGetDefaultExport}(${importVar})() || "")`,
-					type: /** @type {CssParserExportType} */ (
-						/** @type {BuildMeta} */ (depModule.buildMeta).exportType
-					)
-				});
+				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
+						)
+					});
+				}
 			}
 		}
 
@@ -117,12 +132,12 @@ class CssGenerator extends Generator {
 	}
 
 	/**
-	 * Generate CSS code for the current module
-	 * @param {NormalModule} module the module to generate CSS code for
+	 * Generate CSS source for the current module
+	 * @param {NormalModule} module the module to generate CSS source for
 	 * @param {GenerateContext} generateContext the generate context
-	 * @returns {string} the CSS code as string
+	 * @returns {Source | null} the CSS source
 	 */
-	_generateModuleCode(module, generateContext) {
+	_generateContentSource(module, generateContext) {
 		const moduleSourceContent = /** @type {Source} */ (
 			this.generate(module, {
 				...generateContext,
@@ -131,26 +146,19 @@ class CssGenerator extends Generator {
 		);
 
 		if (!moduleSourceContent) {
-			return "";
+			return null;
 		}
 
 		const compilation = generateContext.runtimeTemplate.compilation;
-		const { path: filename } = compilation.getPathWithInfo(
-			compilation.outputOptions.cssChunkFilename,
-			{
-				runtime: generateContext.runtime,
-				contentHashType: "css"
-			}
-		);
-		const undoPath = getUndoPath(
-			filename,
-			compilation.outputOptions.path,
-			false
-		);
+		// 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);
-		const renderedSource = CssModulesPlugin.renderModule(
+		return CssModulesPlugin.renderModule(
 			/** @type {CssModule} */ (module),
 			{
 				undoPath,
@@ -160,13 +168,23 @@ class CssGenerator extends Generator {
 			},
 			hooks
 		);
+	}
 
-		if (!renderedSource) {
-			return "";
+	/**
+	 * 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);
 		}
-
-		const content = renderedSource.source();
-		return typeof content === "string" ? content : content.toString("utf8");
+		return new RawSource(escaped);
 	}
 
 	/**
@@ -263,12 +281,10 @@ class CssGenerator extends Generator {
 	 * @returns {Source | null} generated code
 	 */
 	generate(module, generateContext) {
-		const exportType = /** @type {BuildMeta} */ (module.buildMeta).exportType;
+		const exportType = /** @type {CssModule} */ (module).exportType || "link";
 		const source =
-			generateContext.type === JAVASCRIPT_TYPE
-				? exportType === "link"
-					? new ReplaceSource(new RawSource(""))
-					: new ReplaceSource(/** @type {Source} */ (module.originalSource()))
+			generateContext.type === JAVASCRIPT_TYPE && exportType === "link"
+				? new ReplaceSource(new RawSource(""))
 				: new ReplaceSource(/** @type {Source} */ (module.originalSource()));
 		/** @type {InitFragment<GenerateContext>[]} */
 		const initFragments = [];
@@ -283,155 +299,262 @@ class CssGenerator extends Generator {
 			cssData
 		});
 
-		const generateCssText = () => {
-			const importCode = this._generateImportCode(module, generateContext);
-			const moduleCode = this._generateModuleCode(module, generateContext);
-
-			if (importCode.length > 0) {
-				if (
-					exportType === "css-style-sheet" ||
-					importCode.some((part) => part.type !== exportType)
-				) {
-					generateContext.runtimeRequirements.add(
-						RuntimeGlobals.cssMergeStyleSheets
-					);
-
-					return `${RuntimeGlobals.cssMergeStyleSheets}([${[...importCode.map((part) => part.expr), JSON.stringify(moduleCode)].join(", ")}])`;
-				}
-				return generateContext.runtimeTemplate.concatenation(
-					...importCode,
-					moduleCode
-				);
-			}
-			return JSON.stringify(moduleCode);
-		};
-
-		/**
-		 * @returns {string | null} the default export
-		 */
-		const generateJSDefaultExport = () => {
-			switch (exportType) {
-				case "text": {
-					return generateCssText();
-				}
-				case "css-style-sheet": {
-					const constOrVar = generateContext.runtimeTemplate.renderConst();
-					return `(${generateContext.runtimeTemplate.basicFunction("", [
-						`${constOrVar} cssText = ${generateCssText()};`,
-						`${constOrVar} sheet = new CSSStyleSheet();`,
-						"sheet.replaceSync(cssText);",
-						"return sheet;"
-					])})()`;
-				}
-				default:
-					return null;
-			}
-		};
-
 		switch (generateContext.type) {
 			case JAVASCRIPT_TYPE: {
-				const isCSSModule = /** @type {BuildMeta} */ (module.buildMeta)
-					.isCSSModule;
-				const defaultExport = generateJSDefaultExport();
-				/**
-				 * @param {string} name the export name
-				 * @param {string} value the export value
-				 * @returns {string} the value to be used in the export
-				 */
-				const stringifyExportValue = (name, value) => {
-					if (defaultExport) {
-						return name === "default" ? value : JSON.stringify(value);
+				const generateContentCode = () => {
+					switch (exportType) {
+						case "style": {
+							const cssSource = this._generateContentSource(
+								module,
+								generateContext
+							);
+							if (!cssSource) return "";
+							const moduleId = generateContext.chunkGraph.getModuleId(module);
+
+							generateContext.runtimeRequirements.add(
+								RuntimeGlobals.cssInjectStyle
+							);
+
+							return new ConcatSource(
+								`${RuntimeGlobals.cssInjectStyle}(${JSON.stringify(moduleId || "")}, `,
+								this._cssSourceToJsStringLiteral(cssSource, module),
+								");"
+							);
+						}
+
+						default:
+							return "";
 					}
-					return JSON.stringify(value);
 				};
+				const generateImportCode = () => {
+					switch (exportType) {
+						case "style": {
+							return this._generateImportCode(module, generateContext, false)
+								.map((part) => `${part.expr};`)
+								.join("\n");
+						}
+						default:
+							return "";
+					}
+				};
+				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;
+					};
+					/**
+					 * @returns {Source | null} the default export
+					 */
+					const generateJSDefaultExport = () => {
+						switch (exportType) {
+							case "text": {
+								return generateCssText();
+							}
+							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";
+								return new ConcatSource(
+									`(${fnPrefix}${constOrVar} cssText = `,
+									cssText,
+									`;\n${body}})()`
+								);
+							}
+							default:
+								return null;
+						}
+					};
 
-				/** @type {BuildInfo} */
-				(module.buildInfo).cssData = cssData;
-
-				// Required for HMR
-				if (module.hot) {
-					generateContext.runtimeRequirements.add(RuntimeGlobals.module);
-				}
+					const isCSSModule = /** @type {BuildMeta} */ (module.buildMeta)
+						.isCSSModule;
+					/** @type {Source | null} */
+					const defaultExport = generateJSDefaultExport();
 
-				if (defaultExport) {
-					cssData.exports.set("default", /** @type {string} */ (defaultExport));
-				}
+					/** @type {BuildInfo} */
+					(module.buildInfo).cssData = cssData;
 
-				if (cssData.exports.size === 0 && !isCSSModule) {
-					return new RawSource("");
-				}
+					// Required for HMR
+					if (module.hot) {
+						generateContext.runtimeRequirements.add(RuntimeGlobals.module);
+					}
 
-				if (generateContext.concatenationScope) {
-					const source = new ConcatSource();
-					/** @type {Set<string>} */
-					const usedIdentifiers = new Set();
-					const { RESERVED_IDENTIFIER } = getPropertyName();
+					if (!defaultExport && cssData.exports.size === 0 && !isCSSModule) {
+						return new RawSource("");
+					}
 
-					for (const [name, v] of cssData.exports) {
-						const usedName = generateContext.moduleGraph
-							.getExportInfo(module, name)
-							.getUsedName(name, generateContext.runtime);
-						if (!usedName) {
-							continue;
+					if (generateContext.concatenationScope) {
+						const source = new ConcatSource();
+						/** @type {Set<string>} */
+						const usedIdentifiers = new Set();
+						const { RESERVED_IDENTIFIER } = getPropertyName();
+
+						if (defaultExport) {
+							const usedName = generateContext.moduleGraph
+								.getExportInfo(module, "default")
+								.getUsedName("default", generateContext.runtime);
+							if (usedName) {
+								let identifier = Template.toIdentifier(usedName);
+								if (RESERVED_IDENTIFIER.has(identifier)) {
+									identifier = `_${identifier}`;
+								}
+								usedIdentifiers.add(identifier);
+								generateContext.concatenationScope.registerExport(
+									"default",
+									identifier
+								);
+								source.add(
+									`${generateContext.runtimeTemplate.renderConst()} ${identifier} = `
+								);
+								source.add(defaultExport);
+								source.add(";\n");
+							}
 						}
 
-						let identifier = Template.toIdentifier(usedName);
-						if (RESERVED_IDENTIFIER.has(identifier)) {
-							identifier = `_${identifier}`;
-						}
-						let i = 0;
-						while (usedIdentifiers.has(identifier)) {
-							identifier = Template.toIdentifier(name + i);
-							i += 1;
+						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);
+							if (RESERVED_IDENTIFIER.has(identifier)) {
+								identifier = `_${identifier}`;
+							}
+							let i = 0;
+							while (usedIdentifiers.has(identifier)) {
+								identifier = Template.toIdentifier(name + i);
+								i += 1;
+							}
+							usedIdentifiers.add(identifier);
+							generateContext.concatenationScope.registerExport(
+								name,
+								identifier
+							);
+							source.add(
+								`${generateContext.runtimeTemplate.renderConst()} ${identifier} = ${JSON.stringify(v)};\n`
+							);
 						}
-						usedIdentifiers.add(identifier);
-						generateContext.concatenationScope.registerExport(name, identifier);
-						source.add(
-							`${generateContext.runtimeTemplate.renderConst()} ${identifier} = ${stringifyExportValue(name, v)};\n`
+						return source;
+					}
+
+					const needNsObj =
+						this._esModule &&
+						generateContext.moduleGraph
+							.getExportsInfo(module)
+							.otherExportsInfo.getUsed(generateContext.runtime) !==
+							UsageState.Unused;
+
+					if (needNsObj) {
+						generateContext.runtimeRequirements.add(
+							RuntimeGlobals.makeNamespaceObject
 						);
 					}
-					return source;
-				}
 
-				const needNsObj =
-					this._esModule &&
-					generateContext.moduleGraph
-						.getExportsInfo(module)
-						.otherExportsInfo.getUsed(generateContext.runtime) !==
-						UsageState.Unused;
+					// Should be after `concatenationScope` to allow module inlining
+					generateContext.runtimeRequirements.add(RuntimeGlobals.module);
 
-				if (needNsObj) {
-					generateContext.runtimeRequirements.add(
-						RuntimeGlobals.makeNamespaceObject
+					if (!isCSSModule && !needNsObj) {
+						return new ConcatSource(
+							`${module.moduleArgument}.exports = `,
+							/** @type {Source} */ (defaultExport)
+						);
+					}
+
+					const result = new ConcatSource();
+					result.add(
+						`${needNsObj ? `${RuntimeGlobals.makeNamespaceObject}(` : ""}${
+							module.moduleArgument
+						}.exports = {\n`
 					);
-				}
 
-				// Should be after `concatenationScope` to allow module inlining
-				generateContext.runtimeRequirements.add(RuntimeGlobals.module);
+					if (defaultExport) {
+						result.add('\t"default": ');
+						result.add(defaultExport);
+						if (cssData.exports.size > 0) {
+							result.add(",\n");
+						}
+					}
 
-				if (!isCSSModule && !needNsObj) {
-					return new RawSource(
-						`${module.moduleArgument}.exports = ${defaultExport}`
-					);
-				}
+					/** @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"));
+					}
 
-				/** @type {string[]} */
-				const exports = [];
+					result.add(`\n}${needNsObj ? ")" : ""};`);
+					return result;
+				};
 
-				for (const [name, v] of cssData.exports) {
-					exports.push(
-						`\t${JSON.stringify(name)}: ${stringifyExportValue(name, v)}`
-					);
-				}
+				const codeParts = this._exportsOnly
+					? [generateExportCode()]
+					: [generateImportCode(), generateContentCode(), generateExportCode()];
 
-				return new RawSource(
-					`${needNsObj ? `${RuntimeGlobals.makeNamespaceObject}(` : ""}${
-						module.moduleArgument
-					}.exports = {\n${exports.join(",\n")}\n}${needNsObj ? ")" : ""};`
-				);
+				const source = new ConcatSource();
+				for (const part of codeParts) {
+					if (part) {
+						source.add(part);
+						source.add("\n");
+					}
+				}
+				return source;
 			}
 			case CSS_TYPE: {
-				if (!this._generatesJsOnly(module)) {
+				if (
+					!(
+						this._exportsOnly ||
+						/** @type {boolean} */ (exportType && exportType !== "link")
+					)
+				) {
 					generateContext.runtimeRequirements.add(RuntimeGlobals.hasCssModules);
 				}
 
@@ -468,9 +591,12 @@ class CssGenerator extends Generator {
 	 * @returns {SourceTypes} available types (do not mutate)
 	 */
 	getTypes(module) {
-		const exportType = /** @type {BuildMeta} */ (module.buildMeta).exportType;
-		const sourceTypes = new Set();
+		const exportType = /** @type {CssModule} */ (module).exportType || "link";
+		if (exportType === "style") {
+			return JAVASCRIPT_TYPES;
+		}
 
+		const sourceTypes = new Set();
 		const connections = this._moduleGraph.getIncomingConnections(module);
 
 		for (const connection of connections) {
@@ -495,9 +621,8 @@ class CssGenerator extends Generator {
 				sourceTypes.add(JAVASCRIPT_TYPE);
 			} else {
 				const originModule = /** @type {CssModule} */ connection.originModule;
-				const originExportType = /** @type {BuildMeta} */ (
-					originModule.buildMeta
-				).exportType;
+				const originExportType = /** @type {CssModule} */ (originModule)
+					.exportType;
 				if (
 					/** @type {boolean} */ (
 						originExportType && originExportType !== "link"
@@ -507,7 +632,10 @@ class CssGenerator extends Generator {
 				}
 			}
 		}
-		if (this._generatesJsOnly(module)) {
+		if (
+			this._exportsOnly ||
+			/** @type {boolean} */ (exportType && exportType !== "link")
+		) {
 			if (sourceTypes.has(JAVASCRIPT_TYPE)) {
 				return JAVASCRIPT_TYPES;
 			}
@@ -538,12 +666,12 @@ class CssGenerator extends Generator {
 					return 0;
 				}
 				const exports = cssData.exports;
-				const stringifiedExports = JSON.stringify(
-					[...exports].reduce((obj, [key, value]) => {
-						obj[key] = value;
-						return obj;
-					}, /** @type {Record<string, string>} */ ({}))
-				);
+				/** @type {Record<string, string>} */
+				const exportsObj = {};
+				for (const [key, value] of exports) {
+					exportsObj[key] = value;
+				}
+				const stringifiedExports = JSON.stringify(exportsObj);
 
 				return stringifiedExports.length + 42;
 			}
@@ -568,20 +696,6 @@ class CssGenerator extends Generator {
 	updateHash(hash, { module }) {
 		hash.update(/** @type {boolean} */ (this._esModule).toString());
 	}
-
-	/**
-	 * @param {NormalModule} module module
-	 * @returns {boolean} true if the module only outputs JavaScript
-	 */
-	_generatesJsOnly(module) {
-		const exportType = /** @type {BuildMeta} */ (module.buildMeta).exportType;
-		return (
-			this._exportsOnly ||
-			/** @type {boolean} */ (exportType && exportType !== "link")
-		);
-	}
 }
 
 module.exports = CssGenerator;
-
-module.exports = CssGenerator;