webpack 5.102.1 → 5.103.0

package/lib/css/CssGenerator.js

@@ -12,12 +12,14 @@ const InitFragment = require("../InitFragment");
 const {
 	CSS_TYPE,
 	CSS_TYPES,
-	JS_AND_CSS_EXPORT_TYPES,
 	JS_AND_CSS_TYPES,
-	JS_TYPE
+	JS_TYPE,
+	JS_TYPES
 } = require("../ModuleSourceTypesConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
+const CssImportDependency = require("../dependencies/CssImportDependency");
+const { getUndoPath } = require("../util/identifier");
 const memoize = require("../util/memoize");
 
 /** @typedef {import("webpack-sources").Source} Source */
@@ -38,8 +40,14 @@ const memoize = require("../util/memoize");
 /** @typedef {import("../ModuleGraph")} ModuleGraph */
 /** @typedef {import("../NormalModule")} NormalModule */
 /** @typedef {import("../util/Hash")} Hash */
+/** @typedef {import("./CssModulesPlugin").ModuleFactoryCacheEntry} ModuleFactoryCacheEntry */
+/** @typedef {import("../CssModule")} CssModule */
+/** @typedef {import("../Compilation")} Compilation */
+/** @typedef {import("../Module").RuntimeRequirements} RuntimeRequirements */
+/** @typedef {import("../../declarations/WebpackOptions").CssParserExportType} CssParserExportType */
 
 const getPropertyName = memoize(() => require("../util/propertyName"));
+const getCssModulesPlugin = memoize(() => require("./CssModulesPlugin"));
 
 class CssGenerator extends Generator {
 	/**
@@ -50,9 +58,11 @@ class CssGenerator extends Generator {
 		super();
 		this.convention = options.exportsConvention;
 		this.localIdentName = options.localIdentName;
-		this.exportsOnly = options.exportsOnly;
-		this.esModule = options.esModule;
+		this._exportsOnly = options.exportsOnly;
+		this._esModule = options.esModule;
 		this._moduleGraph = moduleGraph;
+		/** @type {WeakMap<Source, ModuleFactoryCacheEntry>} */
+		this._moduleFactoryCache = new WeakMap();
 	}
 
 	/**
@@ -61,7 +71,7 @@ class CssGenerator extends Generator {
 	 * @returns {string | undefined} reason why this module can't be concatenated, undefined when it can be concatenated
 	 */
 	getConcatenationBailoutReason(module, context) {
-		if (!this.esModule) {
+		if (!this._esModule) {
 			return "Module is not an ECMAScript module";
 		}
 
@@ -69,24 +79,117 @@ class CssGenerator extends Generator {
 	}
 
 	/**
-	 * @param {NormalModule} module module for which the code should be generated
-	 * @param {GenerateContext} generateContext context for generate
-	 * @returns {Source | null} generated code
+	 * Generate JavaScript code that requires and concatenates all CSS imports
+	 * @param {NormalModule} module the module to generate CSS text for
+	 * @param {GenerateContext} generateContext the generate context
+	 * @returns {{ expr: string, type: CssParserExportType }[]} JavaScript code that concatenates all imported CSS
 	 */
-	generate(module, generateContext) {
-		const source =
-			generateContext.type === "javascript"
-				? new ReplaceSource(new RawSource(""))
-				: new ReplaceSource(/** @type {Source} */ (module.originalSource()));
+	_generateImportCode(module, generateContext) {
+		const moduleGraph = generateContext.moduleGraph;
+		/** @type {{ expr: string, type: CssParserExportType }[]} */
+		const parts = [];
+
+		// Iterate through module.dependencies to maintain source order
+		for (const dep of module.dependencies) {
+			if (dep instanceof CssImportDependency) {
+				/** @type {CssModule} */
+				const depModule = /** @type {CssModule} */ (moduleGraph.getModule(dep));
+				const importVar = generateContext.runtimeTemplate.moduleExports({
+					module: depModule,
+					chunkGraph: generateContext.chunkGraph,
+					request: /** @type {CssModule} */ (depModule).userRequest,
+					weak: false,
+					runtimeRequirements: generateContext.runtimeRequirements
+				});
+
+				generateContext.runtimeRequirements.add(
+					RuntimeGlobals.compatGetDefaultExport
+				);
+				parts.push({
+					expr: `(${RuntimeGlobals.compatGetDefaultExport}(${importVar})() || "")`,
+					type: /** @type {CssParserExportType} */ (
+						/** @type {BuildMeta} */ (depModule.buildMeta).exportType
+					)
+				});
+			}
+		}
 
-		/** @type {InitFragment<GenerateContext>[]} */
-		const initFragments = [];
-		/** @type {CssData} */
-		const cssData = {
-			esModule: /** @type {boolean} */ (this.esModule),
-			exports: new Map()
-		};
+		return parts;
+	}
+
+	/**
+	 * Generate CSS code for the current module
+	 * @param {NormalModule} module the module to generate CSS code for
+	 * @param {GenerateContext} generateContext the generate context
+	 * @returns {string} the CSS code as string
+	 */
+	_generateModuleCode(module, generateContext) {
+		const moduleSourceContent = /** @type {Source} */ (
+			this.generate(module, {
+				...generateContext,
+				type: "css"
+			})
+		);
+
+		if (!moduleSourceContent) {
+			return "";
+		}
+
+		const compilation = generateContext.runtimeTemplate.compilation;
+		const { path: filename } = compilation.getPathWithInfo(
+			compilation.outputOptions.cssChunkFilename,
+			{
+				runtime: generateContext.runtime,
+				contentHashType: "css"
+			}
+		);
+		const undoPath = getUndoPath(
+			filename,
+			compilation.outputOptions.path,
+			false
+		);
+
+		const CssModulesPlugin = getCssModulesPlugin();
+		const hooks = CssModulesPlugin.getCompilationHooks(compilation);
+		const renderedSource = CssModulesPlugin.renderModule(
+			/** @type {CssModule} */ (module),
+			{
+				undoPath,
+				moduleSourceContent,
+				moduleFactoryCache: this._moduleFactoryCache,
+				runtimeTemplate: generateContext.runtimeTemplate
+			},
+			hooks
+		);
+
+		if (!renderedSource) {
+			return "";
+		}
+
+		const content = renderedSource.source();
+		return typeof content === "string" ? content : content.toString("utf8");
+	}
 
+	/**
+	 * @param {NormalModule} module the current module
+	 * @param {Dependency} dependency the dependency to generate
+	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
+	 * @param {ReplaceSource} source the current replace source which can be modified
+	 * @param {GenerateContext & { cssData: CssData }} generateContext the render context
+	 * @returns {void}
+	 */
+	sourceDependency(module, dependency, initFragments, source, generateContext) {
+		const constructor =
+			/** @type {DependencyConstructor} */
+			(dependency.constructor);
+		const template = generateContext.dependencyTemplates.get(constructor);
+		if (!template) {
+			throw new Error(
+				`No template for dependency: ${dependency.constructor.name}`
+			);
+		}
+
+		/** @type {DependencyTemplateContext} */
 		/** @type {InitFragment<GenerateContext>[] | undefined} */
 		let chunkInitFragments;
 		/** @type {DependencyTemplateContext} */
@@ -103,7 +206,8 @@ class CssGenerator extends Generator {
 				/** @type {CodeGenerationResults} */
 				(generateContext.codeGenerationResults),
 			initFragments,
-			cssData,
+			cssData: generateContext.cssData,
+			type: generateContext.type,
 			get chunkInitFragments() {
 				if (!chunkInitFragments) {
 					const data =
@@ -120,38 +224,149 @@ class CssGenerator extends Generator {
 			}
 		};
 
-		/**
-		 * @param {Dependency} dependency dependency
-		 */
-		const handleDependency = (dependency) => {
-			const constructor =
-				/** @type {DependencyConstructor} */
-				(dependency.constructor);
-			const template = generateContext.dependencyTemplates.get(constructor);
-			if (!template) {
-				throw new Error(
-					`No template for dependency: ${dependency.constructor.name}`
+		template.apply(dependency, source, templateContext);
+	}
+
+	/**
+	 * @param {NormalModule} module the module to generate
+	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
+	 * @param {ReplaceSource} source the current replace source which can be modified
+	 * @param {GenerateContext & { cssData: CssData }} generateContext the generateContext
+	 * @returns {void}
+	 */
+	sourceModule(module, initFragments, source, generateContext) {
+		for (const dependency of module.dependencies) {
+			this.sourceDependency(
+				module,
+				dependency,
+				initFragments,
+				source,
+				generateContext
+			);
+		}
+
+		if (module.presentationalDependencies !== undefined) {
+			for (const dependency of module.presentationalDependencies) {
+				this.sourceDependency(
+					module,
+					dependency,
+					initFragments,
+					source,
+					generateContext
 				);
 			}
+		}
+	}
 
-			template.apply(dependency, source, templateContext);
+	/**
+	 * @param {NormalModule} module module for which the code should be generated
+	 * @param {GenerateContext} generateContext context for generate
+	 * @returns {Source | null} generated code
+	 */
+	generate(module, generateContext) {
+		const exportType = /** @type {BuildMeta} */ (module.buildMeta).exportType;
+		const source =
+			generateContext.type === "javascript"
+				? exportType === "link"
+					? new ReplaceSource(new RawSource(""))
+					: new ReplaceSource(/** @type {Source} */ (module.originalSource()))
+				: new ReplaceSource(/** @type {Source} */ (module.originalSource()));
+		/** @type {InitFragment<GenerateContext>[]} */
+		const initFragments = [];
+		/** @type {CssData} */
+		const cssData = {
+			esModule: /** @type {boolean} */ (this._esModule),
+			exports: new Map()
 		};
 
-		for (const dependency of module.dependencies) {
-			handleDependency(dependency);
-		}
+		this.sourceModule(module, initFragments, source, {
+			...generateContext,
+			cssData
+		});
+
+		const generateCssText = () => {
+			const importCode = this._generateImportCode(module, generateContext);
+			const moduleCode = this._generateModuleCode(module, generateContext);
+
+			if (importCode.length > 0) {
+				if (
+					exportType === "css-style-sheet" ||
+					importCode.some((part) => part.type !== exportType)
+				) {
+					generateContext.runtimeRequirements.add(
+						RuntimeGlobals.cssMergeStyleSheets
+					);
+
+					return `${RuntimeGlobals.cssMergeStyleSheets}([${[...importCode.map((part) => part.expr), JSON.stringify(moduleCode)].join(", ")}])`;
+				}
+				return generateContext.runtimeTemplate.concatenation(
+					...importCode,
+					moduleCode
+				);
+			}
+			return JSON.stringify(moduleCode);
+		};
+
+		/**
+		 * @returns {string | null} the default export
+		 */
+		const generateJSDefaultExport = () => {
+			switch (exportType) {
+				case "text": {
+					return generateCssText();
+				}
+				case "css-style-sheet": {
+					const constOrVar = generateContext.runtimeTemplate.renderConst();
+					return `(${generateContext.runtimeTemplate.basicFunction("", [
+						`${constOrVar} cssText = ${generateCssText()};`,
+						`${constOrVar} sheet = new CSSStyleSheet();`,
+						"sheet.replaceSync(cssText);",
+						"return sheet;"
+					])})()`;
+				}
+				default:
+					return null;
+			}
+		};
 
 		switch (generateContext.type) {
 			case "javascript": {
+				const isCSSModule = /** @type {BuildMeta} */ (module.buildMeta)
+					.isCSSModule;
+				const defaultExport = generateJSDefaultExport();
+				/**
+				 * @param {string} name the export name
+				 * @param {string} value the export value
+				 * @returns {string} the value to be used in the export
+				 */
+				const stringifyExportValue = (name, value) => {
+					if (defaultExport) {
+						return name === "default" ? value : JSON.stringify(value);
+					}
+					return JSON.stringify(value);
+				};
+
 				/** @type {BuildInfo} */
 				(module.buildInfo).cssData = cssData;
 
-				generateContext.runtimeRequirements.add(RuntimeGlobals.module);
+				// Required for HMR
+				if (module.hot) {
+					generateContext.runtimeRequirements.add(RuntimeGlobals.module);
+				}
+
+				if (defaultExport) {
+					cssData.exports.set("default", /** @type {string} */ (defaultExport));
+				}
+
+				if (cssData.exports.size === 0 && !isCSSModule) {
+					return new RawSource("");
+				}
 
 				if (generateContext.concatenationScope) {
 					const source = new ConcatSource();
 					const usedIdentifiers = new Set();
 					const { RESERVED_IDENTIFIER } = getPropertyName();
+
 					for (const [name, v] of cssData.exports) {
 						const usedName = generateContext.moduleGraph
 							.getExportInfo(module, name)
@@ -171,21 +386,14 @@ class CssGenerator extends Generator {
 						usedIdentifiers.add(identifier);
 						generateContext.concatenationScope.registerExport(name, identifier);
 						source.add(
-							`${generateContext.runtimeTemplate.renderConst()} ${identifier} = ${JSON.stringify(v)};\n`
+							`${generateContext.runtimeTemplate.renderConst()} ${identifier} = ${stringifyExportValue(name, v)};\n`
 						);
 					}
 					return source;
 				}
 
-				if (
-					cssData.exports.size === 0 &&
-					!(/** @type {BuildMeta} */ (module.buildMeta).isCSSModule)
-				) {
-					return new RawSource("");
-				}
-
 				const needNsObj =
-					this.esModule &&
+					this._esModule &&
 					generateContext.moduleGraph
 						.getExportsInfo(module)
 						.otherExportsInfo.getUsed(generateContext.runtime) !==
@@ -197,10 +405,21 @@ class CssGenerator extends Generator {
 					);
 				}
 
+				// Should be after `concatenationScope` to allow module inlining
+				generateContext.runtimeRequirements.add(RuntimeGlobals.module);
+
+				if (!isCSSModule && !needNsObj) {
+					return new RawSource(
+						`${module.moduleArgument}.exports = ${defaultExport}`
+					);
+				}
+
 				const exports = [];
 
 				for (const [name, v] of cssData.exports) {
-					exports.push(`\t${JSON.stringify(name)}: ${JSON.stringify(v)}`);
+					exports.push(
+						`\t${JSON.stringify(name)}: ${stringifyExportValue(name, v)}`
+					);
 				}
 
 				return new RawSource(
@@ -210,14 +429,10 @@ class CssGenerator extends Generator {
 				);
 			}
 			case "css": {
-				if (module.presentationalDependencies !== undefined) {
-					for (const dependency of module.presentationalDependencies) {
-						handleDependency(dependency);
-					}
+				if (!this._generatesJsOnly(module)) {
+					generateContext.runtimeRequirements.add(RuntimeGlobals.hasCssModules);
 				}
 
-				generateContext.runtimeRequirements.add(RuntimeGlobals.hasCssModules);
-
 				return InitFragment.addToSource(source, initFragments, generateContext);
 			}
 			default:
@@ -251,9 +466,8 @@ class CssGenerator extends Generator {
 	 * @returns {SourceTypes} available types (do not mutate)
 	 */
 	getTypes(module) {
-		// TODO, find a better way to prevent the original module from being removed after concatenation, maybe it is a bug
-		if (this.exportsOnly) {
-			return JS_AND_CSS_EXPORT_TYPES;
+		if (this._generatesJsOnly(module)) {
+			return JS_TYPES;
 		}
 		const sourceTypes = new Set();
 		const connections = this._moduleGraph.getIncomingConnections(module);
@@ -318,7 +532,19 @@ class CssGenerator extends Generator {
 	 * @param {UpdateHashContext} updateHashContext context for updating hash
 	 */
 	updateHash(hash, { module }) {
-		hash.update(/** @type {boolean} */ (this.esModule).toString());
+		hash.update(/** @type {boolean} */ (this._esModule).toString());
+	}
+
+	/**
+	 * @param {NormalModule} module module
+	 * @returns {boolean} true if the module only outputs JavaScript
+	 */
+	_generatesJsOnly(module) {
+		const exportType = /** @type {BuildMeta} */ (module.buildMeta).exportType;
+		return (
+			this._exportsOnly ||
+			/** @type {boolean} */ (exportType && exportType !== "link")
+		);
 	}
 }
 

package/lib/css/CssLoadingRuntimeModule.js

@@ -462,6 +462,8 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 									`var url = ${RuntimeGlobals.publicPath} + filename;`,
 									"var oldTag = loadStylesheet(chunkId, url);",
 									"if(!oldTag) return;",
+									"// create error before stack unwound to get useful stacktrace later",
+									"var error = new Error();",
 									`promises.push(new Promise(${runtimeTemplate.basicFunction(
 										"resolve, reject",
 										[

package/lib/css/CssMergeStyleSheetsRuntimeModule.js

@@ -0,0 +1,56 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Natsu @xiaoxiaojx
+*/
+
+"use strict";
+
+const RuntimeGlobals = require("../RuntimeGlobals");
+const RuntimeModule = require("../RuntimeModule");
+const Template = require("../Template");
+
+/** @typedef {import("../Chunk")} Chunk */
+
+class CssMergeStyleSheetsRuntimeModule extends RuntimeModule {
+	constructor() {
+		super("css merge stylesheets");
+	}
+
+	/**
+	 * @returns {string | null} runtime code
+	 */
+	generate() {
+		const { runtimeTemplate } = /** @type {import("../Compilation")} */ (
+			this.compilation
+		);
+
+		return Template.asString([
+			`${RuntimeGlobals.cssMergeStyleSheets} = ${runtimeTemplate.basicFunction(
+				"sheets",
+				[
+					"var sheetsArray = Array.isArray(sheets) ? sheets : [sheets];",
+					"var cssTexts = [];",
+					"for (var i = 0; i < sheetsArray.length; i++) {",
+					Template.indent([
+						"var s = sheetsArray[i];",
+						"if (!s) continue;",
+						"if (typeof s === 'string') {",
+						Template.indent("cssTexts.push(s);"),
+						"} else if (s.cssRules) {",
+						Template.indent([
+							"var rules = s.cssRules;",
+							"for (var j = 0; j < rules.length; j++) {",
+							Template.indent("cssTexts.push(rules[j].cssText);"),
+							"}"
+						]),
+						"}"
+					]),
+					"}",
+					"return cssTexts.join('');"
+				]
+			)};`
+		]);
+	}
+}
+
+module.exports = CssMergeStyleSheetsRuntimeModule;