webpack 5.111.1 → 5.112.1

package/lib/css/CssModule.js

@@ -5,18 +5,18 @@
 
 "use strict";
 
-const NormalModule = require("../NormalModule");
+const NormalModule = require("../module/NormalModule");
 const makeSerializable = require("../util/makeSerializable");
 
-/** @import { CssData } from "../DependencyTemplate" */
-/** @import Module, { BuildMeta } from "../Module" */
+/** @import { CssData } from "../template/DependencyTemplate" */
+/** @import Module, { BuildMeta, ModuleKinds } from "../module/Module" */
 /**
  * @import {
  * 	NormalModuleBuildInfo,
  * 	NormalModuleCreateData
- * } from "../NormalModule"
+ * } from "../module/NormalModule"
  */
-/** @import RequestShortener from "../RequestShortener" */
+/** @import RequestShortener from "../util/RequestShortener" */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext<[CssLayer, Supports, Media, Inheritance | undefined, CssParserExportType | undefined]>} ObjectDeserializerContext */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext<[CssLayer, Supports, Media, Inheritance | undefined, CssParserExportType | undefined]>} ObjectSerializerContext */
 /** @import { CssParserExportType } from "../../declarations/WebpackOptions" */
@@ -47,6 +47,16 @@ const makeSerializable = require("../util/makeSerializable");
 
 /** @typedef {BuildMeta & KnownCssModuleBuildMeta} CssModuleBuildMeta */
 
+/**
+ * A css module before or after its build, typed with its build info and build meta.
+ * @typedef {NormalModule & { buildInfo?: CssModuleBuildInfo, buildMeta?: CssModuleBuildMeta }} CssNormalModule
+ */
+
+/**
+ * A built css module, typed with its build info and build meta.
+ * @typedef {NormalModule & { buildInfo: CssModuleBuildInfo, buildMeta: CssModuleBuildMeta }} BuiltCssModule
+ */
+
 class CssModule extends NormalModule {
 	/**
 	 * Creates an instance of CssModule.
@@ -144,6 +154,17 @@ class CssModule extends NormalModule {
 		return identifier;
 	}
 
+	/**
+	 * Whether a concatenation may defer this module behind its lazy CommonJS
+	 * accessor. A generator ignoring `ConcatenationScope#isWrapped` answers false.
+	 * @returns {boolean} true, when it may be wrapped
+	 */
+	canBeWrappedInConcatenation() {
+		// CssGenerator puts each export in the shared scope as a const and never
+		// writes `module.exports`, so a wrapper would hand out an empty object
+		return false;
+	}
+
 	/**
 	 * Assuming this module is in the cache. Update the (cached) module with
 	 * the fresh module from the factory. Usually updates internal references
@@ -181,30 +202,14 @@ class CssModule extends NormalModule {
 	 * @returns {CssModule} the deserialized object
 	 */
 	static deserialize(context) {
-		const obj = new CssModule({
-			// will be deserialized by Module
-			layer: /** @type {EXPECTED_ANY} */ (null),
-			type: "",
-			// will be filled by updateCacheModule
-			resource: "",
-			context: "",
-			request: /** @type {EXPECTED_ANY} */ (null),
-			userRequest: /** @type {EXPECTED_ANY} */ (null),
-			rawRequest: /** @type {EXPECTED_ANY} */ (null),
-			loaders: /** @type {EXPECTED_ANY} */ (null),
-			matchResource: /** @type {EXPECTED_ANY} */ (null),
-			parser: /** @type {EXPECTED_ANY} */ (null),
-			parserOptions: /** @type {EXPECTED_ANY} */ (null),
-			generator: /** @type {EXPECTED_ANY} */ (null),
-			generatorOptions: /** @type {EXPECTED_ANY} */ (null),
-			resolveOptions: undefined,
-			cssLayer: /** @type {EXPECTED_ANY} */ (null),
-			supports: /** @type {EXPECTED_ANY} */ (null),
-			media: /** @type {EXPECTED_ANY} */ (null),
-			inheritance: /** @type {EXPECTED_ANY} */ (null),
-			extractSourceMap: /** @type {EXPECTED_ANY} */ (null),
-			exportType: /** @type {EXPECTED_ANY} */ (null)
-		});
+		const obj = new CssModule(
+			// the rest is restored by `deserialize` and `updateCacheModule`
+			/** @type {CssModuleCreateData} */ ({
+				type: "",
+				resource: "",
+				context: ""
+			})
+		);
 		obj.deserialize(context);
 		return obj;
 	}
@@ -229,4 +234,7 @@ class CssModule extends NormalModule {
 
 makeSerializable(CssModule, "webpack/lib/CssModule");
 
+/** @type {Set<keyof ModuleKinds>} */
+CssModule.KINDS = new Set([...NormalModule.KINDS, "css"]);
+
 module.exports = CssModule;

package/lib/css/CssModulesPlugin.js

@@ -14,29 +14,36 @@ const {
 	ReplaceSource
 } = require("webpack-sources");
 /** @import Compilation, { ChunkHashContext } from "../Compilation" */
-const HotUpdateChunk = require("../HotUpdateChunk");
-const { CSS_IMPORT_TYPE, CSS_TYPE } = require("../ModuleSourceTypeConstants");
+const StaticExportsDependency = require("../dependencies/core/StaticExportsDependency");
+const { tryRunOrWebpackError } = require("../errors/HookWebpackError");
+const WebpackError = require("../errors/WebpackError");
+const isDependencyKind = require("../graph/isDependencyKind");
+const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
+const {
+	CSS_IMPORT_TYPE,
+	CSS_TYPE
+} = require("../module/ModuleSourceTypeConstants");
 const {
 	CSS_MODULE_TYPE,
 	CSS_MODULE_TYPE_AUTO,
 	CSS_MODULE_TYPE_GLOBAL,
 	CSS_MODULE_TYPE_MODULE
-} = require("../ModuleTypeConstants");
-const NormalModule = require("../NormalModule");
-const RuntimeGlobals = require("../RuntimeGlobals");
-const Template = require("../Template");
-const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
-const { tryRunOrWebpackError } = require("../errors/HookWebpackError");
-const WebpackError = require("../errors/WebpackError");
-const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
-const ConcatenatedModule = require("../optimize/ConcatenatedModule");
-const { compareModulesByFullName } = require("../util/comparators");
+} = require("../module/ModuleTypeConstants");
+const NormalModule = require("../module/NormalModule");
+const RuntimeGlobals = require("../runtime/RuntimeGlobals");
+const Template = require("../template/Template");
+const {
+	compareModulesByFullName,
+	compareNumbers,
+	compareSelect,
+	compareStrings,
+	concatComparators
+} = require("../util/comparators");
 const createHash = require("../util/createHash");
 const createHooksRegistry = require("../util/createHooksRegistry");
 const { getUndoPath } = require("../util/identifier");
 const implicitTypeLoaderFallback = require("../util/implicitTypeLoaderFallback");
 const lazyModule = require("../util/lazyModule");
-const memoize = require("../util/memoize");
 const { digestNonNumericOnlyWithFull } = require("../util/nonNumericOnlyHash");
 const preloadModuleType = require("../util/preloadModuleType");
 const {
@@ -52,11 +59,12 @@ const CssModule = require("./CssModule");
  * 	OutputNormalizedWithDefaults as OutputOptions
  * } from "../config/defaults"
  */
-/** @import Chunk, { ChunkFilenameTemplate } from "../Chunk" */
-/** @import ChunkGraph from "../ChunkGraph" */
-/** @import CodeGenerationResults from "../CodeGenerationResults" */
+/** @import Chunk, { ChunkFilenameTemplate } from "../graph/Chunk" */
+/** @import ChunkGraph from "../graph/ChunkGraph" */
+/** @import ChunkGroup from "../graph/ChunkGroup" */
+/** @import CodeGenerationResults from "../module/CodeGenerationResults" */
 /** @import Compiler from "../Compiler" */
-/** @import RuntimeTemplate from "../RuntimeTemplate" */
+/** @import RuntimeTemplate from "../template/RuntimeTemplate" */
 /** @import CssGenerator from "./CssGenerator" */
 /** @import CssParser from "./CssParser" */
 /**
@@ -66,7 +74,7 @@ const CssModule = require("./CssModule");
  * 	CssModuleBuildInfo
  * } from "./CssModule"
  */
-/** @import Module, { RuntimeRequirements } from "../Module" */
+/** @import Module, { RuntimeRequirements } from "../module/Module" */
 /** @import Hash from "../util/Hash" */
 
 /**
@@ -115,9 +123,6 @@ const CSS_MODULE_TYPES = [
 	CSS_MODULE_TYPE_MODULE,
 	CSS_MODULE_TYPE_AUTO
 ];
-const getCssImportDependency = memoize(() =>
-	require("../dependencies/CssImportDependency")
-);
 const getCssLoadingRuntimeModule = lazyModule(() =>
 	require("./CssLoadingRuntimeModule")
 );
@@ -214,6 +219,59 @@ const getSchema = (name) => {
 	};
 };
 
+/**
+ * Whether the CSS runtimes emit their no-DOM branch, which collects styles for a
+ * server render: a node platform always, the neutral one behind a runtime check.
+ * Other document-less platforms (`target: "webworker"`) keep the DOM branch.
+ * @param {Compilation} compilation the compilation
+ * @returns {boolean} true when styles may be collected instead of applied
+ */
+const collectsServerStyles = (compilation) =>
+	!compilation.outputOptions.environment.document &&
+	(compilation.runtimeTemplate.isNeutralPlatform() ||
+		compilation.compiler.platform.node === true);
+
+/**
+ * Smallest post-order index among a chunk's css modules, taken from the group's
+ * view of the dependency graph — where its rules belong in the cascade.
+ * `group.chunks` alone does not give that: `splitChunks` inserts each new chunk
+ * before the one it split from, so split css siblings come out reversed.
+ * @param {Chunk} chunk the chunk
+ * @param {ChunkGroup} group the group whose module order decides the cascade
+ * @param {ChunkGraph} chunkGraph chunk graph
+ * @returns {number} the index, `Infinity` when the group's walk reaches none
+ */
+const firstCssModulePostOrderIndex = (chunk, group, chunkGraph) => {
+	let min = Number.POSITIVE_INFINITY;
+	for (const sourceType of [CSS_TYPE, CSS_IMPORT_TYPE]) {
+		const modules = chunkGraph.getChunkModulesIterableBySourceType(
+			chunk,
+			sourceType
+		);
+		if (!modules) continue;
+		for (const module of modules) {
+			const index = group.getModulePostOrderIndex(module);
+			if (index !== undefined && index < min) min = index;
+		}
+	}
+	return min;
+};
+
+// The cascade order, with the key breaking ties: `Array#sort` is not stable on
+// the legacy node versions this repo supports, so the order must be total.
+const compareCssChunkOrder = concatComparators(
+	compareSelect(
+		/** @type {(entry: { index: number, key: string }) => number} */
+		((entry) => entry.index),
+		compareNumbers
+	),
+	compareSelect(
+		/** @type {(entry: { index: number, key: string }) => string} */
+		((entry) => entry.key),
+		compareStrings
+	)
+);
+
 const parserValidationOptions = {
 	name: "Css Modules Plugin",
 	baseDataPath: "parser"
@@ -268,7 +326,7 @@ class CssModulesPlugin {
 	apply(compiler) {
 		// `"auto"` marks implicit enablement (no user rule for CSS files) — see
 		// `applyExperimentsDefaults`. Only then loaders win over the built-in type.
-		// TODO webpack 6: css defaults to `true`, drop this implicit-only fallback.
+		// TODO in the next major release: css defaults to `true`, drop this implicit-only fallback.
 		const implicitlyEnabled = compiler.options.experiments.css === "auto";
 		compiler.hooks.compilation.tap(
 			PLUGIN_NAME,
@@ -290,11 +348,11 @@ class CssModulesPlugin {
 					if (dependenciesRegistered) return;
 					dependenciesRegistered = true;
 
-					const CssImportDependency = require("../dependencies/CssImportDependency");
-					const CssUrlDependency = require("../dependencies/CssUrlDependency");
-					const CssIcssImportDependency = require("../dependencies/CssIcssImportDependency");
-					const CssIcssExportDependency = require("../dependencies/CssIcssExportDependency");
-					const CssIcssSymbolDependency = require("../dependencies/CssIcssSymbolDependency");
+					const CssImportDependency = require("../dependencies/css/CssImportDependency");
+					const CssUrlDependency = require("../dependencies/css/CssUrlDependency");
+					const CssIcssImportDependency = require("../dependencies/css/CssIcssImportDependency");
+					const CssIcssExportDependency = require("../dependencies/css/CssIcssExportDependency");
+					const CssIcssSymbolDependency = require("../dependencies/css/CssIcssSymbolDependency");
 
 					compilation.dependencyFactories.set(
 						CssImportDependency,
@@ -489,7 +547,10 @@ class CssModulesPlugin {
 									? resolveData.dependencies[0]
 									: undefined;
 
-							if (dependency instanceof getCssImportDependency()) {
+							if (
+								dependency !== undefined &&
+								isDependencyKind(dependency, "css-import")
+							) {
 								return new CssModule(
 									/** @type {CssModuleCreateData} */
 									({
@@ -506,7 +567,7 @@ class CssModulesPlugin {
 							return new CssModule(
 								/** @type {CssModuleCreateData} */
 								(
-									/** @type {unknown} */ ({
+									/** @type {Partial<CssModuleCreateData>} */ ({
 										...createData,
 										exportType
 									})
@@ -524,19 +585,21 @@ class CssModulesPlugin {
 				JavascriptModulesPlugin.getCompilationHooks(
 					compilation
 				).renderModuleContent.tap(PLUGIN_NAME, (source, module, ctx) => {
-					const injectCssStylesVar =
-						module instanceof ConcatenatedModule &&
-						module.modules.find(
-							(m) =>
-								m instanceof CssModule &&
+					const rootModule = module.getRootModule();
+					let injectCssStylesVar = false;
+					if (rootModule !== module) {
+						for (const m of module.getSourceModules()) {
+							if (
+								m.is("css") &&
 								m.exportType === "style" &&
 								!(/** @type {CssGenerator} */ (m.generator)._exportsOnly)
-						);
-					const injectHMRCode =
-						(module instanceof CssModule && module.hot) ||
-						(module instanceof ConcatenatedModule &&
-							module.rootModule instanceof CssModule &&
-							module.rootModule.hot);
+							) {
+								injectCssStylesVar = true;
+								break;
+							}
+						}
+					}
+					const injectHMRCode = rootModule.is("css") && rootModule.hot;
 
 					if (injectCssStylesVar) {
 						source = new ConcatSource(
@@ -546,9 +609,7 @@ class CssModulesPlugin {
 						);
 					}
 					if (injectHMRCode) {
-						const currentModule = /** @type {CssModule} */ (
-							module instanceof ConcatenatedModule ? module.rootModule : module
-						);
+						const currentModule = rootModule;
 						const exportType = currentModule.exportType || "link";
 						// When exportType !== "link", modules behave like JavaScript modules
 						if (["link", "style"].includes(exportType)) {
@@ -655,7 +716,7 @@ class CssModulesPlugin {
 					const { hash, chunk, codeGenerationResults, runtimeTemplate } =
 						options;
 
-					if (chunk instanceof HotUpdateChunk) return result;
+					if (chunk.isHotUpdate()) return result;
 
 					/** @type {CssModule[] | undefined} */
 					const modules = orderedCssModulesPerChunk.get(chunk);
@@ -720,7 +781,7 @@ class CssModulesPlugin {
 				 */
 				const addNoDomStyleRegistry = (set) => {
 					if (
-						compilation.runtimeTemplate.isNeutralPlatform() &&
+						collectsServerStyles(compilation) &&
 						!compilation.outputOptions.environment.globalThis
 					) {
 						set.add(RuntimeGlobals.global);
@@ -1265,6 +1326,29 @@ class CssModulesPlugin {
 			)
 		);
 	}
+
+	/**
+	 * The css-carrying chunks of `chunks`, in the order their rules cascade —
+	 * the order a `<link rel="stylesheet">` per chunk has to be written in.
+	 * @param {Iterable<Chunk>} chunks candidate chunks, a group's own or a narrower load order
+	 * @param {ChunkGroup} group the group whose module order decides the cascade
+	 * @param {ChunkGraph} chunkGraph chunk graph
+	 * @returns {Chunk[]} the css chunks, in cascade order
+	 */
+	static getCssChunksInCascadeOrder(chunks, group, chunkGraph) {
+		/** @type {{ chunk: Chunk, index: number, key: string }[]} */
+		const ordered = [];
+		for (const chunk of chunks) {
+			if (!CssModulesPlugin.chunkHasCss(chunk, chunkGraph)) continue;
+			ordered.push({
+				chunk,
+				index: firstCssModulePostOrderIndex(chunk, group, chunkGraph),
+				key: `${chunk.name || ""} ${chunk.id === null || chunk.id === undefined ? "" : chunk.id}`
+			});
+		}
+		ordered.sort(compareCssChunkOrder);
+		return ordered.map(({ chunk }) => chunk);
+	}
 }
 
 CssModulesPlugin.getCompilationHooks = createHooksRegistry(