@depup/webpack 5.109.0-depup.0 → 5.110.1-depup.0

package/lib/css/CssModulesPlugin.js

@@ -13,7 +13,7 @@ const {
 	RawSource,
 	ReplaceSource
 } = require("webpack-sources");
-/** @typedef {import("../Compilation")} Compilation */
+/** @import Compilation, { ChunkHashContext } from "../Compilation" */
 const HotUpdateChunk = require("../HotUpdateChunk");
 const { CSS_IMPORT_TYPE, CSS_TYPE } = require("../ModuleSourceTypeConstants");
 const {
@@ -25,11 +25,6 @@ const {
 const NormalModule = require("../NormalModule");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
-const CssIcssExportDependency = require("../dependencies/CssIcssExportDependency");
-const CssIcssImportDependency = require("../dependencies/CssIcssImportDependency");
-const CssIcssSymbolDependency = require("../dependencies/CssIcssSymbolDependency");
-const CssImportDependency = require("../dependencies/CssImportDependency");
-const CssUrlDependency = require("../dependencies/CssUrlDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
 const { tryRunOrWebpackError } = require("../errors/HookWebpackError");
 const WebpackError = require("../errors/WebpackError");
@@ -40,34 +35,39 @@ 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 {
 	PUBLIC_PATH_AUTO,
 	walkFullHashPlaceholders
 } = require("../util/publicPathPlaceholder");
 const removeBOM = require("../util/removeBOM");
-const CssGenerator = require("./CssGenerator");
 const CssModule = require("./CssModule");
-const CssParser = require("./CssParser");
-
-/** @typedef {import("webpack-sources").Source} Source */
-/** @typedef {import("../config/defaults").OutputNormalizedWithDefaults} OutputOptions */
-/** @typedef {import("../Chunk")} Chunk */
-/** @typedef {import("../ChunkGraph")} ChunkGraph */
-/** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
-/** @typedef {import("../Compilation").ChunkHashContext} ChunkHashContext */
-/** @typedef {import("../Compiler")} Compiler */
-/** @typedef {import("./CssModule").Inheritance} Inheritance */
-/** @typedef {import("./CssModule").CssModuleCreateData} CssModuleCreateData */
-/** @typedef {import("../Module")} Module */
-/** @typedef {import("../Module").BuildInfo} BuildInfo */
-/** @typedef {import("./CssModule").CssModuleBuildInfo} CssModuleBuildInfo */
-/** @typedef {import("../Module").RuntimeRequirements} RuntimeRequirements */
-/** @typedef {import("../Template").RuntimeTemplate} RuntimeTemplate */
-/** @typedef {import("../Chunk").ChunkFilenameTemplate} ChunkFilenameTemplate */
-/** @typedef {import("../util/Hash")} Hash */
-/** @typedef {import("../Module").BuildMeta} BuildMeta */
+
+/** @import { Source } from "webpack-sources" */
+/**
+ * @import {
+ * 	OutputNormalizedWithDefaults as OutputOptions
+ * } from "../config/defaults"
+ */
+/** @import Chunk, { ChunkFilenameTemplate } from "../Chunk" */
+/** @import ChunkGraph from "../ChunkGraph" */
+/** @import CodeGenerationResults from "../CodeGenerationResults" */
+/** @import Compiler from "../Compiler" */
+/** @import RuntimeTemplate from "../RuntimeTemplate" */
+/** @import CssGenerator from "./CssGenerator" */
+/** @import CssParser from "./CssParser" */
+/**
+ * @import {
+ * 	Inheritance,
+ * 	CssModuleCreateData,
+ * 	CssModuleBuildInfo
+ * } from "./CssModule"
+ */
+/** @import Module, { RuntimeRequirements } from "../Module" */
+/** @import Hash from "../util/Hash" */
 
 /**
  * Defines the render context type used by this module.
@@ -95,14 +95,6 @@ const CssParser = require("./CssParser");
  * @property {Source} moduleSourceContent content
  */
 
-/**
- * Defines the compilation hooks type used by this module.
- * @typedef {object} CompilationHooks
- * @property {SyncWaterfallHook<[Source, Module, ChunkRenderContext]>} renderModulePackage
- * @property {SyncHook<[Chunk, Hash, ChunkHashContext]>} chunkHash
- * @property {SyncBailHook<[Chunk, Module[], Compilation], Module[] | undefined | void>} orderModules called for each CSS source type (CSS_IMPORT_TYPE, CSS_TYPE) with the chunk's modules pre-sorted by full module name; return an ordered `Module[]` to override the default import-order topological sort, or return `undefined` to keep the default
- */
-
 /**
  * Defines the module factory cache entry type used by this module.
  * @typedef {object} ModuleFactoryCacheEntry
@@ -112,10 +104,24 @@ const CssParser = require("./CssParser");
  * @property {CachedSource} source - The cached source
  */
 
-const getCssLoadingRuntimeModule = memoize(() =>
+// Lazy: this plugin is applied on every build (`experiments.css` defaults on),
+// but the parser and generator are only reached once CSS is in the graph — and
+// the parser pulls in the CSS tokenizer.
+const getCssParser = lazyModule(() => require("./CssParser"));
+const getCssGenerator = lazyModule(() => require("./CssGenerator"));
+const CSS_MODULE_TYPES = [
+	CSS_MODULE_TYPE,
+	CSS_MODULE_TYPE_GLOBAL,
+	CSS_MODULE_TYPE_MODULE,
+	CSS_MODULE_TYPE_AUTO
+];
+const getCssImportDependency = memoize(() =>
+	require("../dependencies/CssImportDependency")
+);
+const getCssLoadingRuntimeModule = lazyModule(() =>
 	require("./CssLoadingRuntimeModule")
 );
-const getCssInjectStyleRuntimeModule = memoize(() =>
+const getCssInjectStyleRuntimeModule = lazyModule(() =>
 	require("./CssInjectStyleRuntimeModule")
 );
 
@@ -220,6 +226,34 @@ const generatorValidationOptions = {
 
 const PLUGIN_NAME = "CssModulesPlugin";
 
+const createCompilationHooks = () => ({
+	/**
+	 * @type {SyncWaterfallHook<[Source, Module, ChunkRenderContext]>}
+	 * @since 5.94.0
+	 */
+	renderModulePackage: new SyncWaterfallHook([
+		"source",
+		"module",
+		"renderContext"
+	]),
+	/**
+	 * @type {SyncHook<[Chunk, Hash, ChunkHashContext]>}
+	 * @since 5.94.0
+	 */
+	chunkHash: new SyncHook(["chunk", "hash", "context"]),
+	/**
+	 * Called for each CSS source type (CSS_IMPORT_TYPE, CSS_TYPE) with the chunk's modules pre-sorted by full module name; return an ordered `Module[]` to override the default import-order topological sort, or return `undefined` to keep the default.
+	 * @type {SyncBailHook<[Chunk, Module[], Compilation], Module[] | undefined | void>}
+	 * @since 5.107.0
+	 */
+	orderModules: new SyncBailHook(["chunk", "modules", "compilation"])
+});
+
+/**
+ * Defines the compilation hooks type used by this module.
+ * @typedef {ReturnType<typeof createCompilationHooks>} CompilationHooks
+ */
+
 class CssModulesPlugin {
 	constructor() {
 		/** @type {WeakMap<Source, ModuleFactoryCacheEntry>} */
@@ -248,48 +282,72 @@ class CssModulesPlugin {
 					);
 				}
 				const hooks = CssModulesPlugin.getCompilationHooks(compilation);
-				compilation.dependencyFactories.set(
-					CssImportDependency,
-					normalModuleFactory
-				);
-				compilation.dependencyTemplates.set(
-					CssImportDependency,
-					new CssImportDependency.Template()
-				);
-				compilation.dependencyFactories.set(
-					CssUrlDependency,
-					normalModuleFactory
-				);
-				compilation.dependencyTemplates.set(
-					CssUrlDependency,
-					new CssUrlDependency.Template()
-				);
-				compilation.dependencyFactories.set(
-					CssIcssImportDependency,
-					normalModuleFactory
-				);
-				compilation.dependencyTemplates.set(
-					CssIcssImportDependency,
-					new CssIcssImportDependency.Template()
-				);
-				compilation.dependencyTemplates.set(
-					CssIcssExportDependency,
-					new CssIcssExportDependency.Template()
-				);
-				compilation.dependencyTemplates.set(
-					CssIcssSymbolDependency,
-					new CssIcssSymbolDependency.Template()
-				);
+				let dependenciesRegistered = false;
+				// runs when the first css module is prepared, so a build without
+				// css never loads these dependency classes
+				const registerDependencies = () => {
+					// every css type taps this — the registration is shared
+					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");
+
+					compilation.dependencyFactories.set(
+						CssImportDependency,
+						normalModuleFactory
+					);
+					compilation.dependencyTemplates.set(
+						CssImportDependency,
+						new CssImportDependency.Template()
+					);
+					compilation.dependencyFactories.set(
+						CssUrlDependency,
+						normalModuleFactory
+					);
+					compilation.dependencyTemplates.set(
+						CssUrlDependency,
+						new CssUrlDependency.Template()
+					);
+					compilation.dependencyFactories.set(
+						CssIcssImportDependency,
+						normalModuleFactory
+					);
+					compilation.dependencyTemplates.set(
+						CssIcssImportDependency,
+						new CssIcssImportDependency.Template()
+					);
+					compilation.dependencyTemplates.set(
+						CssIcssExportDependency,
+						new CssIcssExportDependency.Template()
+					);
+					compilation.dependencyTemplates.set(
+						CssIcssSymbolDependency,
+						new CssIcssSymbolDependency.Template()
+					);
+				};
+				for (const type of CSS_MODULE_TYPES) {
+					normalModuleFactory.hooks.prepareModuleType
+						.for(type)
+						.tap(PLUGIN_NAME, registerDependencies);
+				}
 				compilation.dependencyTemplates.set(
 					StaticExportsDependency,
 					new StaticExportsDependency.Template()
 				);
-				for (const type of [
-					CSS_MODULE_TYPE,
-					CSS_MODULE_TYPE_GLOBAL,
-					CSS_MODULE_TYPE_MODULE,
-					CSS_MODULE_TYPE_AUTO
-				]) {
+				preloadModuleType(
+					normalModuleFactory,
+					PLUGIN_NAME,
+					CSS_MODULE_TYPES.map((type) => [
+						type,
+						[getCssParser, getCssGenerator]
+					])
+				);
+
+				for (const type of CSS_MODULE_TYPES) {
 					normalModuleFactory.hooks.createParser
 						.for(type)
 						.tap(PLUGIN_NAME, (parserOptions) => {
@@ -351,7 +409,7 @@ class CssModulesPlugin {
 								}
 							}
 
-							return new CssParser({
+							return new (getCssParser.loaded())({
 								defaultMode,
 								...parserOptions
 							});
@@ -414,7 +472,7 @@ class CssModulesPlugin {
 								}
 							}
 
-							return new CssGenerator(
+							return new (getCssGenerator.loaded())(
 								generatorOptions,
 								compilation.moduleGraph
 							);
@@ -431,7 +489,7 @@ class CssModulesPlugin {
 									? resolveData.dependencies[0]
 									: undefined;
 
-							if (dependency instanceof CssImportDependency) {
+							if (dependency instanceof getCssImportDependency()) {
 								return new CssModule(
 									/** @type {CssModuleCreateData} */
 									({
@@ -522,7 +580,10 @@ class CssModulesPlugin {
 								"",
 								`var __webpack_css_exports__ = ${stringifiedExports};`,
 								"// only invalidate when locals change",
-								`if (${ctx.runtimeTemplate.optionalChaining("module.hot.data", "__webpack_css_exports__")} && module.hot.data.__webpack_css_exports__ != __webpack_css_exports__) {`,
+								`if (${ctx.runtimeTemplate.optionalChaining(
+									"module.hot.data",
+									"__webpack_css_exports__"
+								)} && module.hot.data.__webpack_css_exports__ != __webpack_css_exports__) {`,
 								Template.indent("module.hot.invalidate();"),
 								"} else {",
 								Template.indent("module.hot.accept();"),
@@ -660,6 +721,33 @@ class CssModulesPlugin {
 							: globalChunkLoading;
 					return chunkLoading === "jsonp" || chunkLoading === "import";
 				};
+				/**
+				 * The neutral platform's no-DOM branch stores styles on the global.
+				 * @param {RuntimeRequirements} set runtime requirements
+				 */
+				const addNoDomStyleRegistry = (set) => {
+					if (
+						compilation.runtimeTemplate.isNeutralPlatform() &&
+						!compilation.outputOptions.environment.globalThis
+					) {
+						set.add(RuntimeGlobals.global);
+					}
+				};
+				/**
+				 * Whether a reachable chunk carries css, which is what the loading branch is
+				 * rendered from — a css module in the graph is not enough.
+				 * @param {Chunk} chunk the chunk
+				 * @param {ChunkGraph} chunkGraph the chunk graph
+				 * @returns {boolean} true, when there is a stylesheet to load
+				 */
+				const hasCssToLoad = (chunk, chunkGraph) => {
+					for (const referenced of chunk.getAllReferencedChunks()) {
+						if (CssModulesPlugin.chunkHasCss(referenced, chunkGraph)) {
+							return true;
+						}
+					}
+					return false;
+				};
 				/** @type {WeakSet<Chunk>} */
 				const onceForChunkSet = new WeakSet();
 				/**
@@ -672,8 +760,11 @@ class CssModulesPlugin {
 					onceForChunkSet.add(chunk);
 					if (!isEnabledForChunk(chunk)) return;
 
-					const CssLoadingRuntimeModule = getCssLoadingRuntimeModule();
-					compilation.addRuntimeModule(chunk, new CssLoadingRuntimeModule(set));
+					compilation.addLazyRuntimeModule(
+						chunk,
+						getCssLoadingRuntimeModule,
+						(CssLoadingRuntimeModule) => new CssLoadingRuntimeModule(set)
+					);
 				};
 				compilation.hooks.runtimeRequirementInTree
 					.for(RuntimeGlobals.hasCssModules)
@@ -682,22 +773,29 @@ class CssModulesPlugin {
 					.for(RuntimeGlobals.ensureChunkHandlers)
 					.tap(PLUGIN_NAME, (chunk, set, { chunkGraph }) => {
 						if (!isEnabledForChunk(chunk)) return;
+						if (!hasCssToLoad(chunk, chunkGraph)) return;
+
+						set.add(RuntimeGlobals.hasOwnProperty);
+						// A baked url carries where the stylesheet is, so neither the public
+						// path nor the name lookup is read for it. Asked exactly as the
+						// loading runtime module asks, so the two always agree.
 						if (
-							!chunkGraph.hasModuleInGraph(
+							compilation.runtimeTemplate.analyzableCssChunkUrls(
 								chunk,
-								(m) =>
-									m.type === CSS_MODULE_TYPE ||
-									m.type === CSS_MODULE_TYPE_GLOBAL ||
-									m.type === CSS_MODULE_TYPE_MODULE ||
-									m.type === CSS_MODULE_TYPE_AUTO
-							)
+								chunkGraph,
+								set
+							) === null
 						) {
-							return;
+							set.add(RuntimeGlobals.publicPath);
+							set.add(RuntimeGlobals.getChunkCssFilename);
 						}
-
-						set.add(RuntimeGlobals.hasOwnProperty);
-						set.add(RuntimeGlobals.publicPath);
-						set.add(RuntimeGlobals.getChunkCssFilename);
+						// Asked here rather than for `hasCssModules`: the loading runtime
+						// module renders nothing without loading or hmr, so declaring it
+						// there ships the polyfill to a build that never reads it.
+						addNoDomStyleRegistry(set);
+						// A chunk whose only stylesheet is an `@import` external has no css
+						// module, so `hasCssModules` never asks for the loading runtime.
+						handler(chunk, set);
 					});
 				compilation.hooks.runtimeRequirementInTree
 					.for(RuntimeGlobals.hmrDownloadUpdateHandlers)
@@ -717,6 +815,7 @@ class CssModulesPlugin {
 						}
 						set.add(RuntimeGlobals.publicPath);
 						set.add(RuntimeGlobals.getChunkCssFilename);
+						addNoDomStyleRegistry(set);
 					});
 
 				compilation.hooks.runtimeRequirementInTree
@@ -724,11 +823,12 @@ class CssModulesPlugin {
 					.tap(PLUGIN_NAME, (chunk, set) => {
 						// Same as above: namespace stub is enough.
 						set.add(RuntimeGlobals.requireScope);
-						const CssInjectStyleRuntimeModule =
-							getCssInjectStyleRuntimeModule();
-						compilation.addRuntimeModule(
+						addNoDomStyleRegistry(set);
+						compilation.addLazyRuntimeModule(
 							chunk,
-							new CssInjectStyleRuntimeModule(set)
+							getCssInjectStyleRuntimeModule,
+							(CssInjectStyleRuntimeModule) =>
+								new CssInjectStyleRuntimeModule(set)
 						);
 					});
 			}
@@ -1175,16 +1275,7 @@ class CssModulesPlugin {
 }
 
 CssModulesPlugin.getCompilationHooks = createHooksRegistry(
-	() =>
-		/** @type {CompilationHooks} */ ({
-			renderModulePackage: new SyncWaterfallHook([
-				"source",
-				"module",
-				"renderContext"
-			]),
-			chunkHash: new SyncHook(["chunk", "hash", "context"]),
-			orderModules: new SyncBailHook(["chunk", "modules", "compilation"])
-		})
+	createCompilationHooks
 );
 
 module.exports = CssModulesPlugin;