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

package/lib/container/moduleFederationHooks.js

@@ -0,0 +1,32 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Alexander Akait @alexander-akait
+*/
+
+"use strict";
+
+const { SyncHook } = require("tapable");
+const createHooksRegistry = require("../util/createHooksRegistry");
+
+/** @import Dependency from "../Dependency" */
+
+const createCompilationHooks = () => ({
+	/**
+	 * @type {SyncHook<Dependency>}
+	 * @since 5.96.0
+	 */
+	addContainerEntryDependency: new SyncHook(["dependency"]),
+	/**
+	 * @type {SyncHook<Dependency>}
+	 * @since 5.96.0
+	 */
+	addFederationRuntimeDependency: new SyncHook(["dependency"])
+});
+
+/** @typedef {ReturnType<typeof createCompilationHooks>} CompilationHooks */
+
+// lives outside `ModuleFederationPlugin` so the plugins it applies can read the
+// hooks without requiring it back
+const getCompilationHooks = createHooksRegistry(createCompilationHooks);
+
+module.exports = getCompilationHooks;

package/lib/css/CssGenerator.js

@@ -15,6 +15,7 @@ const {
 const { UsageState } = require("../ExportsInfo");
 const Generator = require("../Generator");
 const InitFragment = require("../InitFragment");
+const ModuleFilenameHelpers = require("../ModuleFilenameHelpers");
 const {
 	CSS_TEXT_TYPE,
 	CSS_TEXT_TYPES,
@@ -33,49 +34,60 @@ const CssImportDependency = require("../dependencies/CssImportDependency");
 const HarmonyImportSideEffectDependency = require("../dependencies/HarmonyImportSideEffectDependency");
 
 const { encodeMappings } = require("../util/createMappings");
-const memoize = require("../util/memoize");
+const {
+	contextifySourceUrl,
+	makePathsAbsolute
+} = require("../util/identifier");
+const PropertyName = require("../util/property");
 const {
 	PUBLIC_PATH_FULL_HASH,
 	walkFullHashPlaceholders
 } = require("../util/publicPathPlaceholder");
+const CssModulesPlugin = require("./CssModulesPlugin");
 
 // Avoids `type.split("/")[0]` allocation on the `getTypes` hot path.
 const CSS_TYPE_PREFIX = `${CSS_TYPE}/`;
 
-/** @typedef {import("webpack-sources").Source} Source */
-/** @typedef {import("../../declarations/WebpackOptions").CssModuleGeneratorOptions} CssModuleGeneratorOptions */
-/** @typedef {import("../Compilation").DependencyConstructor} DependencyConstructor */
-/** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
-/** @typedef {import("../Dependency")} Dependency */
-/** @typedef {import("../DependencyTemplate").CssData} CssData */
-/** @typedef {import("../DependencyTemplate").DependencyTemplateContext} DependencyTemplateContext */
-/** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} CssDependencyTemplateContext */
-/** @typedef {import("../Generator").GenerateContext} GenerateContext */
-/** @typedef {import("../Generator").UpdateHashContext} UpdateHashContext */
-/** @typedef {import("../Module").BuildInfo} BuildInfo */
-/** @typedef {import("../Module").BuildMeta} BuildMeta */
-/** @typedef {import("../Module").ConcatenationBailoutReasonContext} ConcatenationBailoutReasonContext */
-/** @typedef {import("../Module").SourceType} SourceType */
-/** @typedef {import("../Module").SourceTypes} SourceTypes */
-/** @typedef {import("../ModuleGraph")} ModuleGraph */
-/** @typedef {import("../NormalModule")} NormalModule */
-/** @typedef {import("../util/Hash")} Hash */
-/** @typedef {import("./CssModulesPlugin").ModuleFactoryCacheEntry} ModuleFactoryCacheEntry */
-/** @typedef {import("./CssModule")} CssModule */
-/** @typedef {import("./CssModule").CssModuleBuildInfo} CssModuleBuildInfo */
-/** @typedef {import("./CssModule").CssModuleBuildMeta} CssModuleBuildMeta */
-/** @typedef {import("../Compilation")} Compilation */
-/** @typedef {import("../Module").RuntimeRequirements} RuntimeRequirements */
-/** @typedef {import("../../declarations/WebpackOptions").CssParserExportType} CssParserExportType */
+const URL_SCHEME_REGEXP = /^(?:data|https?):/;
+
+/** @import { Source, RawSourceMap } from "webpack-sources" */
+/**
+ * @import {
+ * 	CssModuleGeneratorOptions
+ * } from "../../declarations/WebpackOptions"
+ */
+/** @import { DependencyConstructor } from "../Compilation" */
+/** @import CodeGenerationResults from "../CodeGenerationResults" */
+/** @import Dependency from "../Dependency" */
+/**
+ * @import {
+ * 	CssData,
+ * 	DependencyTemplateContext,
+ * 	CssDependencyTemplateContext
+ * } from "../DependencyTemplate"
+ */
+/** @import { GenerateContext, UpdateHashContext } from "../Generator" */
+/**
+ * @import {
+ * 	ConcatenationBailoutReasonContext,
+ * 	SourceType,
+ * 	SourceTypes
+ * } from "../Module"
+ */
+/** @import ModuleGraph from "../ModuleGraph" */
+/** @import NormalModule from "../NormalModule" */
+/** @import Hash from "../util/Hash" */
+/** @import { ModuleFactoryCacheEntry } from "./CssModulesPlugin" */
+/**
+ * @import CssModule, {
+ * 	CssModuleBuildInfo,
+ * 	CssModuleBuildMeta
+ * } from "./CssModule"
+ */
 
 /** @typedef {{ line: number, column: number }} SourcePosition */
 /** @typedef {Map<string, SourcePosition>} ExportLocsMap */
 
-const getPropertyName = memoize(() => require("../util/property"));
-const getCssModulesPlugin = memoize(() => require("./CssModulesPlugin"));
-
-/** @typedef {import("webpack-sources").RawSourceMap} RawSourceMap */
-
 /**
  * Build a v3 source map mapping CSS-class export lines back to their selector positions.
  * @param {string} generatedJs the generated JS string
@@ -303,8 +315,13 @@ class CssGenerator extends Generator {
 				const generateContentCode = () => {
 					switch (exportType) {
 						case "style": {
-							const cssSource = this._renderCss(module, generateContext);
-							if (!cssSource) return "";
+							const rendered = this._renderCss(module, generateContext);
+							if (!rendered) return "";
+							const cssSource = this._renderEmbeddedSource(
+								rendered,
+								module,
+								generateContext
+							);
 
 							generateContext.runtimeRequirements.add(
 								RuntimeGlobals.cssInjectStyle
@@ -420,7 +437,7 @@ class CssGenerator extends Generator {
 						const source = new ConcatSource();
 						/** @type {Set<string>} */
 						const usedIdentifiers = new Set();
-						const { RESERVED_IDENTIFIER } = getPropertyName();
+						const { RESERVED_IDENTIFIER } = PropertyName;
 
 						if (defaultExport) {
 							const usedName = getUsedExportName("default");
@@ -549,8 +566,13 @@ class CssGenerator extends Generator {
 				}
 
 				const generatedJs = /** @type {string} */ (source.source());
-				const sourceName = module.readableIdentifier(
-					compilation.requestShortener
+				// Context-relative identifier, like `NormalModule.createSource` — so
+				// `SourceMapDevToolPlugin` can match the module and apply the
+				// devtool filename template instead of leaking this raw name
+				const sourceName = contextifySourceUrl(
+					/** @type {string} */ (compilation.options.context),
+					module.identifier(),
+					compilation.compiler.root
 				);
 
 				if (
@@ -595,9 +617,7 @@ class CssGenerator extends Generator {
 	generateError(error, module, generateContext) {
 		switch (generateContext.type) {
 			case JAVASCRIPT_TYPE: {
-				return new RawSource(
-					`throw new Error(${JSON.stringify(error.message)});`
-				);
+				return new RawSource(Generator.throwBuildErrorCode(error));
 			}
 			case CSS_TYPE: {
 				return new RawSource(`/**\n ${error.message} \n**/`);
@@ -734,9 +754,27 @@ class CssGenerator extends Generator {
 	 * @param {Hash} hash hash that will be modified
 	 * @param {UpdateHashContext} updateHashContext context for updating hash
 	 */
-	updateHash(hash, { module }) {
+	updateHash(hash, { module, runtimeTemplate }) {
 		hash.update(/** @type {boolean} */ (this._esModule).toString());
 		hash.update(/** @type {boolean} */ (this._exportsOnly).toString());
+		// Only a module embedded in JS gets an inlined map, which varies on devtool
+		// and its filename options without changing the source. `String`: templates
+		// may be functions.
+		const exportType = /** @type {CssModule} */ (module).exportType || "link";
+		if (runtimeTemplate && exportType !== "link") {
+			// What a tap varies on has to reach the key, or a changed option replays.
+			runtimeTemplate.compilation.hooks.embeddedSourceHash.call(module, hash);
+			const { compilation } = runtimeTemplate;
+			const devtool = compilation.options.devtool;
+			const outputOptions = compilation.outputOptions;
+			hash.update(
+				`|${typeof devtool === "string" ? devtool : ""}|${
+					outputOptions.devtoolNamespace || ""
+				}|${String(outputOptions.devtoolModuleFilenameTemplate || "")}|${String(
+					outputOptions.devtoolFallbackModuleFilenameTemplate || ""
+				)}`
+			);
+		}
 	}
 
 	/**
@@ -867,7 +905,6 @@ class CssGenerator extends Generator {
 		const compilation = generateContext.runtimeTemplate.compilation;
 		const undoPath = "";
 
-		const CssModulesPlugin = getCssModulesPlugin();
 		const hooks = CssModulesPlugin.getCompilationHooks(compilation);
 		return CssModulesPlugin.renderModule(
 			/** @type {CssModule} */ (module),
@@ -881,6 +918,88 @@ class CssGenerator extends Generator {
 		);
 	}
 
+	/**
+	 * Applies the devtool filename template to the sources of a map that is inlined
+	 * into the module's own output: `SourceMapDevToolPlugin` only rewrites maps of
+	 * emitted assets, so this one would keep raw module identifiers.
+	 * @param {RawSourceMap} map the map to rename the sources of
+	 * @param {GenerateContext} generateContext the generate context
+	 * @returns {RawSourceMap} the map with devtool source names
+	 */
+	_nameMapSources(map, generateContext) {
+		const { chunkGraph, runtimeTemplate } = generateContext;
+		const { compilation } = runtimeTemplate;
+		const outputOptions = compilation.outputOptions;
+		const absolutify = makePathsAbsolute.bindContextCache(
+			/** @type {string} */ (compilation.options.context),
+			compilation.compiler.root
+		);
+		const options = {
+			moduleFilenameTemplate:
+				outputOptions.devtoolModuleFilenameTemplate ||
+				ModuleFilenameHelpers.DEFAULT_MODULE_FILENAME_TEMPLATE,
+			namespace: outputOptions.devtoolNamespace || ""
+		};
+		const contextInfo = {
+			requestShortener: compilation.requestShortener,
+			chunkGraph,
+			hashFunction: outputOptions.hashFunction
+		};
+		/** @type {Set<string>} */
+		const usedNames = new Set();
+		const sources = map.sources.map((source) => {
+			if (!source.startsWith("webpack://")) return source;
+			const absoluteSource = absolutify(source.slice(10));
+			// Sources a loader reported for files that are not modules (e.g. a less
+			// partial) are templated as a path, like `SourceMapDevToolPlugin` does
+			const module = compilation.findModule(absoluteSource) || absoluteSource;
+			if (typeof module === "string" && URL_SCHEME_REGEXP.test(module)) {
+				return module;
+			}
+			let name = ModuleFilenameHelpers.createFilename(
+				module,
+				options,
+				contextInfo
+			);
+			// Same disambiguation as `SourceMapDevToolPlugin`: modules sharing a
+			// resource path (e.g. one file imported under two layers) collide
+			if (usedNames.has(name)) {
+				name = ModuleFilenameHelpers.createFilename(
+					module,
+					{
+						moduleFilenameTemplate:
+							outputOptions.devtoolFallbackModuleFilenameTemplate ||
+							ModuleFilenameHelpers.DEFAULT_FALLBACK_MODULE_FILENAME_TEMPLATE,
+						namespace: options.namespace
+					},
+					contextInfo
+				);
+				while (usedNames.has(name)) name += "*";
+			}
+			usedNames.add(name);
+			return name;
+		});
+
+		return { ...map, sources };
+	}
+
+	/**
+	 * Offer CSS bound for a JS string literal to `renderEmbeddedSource`. No `.css`
+	 * asset carries this text, so an asset-level minimizer never sees it.
+	 * @param {Source} cssSource the CSS source
+	 * @param {NormalModule} module the module
+	 * @param {GenerateContext} generateContext the generate context
+	 * @returns {Source} the source a tap returned, or the original
+	 */
+	_renderEmbeddedSource(cssSource, module, generateContext) {
+		const { compilation } = generateContext.runtimeTemplate;
+		return compilation._resolveEmbeddedSource(cssSource, {
+			type: CSS_TYPE,
+			hostType: JAVASCRIPT_TYPE,
+			module
+		});
+	}
+
 	/**
 	 * Convert a CSS Source into a JS string literal, splicing `__webpack_require__.h()` for `[fullhash]` placeholders.
 	 * @param {Source} cssSource the CSS source
@@ -891,11 +1010,17 @@ class CssGenerator extends Generator {
 	_cssToJsLiteral(cssSource, devtool, generateContext) {
 		const { source, map } = cssSource.sourceAndMap();
 		let content = /** @type {string} */ (source);
-		if (map) {
+		// A `renderEmbeddedSource` tap may hand back a mapped source whatever
+		// `devtool` says, so asking for no map at all is checked here too — this
+		// data URI would ship the sources inside the bundle. `hidden` is the same
+		// answer for the same reason.
+		const wanted = typeof devtool === "string" && !devtool.includes("hidden");
+		if (map && wanted) {
+			const namedMap = this._nameMapSources(map, generateContext);
 			const inlineMap =
 				typeof devtool === "string" && devtool.includes("nosources")
-					? { ...map, sourcesContent: undefined }
-					: map;
+					? { ...namedMap, sourcesContent: undefined }
+					: namedMap;
 			const base64Map = Buffer.from(JSON.stringify(inlineMap), "utf8").toString(
 				"base64"
 			);
@@ -949,6 +1074,15 @@ class CssGenerator extends Generator {
 			result = cssSource;
 		}
 
+		// Only text bound for a JS literal. `CSS_TEXT_TYPE` is an HTML inline
+		// `<style>` / `style=""`, and whether that is CSS at all depends on the
+		// element's `type` — a call the HTML layer makes and `htmlMinify` honors,
+		// which is not visible here. After the `@charset` prefix, so a tap sees a
+		// whole stylesheet.
+		if (result && asJsLiteral) {
+			result = this._renderEmbeddedSource(result, module, generateContext);
+		}
+
 		if (asJsLiteral) {
 			const devtool =
 				generateContext.runtimeTemplate.compilation.options.devtool;

package/lib/css/CssInjectStyleRuntimeModule.js

@@ -6,14 +6,14 @@
 "use strict";
 
 const { SyncWaterfallHook } = require("tapable");
-/** @typedef {import("../Compilation")} Compilation */
+/** @import Compilation from "../Compilation" */
 const RuntimeGlobals = require("../RuntimeGlobals");
 const RuntimeModule = require("../RuntimeModule");
 const Template = require("../Template");
 const createHooksRegistry = require("../util/createHooksRegistry");
 
-/** @typedef {import("../Chunk")} Chunk */
-/** @typedef {import("../Module").ReadOnlyRuntimeRequirements} ReadOnlyRuntimeRequirements */
+/** @import Chunk from "../Chunk" */
+/** @import { ReadOnlyRuntimeRequirements } from "../Module" */
 
 /**
  * @typedef {object} CssInjectCompilationHooks
@@ -63,7 +63,9 @@ class CssInjectStyleRuntimeModule extends RuntimeModule {
 			? [
 					"if (typeof document === 'undefined') {",
 					Template.indent([
-						`${runtimeTemplate.cssServerStyleRegistry()}[identifier] = css;`,
+						// "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;"
 					]),
 					"}"
@@ -74,7 +76,7 @@ class CssInjectStyleRuntimeModule extends RuntimeModule {
 					"if (typeof document === 'undefined') {",
 					Template.indent([
 						`${cst} styles = ${runtimeTemplate.cssServerStyleRegistry()};`,
-						"for (var i = 0; i < identifiers.length; i++) delete styles[identifiers[i]];",
+						'for (var i = 0; i < identifiers.length; i++) delete styles["module-" + identifiers[i]];',
 						"return;"
 					]),
 					"}"

package/lib/css/CssLoadingRuntimeModule.js

@@ -6,8 +6,7 @@
 "use strict";
 
 const { SyncWaterfallHook } = require("tapable");
-/** @typedef {import("../Compilation")} Compilation */
-const { CSS_TYPE } = require("../ModuleSourceTypeConstants");
+/** @import Compilation from "../Compilation" */
 const RuntimeGlobals = require("../RuntimeGlobals");
 const RuntimeModule = require("../RuntimeModule");
 const Template = require("../Template");
@@ -15,17 +14,34 @@ const compileBooleanMatcher = require("../util/compileBooleanMatcher");
 const createHooksRegistry = require("../util/createHooksRegistry");
 const { chunkHasCss } = require("./CssModulesPlugin");
 
-/** @typedef {import("../Chunk")} Chunk */
-/** @typedef {import("../Chunk").ChunkId} ChunkId */
-/** @typedef {import("../ChunkGraph")} ChunkGraph */
-/** @typedef {import("../Module").ReadOnlyRuntimeRequirements} ReadOnlyRuntimeRequirements */
+/** @import Chunk, { ChunkId } from "../Chunk" */
+/** @import { ReadOnlyRuntimeRequirements } from "../Module" */
+
+const createCompilationHooks = () => ({
+	/**
+	 * @type {SyncWaterfallHook<[string, Chunk]>}
+	 * @since 5.66.0
+	 */
+	createStylesheet: new SyncWaterfallHook(["source", "chunk"]),
+	/**
+	 * @type {SyncWaterfallHook<[string, Chunk]>}
+	 * @since 5.91.0
+	 */
+	linkPreload: new SyncWaterfallHook(["source", "chunk"]),
+	/**
+	 * @type {SyncWaterfallHook<[string, Chunk]>}
+	 * @since 5.91.0
+	 */
+	linkPrefetch: new SyncWaterfallHook(["source", "chunk"]),
+	/**
+	 * @type {SyncWaterfallHook<[string, Chunk]>}
+	 * @since 5.107.0
+	 */
+	linkInsert: new SyncWaterfallHook(["source", "chunk"])
+});
 
 /**
- * @typedef {object} CssLoadingRuntimeModulePluginHooks
- * @property {SyncWaterfallHook<[string, Chunk]>} createStylesheet
- * @property {SyncWaterfallHook<[string, Chunk]>} linkPreload
- * @property {SyncWaterfallHook<[string, Chunk]>} linkPrefetch
- * @property {SyncWaterfallHook<[string, Chunk]>} linkInsert
+ * @typedef {ReturnType<typeof createCompilationHooks>} CssLoadingRuntimeModulePluginHooks
  */
 
 class CssLoadingRuntimeModule extends RuntimeModule {
@@ -55,20 +71,14 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				uniqueName,
 				chunkLoadTimeout: loadTimeout,
 				charset,
-				importMetaName
+				resourceHints
 			}
 		} = compilation;
+		const dedupePrefetch = Boolean(resourceHints && resourceHints.dedupe);
 		const fn = RuntimeGlobals.ensureChunkHandlers;
-		const conditionMap = chunkGraph.getChunkConditionMap(
-			chunk,
-			/**
-			 * @param {Chunk} chunk the chunk
-			 * @param {ChunkGraph} chunkGraph the chunk graph
-			 * @returns {boolean} true, if the chunk has css
-			 */
-			(chunk, chunkGraph) =>
-				Boolean(chunkGraph.getChunkModulesIterableBySourceType(chunk, CSS_TYPE))
-		);
+		// 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);
 		const hasCssMatcher = compileBooleanMatcher(conditionMap);
 
 		const withLoading =
@@ -103,6 +113,15 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				// `parser.javascript.dynamicImportCssPreload` — CSS-only preload order.
 				chunk.hasChildByOrder(chunkGraph, "cssPreload", true, chunkHasCss));
 
+		// Under module output each stylesheet is a known file, so the urls are written
+		// out and read by id rather than built from the chunk id at runtime.
+		const cssUrls = runtimeTemplate.analyzableCssChunkUrls(
+			chunk,
+			chunkGraph,
+			_runtimeRequirements,
+			this
+		);
+
 		const { linkPreload, linkPrefetch, createStylesheet, linkInsert } =
 			CssLoadingRuntimeModule.getCompilationHooks(compilation);
 
@@ -157,7 +176,28 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				",\n"
 			)
 		)}\n}`;
+		// The url is read through a thunk so a runtime carrying many stylesheets builds
+		// only the one it loads.
+		/**
+		 * @param {string} id expression naming the chunk whose stylesheet is wanted
+		 * @returns {string} expression evaluating to its url
+		 */
+		const cssUrl = (id) =>
+			cssUrls === undefined || cssUrls === null
+				? `${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(${id})`
+				: `cssUrls[${id}]()`;
 		return Template.asString([
+			...(cssUrls
+				? [
+						`${cst} cssUrls = {\n${Template.indent(
+							Array.from(
+								cssUrls,
+								([id, url]) =>
+									`${JSON.stringify(String(id))}: ${runtimeTemplate.returningFunction(url)}`
+							).join(",\n")
+						)}\n};`
+					]
+				: []),
 			"// object to store loaded and loading chunks",
 			"// undefined = chunk not loaded, null = chunk preloaded/prefetched",
 			"// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded",
@@ -277,7 +317,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 											"promises.push(installedChunkData[2] = promise);",
 											"",
 											"// start chunk loading",
-											`${cst} url = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
+											`${cst} url = ${cssUrl("chunkId")};`,
 											"// create error before stack unwound to get useful stacktrace later",
 											`${cst} error = new Error();`,
 											`${cst} loadingEnded = ${runtimeTemplate.basicFunction(
@@ -328,7 +368,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 															`Promise.all([import('fs'), import('url')]).then(${runtimeTemplate.basicFunction(
 																"[{ readFile }, { URL }]",
 																[
-																	`readFile(new URL(url, ${importMetaName}.url), 'utf8', ${runtimeTemplate.basicFunction(
+																	`readFile(${runtimeTemplate.importMetaUrl("url")}, 'utf8', ${runtimeTemplate.basicFunction(
 																		"err, content",
 																		[
 																			`if (!err) ${runtimeTemplate.cssServerStyleRegistry()}["chunk-" + chunkId] = content;`,
@@ -383,10 +423,23 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 									"}",
 									'link.rel = "prefetch";',
 									'link.as = "style";',
-									`link.href = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`
+									`link.href = ${cssUrl("chunkId")};`
 								]),
 								chunk
 							),
+							dedupePrefetch
+								? Template.asString([
+										// Chrome re-requests a resource when a prefetch link is added
+										// after it was already (pre)loaded via markup; skip in that case.
+										`${cst} links = document.getElementsByTagName("link");`,
+										`for(${lt} i = 0; i < links.length; i++) {`,
+										Template.indent([
+											`${cst} l = links[i];`,
+											'if(l.href === link.href && (l.rel === "prefetch" || l.rel === "preload")) return;'
+										]),
+										"}"
+									])
+								: "",
 							"document.head.appendChild(link);"
 						]),
 						"}"
@@ -419,7 +472,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 									"}",
 									'link.rel = "preload";',
 									'link.as = "style";',
-									`link.href = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
+									`link.href = ${cssUrl("chunkId")};`,
 									crossOriginLoading
 										? crossOriginLoading === "use-credentials"
 											? 'link.crossOrigin = "use-credentials";'
@@ -499,7 +552,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 																		// best-effort: a non-file publicPath (e.g. a CDN) can't be read from disk, so skip
 																		"try {",
 																		Template.indent([
-																			`readFile(new URL(url, ${importMetaName}.url), 'utf8', ${runtimeTemplate.basicFunction(
+																			`readFile(${runtimeTemplate.importMetaUrl("url")}, 'utf8', ${runtimeTemplate.basicFunction(
 																				"err, content",
 																				[
 																					"if (!err) registry[key] = content;",
@@ -523,8 +576,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 								"// Read CSS removed chunks from update manifest",
 								`${cst} cssRemovedChunks = css && css.r;`,
 								`chunkIds.forEach(${runtimeTemplate.basicFunction("chunkId", [
-									`${cst} filename = ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
-									`${cst} url = ${RuntimeGlobals.publicPath} + filename;`,
+									`${cst} url = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
 									`${cst} oldTag = loadStylesheet(chunkId, url);`,
 									`if(!oldTag && !${withHmr} ) return;`,
 									"// Skip if CSS was removed",
@@ -577,13 +629,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 }
 
 CssLoadingRuntimeModule.getCompilationHooks = createHooksRegistry(
-	() =>
-		/** @type {CssLoadingRuntimeModulePluginHooks} */ ({
-			createStylesheet: new SyncWaterfallHook(["source", "chunk"]),
-			linkPreload: new SyncWaterfallHook(["source", "chunk"]),
-			linkPrefetch: new SyncWaterfallHook(["source", "chunk"]),
-			linkInsert: new SyncWaterfallHook(["source", "chunk"])
-		})
+	createCompilationHooks
 );
 
 module.exports = CssLoadingRuntimeModule;

package/lib/css/CssModule.js

@@ -8,15 +8,18 @@
 const NormalModule = require("../NormalModule");
 const makeSerializable = require("../util/makeSerializable");
 
-/** @typedef {import("../DependencyTemplate").CssData} CssData */
-/** @typedef {import("../Module")} Module */
-/** @typedef {import("../Module").BuildMeta} BuildMeta */
-/** @typedef {import("../NormalModule").NormalModuleBuildInfo} NormalModuleBuildInfo */
-/** @typedef {import("../NormalModule").NormalModuleCreateData} NormalModuleCreateData */
-/** @typedef {import("../RequestShortener")} RequestShortener */
+/** @import { CssData } from "../DependencyTemplate" */
+/** @import Module, { BuildMeta } from "../Module" */
+/**
+ * @import {
+ * 	NormalModuleBuildInfo,
+ * 	NormalModuleCreateData
+ * } from "../NormalModule"
+ */
+/** @import RequestShortener from "../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 */
-/** @typedef {import("../../declarations/WebpackOptions").CssParserExportType} CssParserExportType */
+/** @import { CssParserExportType } from "../../declarations/WebpackOptions" */
 
 /** @typedef {string | undefined} CssLayer */
 /** @typedef {string | undefined} Supports */