@depup/webpack 5.111.1-depup.2 → 5.112.0-depup.1

package/lib/css/CssGenerator.js

@@ -12,10 +12,10 @@ const {
 	ReplaceSource,
 	SourceMapSource
 } = require("webpack-sources");
-const { UsageState } = require("../ExportsInfo");
-const Generator = require("../Generator");
-const InitFragment = require("../InitFragment");
-const ModuleFilenameHelpers = require("../ModuleFilenameHelpers");
+const ModuleFilenameHelpers = require("../devtool/ModuleFilenameHelpers");
+const { UsageState } = require("../graph/ExportsInfo");
+const isDependencyKind = require("../graph/isDependencyKind");
+const Generator = require("../module/Generator");
 const {
 	CSS_TEXT_TYPE,
 	CSS_TEXT_TYPES,
@@ -26,13 +26,11 @@ const {
 	JAVASCRIPT_TYPE,
 	JAVASCRIPT_TYPES,
 	NO_TYPES
-} = require("../ModuleSourceTypeConstants");
-const RuntimeGlobals = require("../RuntimeGlobals");
-const Template = require("../Template");
-const { getPresentKinds } = require("../TemplatedPathPlugin");
-const CssImportDependency = require("../dependencies/CssImportDependency");
-const HarmonyImportSideEffectDependency = require("../dependencies/HarmonyImportSideEffectDependency");
-const LoaderImportDependency = require("../dependencies/LoaderImportDependency");
+} = require("../module/ModuleSourceTypeConstants");
+const RuntimeGlobals = require("../runtime/RuntimeGlobals");
+const InitFragment = require("../template/InitFragment");
+const Template = require("../template/Template");
+const { getPresentKinds } = require("../template/TemplatedPathPlugin");
 
 const { encodeMappings } = require("../util/createMappings");
 const {
@@ -58,25 +56,25 @@ const URL_SCHEME_REGEXP = /^(?:data|https?):/;
  * } from "../../declarations/WebpackOptions"
  */
 /** @import { DependencyConstructor } from "../Compilation" */
-/** @import CodeGenerationResults from "../CodeGenerationResults" */
-/** @import Dependency from "../Dependency" */
+/** @import CodeGenerationResults from "../module/CodeGenerationResults" */
+/** @import Dependency from "../graph/Dependency" */
 /**
  * @import {
  * 	CssData,
  * 	DependencyTemplateContext,
  * 	CssDependencyTemplateContext
- * } from "../DependencyTemplate"
+ * } from "../template/DependencyTemplate"
  */
-/** @import { GenerateContext, UpdateHashContext } from "../Generator" */
+/** @import { GenerateContext, UpdateHashContext } from "../module/Generator" */
 /**
  * @import {
  * 	ConcatenationBailoutReasonContext,
  * 	SourceType,
  * 	SourceTypes
- * } from "../Module"
+ * } from "../module/Module"
  */
-/** @import ModuleGraph from "../ModuleGraph" */
-/** @import NormalModule from "../NormalModule" */
+/** @import ModuleGraph from "../graph/ModuleGraph" */
+/** @import NormalModule from "../module/NormalModule" */
 /** @import Hash from "../util/Hash" */
 /** @import { ModuleFactoryCacheEntry } from "./CssModulesPlugin" */
 /**
@@ -298,7 +296,13 @@ class CssGenerator extends Generator {
 		const cssData = {
 			esModule: /** @type {boolean} */ (this._esModule),
 			exports: new Map(),
-			exportLocs: new Map()
+			// Read only to map the exports code back to the CSS, so a build that
+			// asks for no source map neither fills nor keeps it.
+			exportLocs:
+				generateContext.type === JAVASCRIPT_TYPE &&
+				(module.useSourceMap || module.useSimpleSourceMap)
+					? new Map()
+					: undefined
 		};
 
 		this.sourceModule(module, initFragments, source, {
@@ -576,16 +580,12 @@ class CssGenerator extends Generator {
 					compilation.compiler.root
 				);
 
-				if (
-					/** @type {ExportLocsMap} */
-					(cssData.exportLocs).size > 0
-				) {
+				if (cssData.exportLocs !== undefined && cssData.exportLocs.size > 0) {
 					const cssOriginal = module.originalSource();
 					if (cssOriginal) {
 						const sourceMap = buildExportsSourceMap(
 							generatedJs,
-							/** @type {ExportLocsMap} */
-							(cssData.exportLocs),
+							cssData.exportLocs,
 							/** @type {string} */ (cssOriginal.source()),
 							sourceName
 						);
@@ -661,12 +661,16 @@ class CssGenerator extends Generator {
 			if (hasJs && (hasCssText || !needsCssText)) break;
 			if (
 				exportType === "link" &&
-				connection.dependency instanceof CssImportDependency
+				connection.dependency !== null &&
+				isDependencyKind(connection.dependency, "css-import")
 			) {
 				continue;
 			}
 
-			if (connection.dependency instanceof HarmonyImportSideEffectDependency) {
+			if (
+				connection.dependency !== null &&
+				isDependencyKind(connection.dependency, "esm-side-effect-import")
+			) {
 				continue;
 			}
 
@@ -682,7 +686,10 @@ class CssGenerator extends Generator {
 
 			// `importModule()` executes the module as JavaScript, and its dependency
 			// carries no origin module (`connectOrigin: false` in `LoaderPlugin`).
-			if (connection.dependency instanceof LoaderImportDependency) {
+			if (
+				connection.dependency !== null &&
+				isDependencyKind(connection.dependency, "loader-import")
+			) {
 				hasJs = true;
 				continue;
 			}
@@ -816,7 +823,7 @@ class CssGenerator extends Generator {
 		if (own !== undefined) return own;
 		if (exportType !== "text") return undefined;
 		for (const dep of module.dependencies) {
-			if (dep instanceof CssImportDependency) {
+			if (isDependencyKind(dep, "css-import")) {
 				const depModule = /** @type {NormalModule} */ (
 					moduleGraph.getModule(dep)
 				);
@@ -842,7 +849,7 @@ class CssGenerator extends Generator {
 		const parts = [];
 
 		for (const dep of module.dependencies) {
-			if (!(dep instanceof CssImportDependency)) continue;
+			if (!isDependencyKind(dep, "css-import")) continue;
 			const depModule = /** @type {CssModule} */ (moduleGraph.getModule(dep));
 			if (concatenationScope && concatenationScope.isModuleInScope(depModule)) {
 				continue;
@@ -877,7 +884,7 @@ class CssGenerator extends Generator {
 			const parts = [];
 
 			for (const dep of module.dependencies) {
-				if (!(dep instanceof CssImportDependency)) continue;
+				if (!isDependencyKind(dep, "css-import")) continue;
 				const depModule = /** @type {CssModule} */ (moduleGraph.getModule(dep));
 				if (!depModule) continue;
 				const depExportType = depModule.exportType;

package/lib/css/CssInjectStyleRuntimeModule.js

@@ -7,13 +7,13 @@
 
 const { SyncWaterfallHook } = require("tapable");
 /** @import Compilation from "../Compilation" */
-const RuntimeGlobals = require("../RuntimeGlobals");
-const RuntimeModule = require("../RuntimeModule");
-const Template = require("../Template");
+const RuntimeGlobals = require("../runtime/RuntimeGlobals");
+const RuntimeModule = require("../runtime/RuntimeModule");
+const Template = require("../template/Template");
 const createHooksRegistry = require("../util/createHooksRegistry");
 
-/** @import Chunk from "../Chunk" */
-/** @import { ReadOnlyRuntimeRequirements } from "../Module" */
+/** @import Chunk from "../graph/Chunk" */
+/** @import { ReadOnlyRuntimeRequirements } from "../module/Module" */
 
 /**
  * @typedef {object} CssInjectCompilationHooks
@@ -66,31 +66,37 @@ class CssInjectStyleRuntimeModule extends RuntimeModule {
 
 		const cst = runtimeTemplate.renderConst();
 		const isNeutralPlatform = runtimeTemplate.isNeutralPlatform();
-		// universal targets run in node too: collect styles for SSR retrieval
-		// instead of touching a DOM that isn't there
-		const injectGuard = isNeutralPlatform
-			? [
-					"if (typeof document === 'undefined') {",
-					Template.indent([
-						// "module-" keeps numeric module ids from enumerating in ascending
-						// order instead of the order the styles were applied in
-						`${runtimeTemplate.cssServerStyleRegistry()}["module-" + identifier] = css;`,
-						"return;"
-					]),
-					"}"
-				]
-			: [];
-		const removeGuard = isNeutralPlatform
-			? [
-					"if (typeof document === 'undefined') {",
-					Template.indent([
-						`${cst} styles = ${runtimeTemplate.cssServerStyleRegistry()};`,
-						'for (var i = 0; i < identifiers.length; i++) delete styles["module-" + identifiers[i]];',
-						"return;"
-					]),
-					"}"
-				]
-			: [];
+		// a node platform has no DOM, so it always collects; the neutral platform has
+		// to decide at runtime because the same bundle also runs in a browser
+		const withoutDocument =
+			!outputOptions.environment.document &&
+			compilation.compiler.platform.node === true;
+		const collectStyle = [
+			// "module-" keeps numeric module ids from enumerating in ascending
+			// order instead of the order the styles were applied in
+			`${runtimeTemplate.cssServerStyleRegistry()}["module-" + identifier] = css;`,
+			"return;"
+		];
+		const dropStyles = [
+			`${cst} styles = ${runtimeTemplate.cssServerStyleRegistry()};`,
+			'for (var i = 0; i < identifiers.length; i++) delete styles["module-" + identifiers[i]];',
+			"return;"
+		];
+		/**
+		 * @param {string[]} body the no-DOM branch
+		 * @returns {string[]} the branch, guarded when the platform is only maybe DOM-less
+		 */
+		const withoutDocumentGuard = (body) => {
+			if (withoutDocument) return body;
+			if (!isNeutralPlatform) return [];
+			return [
+				"if (typeof document === 'undefined') {",
+				Template.indent(body),
+				"}"
+			];
+		};
+		const injectGuard = withoutDocumentGuard(collectStyle);
+		const removeGuard = withoutDocumentGuard(dropStyles);
 
 		const createStyleElementCode = Template.asString([
 			`${cst} style = document.createElement('style');`,

package/lib/css/CssLoadingRuntimeModule.js

@@ -7,16 +7,16 @@
 
 const { SyncWaterfallHook } = require("tapable");
 /** @import Compilation from "../Compilation" */
-const RuntimeGlobals = require("../RuntimeGlobals");
-const RuntimeModule = require("../RuntimeModule");
-const Template = require("../Template");
+const RuntimeGlobals = require("../runtime/RuntimeGlobals");
+const RuntimeModule = require("../runtime/RuntimeModule");
+const Template = require("../template/Template");
 const compileBooleanMatcher = require("../util/compileBooleanMatcher");
 const createHooksRegistry = require("../util/createHooksRegistry");
 const { chunkHasCss } = require("./CssModulesPlugin");
 
-/** @import Chunk, { ChunkId } from "../Chunk" */
-/** @import ChunkGraph from "../ChunkGraph" */
-/** @import { ReadOnlyRuntimeRequirements } from "../Module" */
+/** @import Chunk, { ChunkId } from "../graph/Chunk" */
+/** @import ChunkGraph from "../graph/ChunkGraph" */
+/** @import { ReadOnlyRuntimeRequirements } from "../module/Module" */
 
 const createCompilationHooks = () => ({
 	/**
@@ -65,18 +65,20 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 	_getLoadableChunks() {
 		const chunk = /** @type {Chunk} */ (this.chunk);
 		const chunkGraph = /** @type {ChunkGraph} */ (this.chunkGraph);
+		const asyncChunks = chunk.getAllAsyncChunks();
 		/** @type {Set<ChunkId>} */
 		const initialChunkIds = new Set();
+		// A shared runtime can reach a stylesheet initially through one entry and
+		// asynchronously through another, where it still needs to be loaded.
 		for (const c of chunk.getAllInitialChunks()) {
-			if (chunkHasCss(c, chunkGraph)) {
+			if (chunkHasCss(c, chunkGraph) && !asyncChunks.has(c)) {
 				initialChunkIds.add(/** @type {ChunkId} */ (c.id));
 			}
 		}
 		// The predicate the stylesheet is emitted from: an `@import` external gives a
 		// chunk a css asset without a `CSS_TYPE` module, and it still has to load.
 		const conditionMap = chunkGraph.getChunkConditionMap(chunk, chunkHasCss);
-		// An initial chunk is installed before the handler can run, so it never
-		// reaches the loading path — with no other one there is nothing to load.
+		// With no stylesheets left to request asynchronously, the handler is unused.
 		const loadableConditionMap = { ...conditionMap };
 		for (const id of initialChunkIds) {
 			loadableConditionMap[id] = false;
@@ -169,6 +171,15 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 
 		const environment = compilation.outputOptions.environment;
 		const isNeutralPlatform = runtimeTemplate.isNeutralPlatform();
+		// only a node platform can read the stylesheet from disk; other document-less
+		// platforms (`target: "webworker"`) have no `fs`, so they keep the link code
+		const withoutDocument =
+			!environment.document && compilation.compiler.platform.node === true;
+		// Only a build that renders on a server meets a stylesheet it did not
+		// create, so every other build keeps the shorter adoption check.
+		const withServerRenderedLinks = this._runtimeRequirements.has(
+			RuntimeGlobals.hasServerRenderedStylesheets
+		);
 		const withPrefetch =
 			this._runtimeRequirements.has(RuntimeGlobals.prefetchChunkHandlers) &&
 			(environment.document || isNeutralPlatform) &&
@@ -238,6 +249,35 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 
 		const cst = runtimeTemplate.renderConst();
 		const lt = runtimeTemplate.renderLet();
+		// Whether an existing link still has rules on the way, and what its timeout
+		// then means: only a webpack-created link is an error, never an adopted one.
+		const adoptedLinkIsPending = withServerRenderedLinks
+			? 'fetching || (!link.sheet && link.href.indexOf(location.origin + "/") == 0)'
+			: "link.getAttribute(loadingAttribute)";
+		const timeoutEventType = withServerRenderedLinks
+			? "fetching ? 'timeout' : 'load'"
+			: "'timeout'";
+		// no DOM: read the emitted CSS via dynamic import('fs') (works on every node),
+		// collect it; never reject on a missing file
+		const readCssFromDisk =
+			withoutDocument || isNeutralPlatform
+				? `Promise.all([import('fs'), import('url')]).then(${runtimeTemplate.basicFunction(
+						"[{ readFile }, { URL }]",
+						[
+							`readFile(${runtimeTemplate.importMetaUrl("url")}, 'utf8', ${runtimeTemplate.basicFunction(
+								"err, content",
+								[
+									`if (!err) ${runtimeTemplate.cssServerStyleRegistry()}["chunk-" + chunkId] = content;`,
+									"loadingEnded({ type: 'load' });"
+								]
+							)});`
+						]
+						// No fs to import, or a url `readFile` rejects on sight (a CDN public
+						// path): nothing to collect, which is what a missing file already means.
+					)}).catch(${runtimeTemplate.expressionFunction(
+						"loadingEnded({ type: 'load' })"
+					)});`
+				: "";
 		const installedChunksObject = `{\n${Template.indent(
 			Array.from(initialChunkIds, (id) => `${JSON.stringify(id)}: 0`).join(
 				",\n"
@@ -279,7 +319,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 						runtimeTemplate.outputOptions.uniqueName
 					)};`
 				: "// data-webpack is not used as build has no uniqueName",
-			withLoading || withHmr
+			(withLoading && !withoutDocument) || withHmr
 				? Template.asString([
 						`${cst} loadingAttribute = "data-webpack-loading";`,
 						`${cst} loadStylesheet = ${runtimeTemplate.basicFunction(
@@ -324,13 +364,20 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 										"if(prev) return prev(event);"
 									])
 								)};`,
-								"if(link.getAttribute(loadingAttribute)) {",
+								...(withServerRenderedLinks
+									? [`${cst} fetching = link.getAttribute(loadingAttribute);`]
+									: []),
+								// An adopted stylesheet without a `sheet` has not applied yet, so a streamed
+								// server render no longer resolves before its rules are in.
+								`if(${adoptedLinkIsPending}) {`,
 								Template.indent([
-									`timeout = setTimeout(onLinkComplete.bind(null, undefined, { type: 'timeout', target: link }), ${loadTimeout});`,
+									// An adopted link that already failed replays no event, so its timeout
+									// resolves as a load: webpack did not create it and must not remove it.
+									`timeout = setTimeout(onLinkComplete.bind(null, undefined, { type: ${timeoutEventType}, target: link }), ${loadTimeout});`,
 									"link.onerror = onLinkComplete.bind(null, link.onerror);",
 									"link.onload = onLinkComplete.bind(null, link.onload);"
 								]),
-								"} else onLinkComplete(undefined, { type: 'load', target: link });", // We assume any existing stylesheet is render blocking
+								"} else onLinkComplete(undefined, { type: 'load', target: link });", // a cross-origin sheet never exposes `sheet`, so it keeps the render-blocking assumption
 								withHmr && withFetchPriority
 									? 'if (hmr && hmr.getAttribute("fetchpriority")) link.setAttribute("fetchpriority", hmr.getAttribute("fetchpriority"));'
 									: "",
@@ -419,39 +466,25 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 													"}"
 												]
 											)};`,
-											isNeutralPlatform
-												? "if (typeof document !== 'undefined') {"
-												: "",
-											Template.indent([
-												`loadStylesheet(chunkId, url, loadingEnded${
-													withFetchPriority ? ", fetchPriority" : ""
-												});`
-											]),
-											isNeutralPlatform
-												? Template.asString([
-														"} else {",
+											withoutDocument
+												? readCssFromDisk
+												: Template.asString([
+														isNeutralPlatform
+															? "if (typeof document !== 'undefined') {"
+															: "",
 														Template.indent([
-															// no DOM (Node SSR): read the emitted CSS via dynamic import('fs') (works on every node), collect it; never reject on a missing file
-															`Promise.all([import('fs'), import('url')]).then(${runtimeTemplate.basicFunction(
-																"[{ readFile }, { URL }]",
-																[
-																	`readFile(${runtimeTemplate.importMetaUrl("url")}, 'utf8', ${runtimeTemplate.basicFunction(
-																		"err, content",
-																		[
-																			`if (!err) ${runtimeTemplate.cssServerStyleRegistry()}["chunk-" + chunkId] = content;`,
-																			"loadingEnded({ type: 'load' });"
-																		]
-																	)});`
-																]
-																// No fs to import, or a url `readFile` rejects on sight (a CDN public
-																// path): nothing to collect, which is what a missing file already means.
-															)}).catch(${runtimeTemplate.expressionFunction(
-																"loadingEnded({ type: 'load' })"
-															)});`
+															`loadStylesheet(chunkId, url, loadingEnded${
+																withFetchPriority ? ", fetchPriority" : ""
+															});`
 														]),
-														"}"
+														isNeutralPlatform
+															? Template.asString([
+																	"} else {",
+																	Template.indent([readCssFromDisk]),
+																	"}"
+																])
+															: ""
 													])
-												: ""
 										]),
 										"} else installedChunks[chunkId] = 0;"
 									]),
@@ -598,7 +631,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 						}.css = ${runtimeTemplate.basicFunction(
 							"chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList, css",
 							[
-								isNeutralPlatform
+								isNeutralPlatform || withoutDocument
 									? Template.asString([
 											"if (typeof document === 'undefined') {",
 											Template.indent([

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" */
@@ -144,6 +144,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 +192,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 +224,7 @@ class CssModule extends NormalModule {
 
 makeSerializable(CssModule, "webpack/lib/CssModule");
 
+/** @type {Set<keyof ModuleKinds>} */
+CssModule.KINDS = new Set([...NormalModule.KINDS, "css"]);
+
 module.exports = CssModule;