webpack 5.107.1 → 5.108.0

package/lib/dependencies/{HtmlScriptSrcDependency.js → HtmlEntryDependency.js}

@@ -9,8 +9,8 @@ const {
 	CSS_TYPE,
 	JAVASCRIPT_TYPE
 } = require("../ModuleSourceTypeConstants");
+const HtmlGenerator = require("../html/HtmlGenerator");
 const makeSerializable = require("../util/makeSerializable");
-const CssUrlDependency = require("./CssUrlDependency");
 const ModuleDependency = require("./ModuleDependency");
 
 /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
@@ -20,21 +20,28 @@ const ModuleDependency = require("./ModuleDependency");
 /** @typedef {import("../DependencyTemplate").DependencyTemplateContext} DependencyTemplateContext */
 /** @typedef {import("../Entrypoint")} Entrypoint */
 /** @typedef {import("../javascript/JavascriptParser").Range} Range */
-/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
-/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
+/** @typedef {"script" | "script-module" | "modulepreload" | "stylesheet"} HtmlEntryElementKind */
 
-/** @typedef {"script-classic" | "script-module" | "modulepreload" | "stylesheet"} HtmlScriptElementKind */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext<[string, string, HtmlEntryElementKind, number, number, boolean, string, number, boolean, number, (Range | null), (Range | null)]>} ObjectDeserializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext<[string, string, HtmlEntryElementKind, number, number, boolean, string, number, boolean, number, (Range | null), (Range | null)]>} ObjectSerializerContext */
 
-class HtmlScriptSrcDependency extends ModuleDependency {
+class HtmlEntryDependency extends ModuleDependency {
 	/**
-	 * Creates an instance of HtmlScriptSrcDependency.
+	 * Creates an instance of HtmlEntryDependency.
 	 * @param {string} request request
 	 * @param {Range} range range of the attribute value in the source
 	 * @param {string} entryName name of the entry this script src is bundled into
 	 * @param {string=} category dependency category used for resolving and grouping
-	 * @param {HtmlScriptElementKind=} elementKind shape of the originating HTML element; used when expanding sibling tags for split/runtime chunks
+	 * @param {HtmlEntryElementKind=} elementKind shape of the originating HTML element; used when expanding sibling tags for split/runtime chunks
 	 * @param {number=} tagStart position of the opening `<` of the originating tag in the source; sibling tags emitted for additional entry chunks are inserted right before this
 	 * @param {number=} tagOpenEnd position of the character immediately after the opening tag's `>` in the source; combined with `tagStart` this lets the template clone the original opening tag verbatim (preserving attributes like `nonce`, `crossorigin`, `referrerpolicy`, `defer`, `async`) when generating sibling tags
+	 * @param {boolean=} tagIsNative whether the originating element is the native tag for `elementKind` (`<script>` / `<link>`); decided at parse time from the tag name so the template needn't re-parse the source text. A custom element mapped to a `script`/`stylesheet` source `type` is non-native and gets a freshly synthesized sibling tag instead of a verbatim clone
+	 * @param {string=} copyableAttrsText the originating tag's `nonce`/`crossorigin`/`referrerpolicy` attribute source spans (leading-space-prefixed, in that fixed order), captured at parse time so synthesized sibling `<link>`/`<script>` tags carry the same CSP/fetch policy without the template re-parsing the tag text; empty when none are present
+	 * @param {number=} tagNameEnd position right after the originating tag's name (e.g. after `<script`), captured at parse time so the template can insert a `crossorigin` attribute without re-scanning the tag text for the name boundary
+	 * @param {boolean=} hasOwnCrossOrigin whether the originating tag already carries a `crossorigin` attribute; when true the author's value wins and `output.crossOriginLoading` is not applied
+	 * @param {number=} cssAnchor source offset of the first `<script>` tag; a later entry's injected stylesheet `<link>`s are inserted here so CSS loads before any script. -1 when the document has no script
+	 * @param {Range | null=} integrityRange source span of the originating tag's `integrity` attribute (offsets relative to `tagStart`, leading whitespace and quotes included), captured at parse time so cloned sibling tags can drop it without re-parsing; null when absent
+	 * @param {Range | null=} typeValueRange source span of the originating tag's `type` attribute value (offsets relative to `tagStart`), captured at parse time so `script-module` sibling clones can force `type="module"` in place; null when there is no value to rewrite (a `type="module"` is then inserted instead)
 	 */
 	constructor(
 		request,
@@ -43,23 +50,45 @@ class HtmlScriptSrcDependency extends ModuleDependency {
 		category,
 		elementKind,
 		tagStart,
-		tagOpenEnd
+		tagOpenEnd,
+		tagIsNative,
+		copyableAttrsText,
+		tagNameEnd,
+		hasOwnCrossOrigin,
+		cssAnchor,
+		integrityRange,
+		typeValueRange
 	) {
 		super(request);
 		this.range = range;
+		/** @type {string} */
 		this.entryName = entryName;
 		/** @type {string} */
 		this._category = category || "commonjs";
-		/** @type {HtmlScriptElementKind} */
-		this.elementKind = elementKind || "script-classic";
+		/** @type {HtmlEntryElementKind} */
+		this.elementKind = elementKind || "script";
 		/** @type {number} */
 		this.tagStart = tagStart === undefined ? -1 : tagStart;
 		/** @type {number} */
 		this.tagOpenEnd = tagOpenEnd === undefined ? -1 : tagOpenEnd;
+		/** @type {boolean} */
+		this.tagIsNative = tagIsNative !== false;
+		/** @type {string} */
+		this.copyableAttrsText = copyableAttrsText || "";
+		/** @type {number} */
+		this.tagNameEnd = tagNameEnd === undefined ? -1 : tagNameEnd;
+		/** @type {boolean} */
+		this.hasOwnCrossOrigin = hasOwnCrossOrigin === true;
+		/** @type {number} */
+		this.cssAnchor = cssAnchor === undefined ? -1 : cssAnchor;
+		/** @type {Range | null} */
+		this.integrityRange = integrityRange || null;
+		/** @type {Range | null} */
+		this.typeValueRange = typeValueRange || null;
 	}
 
 	get type() {
-		return "html script src";
+		return "html entry";
 	}
 
 	get category() {
@@ -71,12 +100,19 @@ class HtmlScriptSrcDependency extends ModuleDependency {
 	 * @param {ObjectSerializerContext} context context
 	 */
 	serialize(context) {
-		const { write } = context;
-		write(this.entryName);
-		write(this._category);
-		write(this.elementKind);
-		write(this.tagStart);
-		write(this.tagOpenEnd);
+		context
+			.write(this.entryName)
+			.write(this._category)
+			.write(this.elementKind)
+			.write(this.tagStart)
+			.write(this.tagOpenEnd)
+			.write(this.tagIsNative)
+			.write(this.copyableAttrsText)
+			.write(this.tagNameEnd)
+			.write(this.hasOwnCrossOrigin)
+			.write(this.cssAnchor)
+			.write(this.integrityRange)
+			.write(this.typeValueRange);
 		super.serialize(context);
 	}
 
@@ -85,49 +121,33 @@ class HtmlScriptSrcDependency extends ModuleDependency {
 	 * @param {ObjectDeserializerContext} context context
 	 */
 	deserialize(context) {
-		const { read } = context;
-		this.entryName = read();
-		this._category = read();
-		this.elementKind = read();
-		this.tagStart = read();
-		this.tagOpenEnd = read();
-		super.deserialize(context);
+		this.entryName = context.read();
+		const c1 = context.rest;
+		this._category = c1.read();
+		const c2 = c1.rest;
+		this.elementKind = c2.read();
+		const c3 = c2.rest;
+		this.tagStart = c3.read();
+		const c4 = c3.rest;
+		this.tagOpenEnd = c4.read();
+		const c5 = c4.rest;
+		this.tagIsNative = c5.read();
+		const c6 = c5.rest;
+		this.copyableAttrsText = c6.read();
+		const c7 = c6.rest;
+		this.tagNameEnd = c7.read();
+		const c8 = c7.rest;
+		this.hasOwnCrossOrigin = c8.read();
+		const c9 = c8.rest;
+		this.cssAnchor = c9.read();
+		const c10 = c9.rest;
+		this.integrityRange = c10.read();
+		const c11 = c10.rest;
+		this.typeValueRange = c11.read();
+		super.deserialize(c11.rest);
 	}
 }
 
-/**
- * @param {Chunk} chunk a chunk
- * @param {import("../Compilation")} compilation compilation
- * @param {"javascript" | "css"} contentHashType which content hash to plug into the filename template
- * @returns {string} chunk filename path (no public-path prefix)
- */
-const getChunkFilename = (chunk, compilation, contentHashType) => {
-	const outputOptions = compilation.outputOptions;
-	let filenameTemplate;
-	if (contentHashType === "css") {
-		// For a CSS-typed chunk, use the same template the CSS pipeline
-		// will use when it actually emits the `.css` file, so the `<link
-		// rel="stylesheet" href>` URL we write into the HTML matches the
-		// asset on disk.
-		filenameTemplate =
-			require("../css/CssModulesPlugin").getChunkFilenameTemplate(
-				chunk,
-				outputOptions
-			);
-	} else {
-		filenameTemplate =
-			chunk.filenameTemplate ||
-			(chunk.canBeInitial()
-				? outputOptions.filename
-				: outputOptions.chunkFilename);
-	}
-
-	return compilation.getPath(filenameTemplate, {
-		chunk,
-		contentHashType
-	});
-};
-
 /**
  * @param {Entrypoint} entrypoint entrypoint
  * @returns {Chunk[]} every chunk this entrypoint needs in load order: the
@@ -240,27 +260,25 @@ const chunkHasCss = (chunk, chunkGraph) =>
 	);
 
 /**
- * Compare two chunks for a deterministic tie-break in CSS link ordering.
- * `chunk.name` and `chunk.id` are both stable strings (when present);
- * one of them is set for every chunk webpack emits. We can't rely on
- * `Array.prototype.sort` being stable — webpack still supports Node
- * 10.13 where V8's sort is not guaranteed stable for arrays larger
- * than ten elements — so any time `firstCssModulePostOrderIndex`
- * returns the same value for two chunks (most commonly when several
- * chunks have no reachable CSS module in the entrypoint's dependency
- * walk and all map to `Infinity`) this comparator picks the canonical
- * order.
- * @param {Chunk} a first chunk
- * @param {Chunk} b second chunk
- * @returns {-1 | 0 | 1} ordering
+ * Deterministic tie-break key for CSS link ordering. `chunk.name` and
+ * `chunk.id` are both stable strings (when present); one of them is set for
+ * every chunk webpack emits. We can't rely on `Array.prototype.sort` being
+ * stable — webpack still supports Node 10.13 where V8's sort is not guaranteed
+ * stable for arrays larger than ten elements — so any time
+ * `firstCssModulePostOrderIndex` returns the same value for two chunks (most
+ * commonly when several chunks have no reachable CSS module in the entrypoint's
+ * dependency walk and all map to `Infinity`) this key picks the canonical order.
+ * Computed once per chunk when building the sort array rather than per
+ * comparison.
+ * @param {Chunk} chunk chunk
+ * @returns {string} the tie-break key
  */
-const compareChunksForCssTieBreak = (a, b) => {
-	const an = `${a.name || ""} ${a.id === null || a.id === undefined ? "" : a.id}`;
-	const bn = `${b.name || ""} ${b.id === null || b.id === undefined ? "" : b.id}`;
-	if (an < bn) return -1;
-	if (an > bn) return 1;
-	return 0;
-};
+const cssChunkSortKey = (chunk) =>
+	`${chunk.name || ""} ${
+		chunk.id === null || chunk.id === undefined ? "" : chunk.id
+	}`;
+
+const CSS_SOURCE_TYPES = [CSS_TYPE, CSS_IMPORT_TYPE];
 
 /**
  * Smallest post-order index among the CSS modules of a chunk, taken
@@ -285,7 +303,7 @@ const compareChunksForCssTieBreak = (a, b) => {
  */
 const firstCssModulePostOrderIndex = (chunk, entrypoint, chunkGraph) => {
 	let min = Number.POSITIVE_INFINITY;
-	for (const sourceType of [CSS_TYPE, CSS_IMPORT_TYPE]) {
+	for (const sourceType of CSS_SOURCE_TYPES) {
 		const modules = chunkGraph.getChunkModulesIterableBySourceType(
 			chunk,
 			sourceType
@@ -299,33 +317,44 @@ const firstCssModulePostOrderIndex = (chunk, entrypoint, chunkGraph) => {
 	return min;
 };
 
-const COPYABLE_LINK_ATTRS = ["nonce", "crossorigin", "referrerpolicy"];
-
 /**
  * Build a fresh `<link rel="stylesheet" href="…">` for a CSS chunk that
  * was pulled in by a `<script src>` entry — the originating tag was a
  * `<script>`, but the chunk is CSS so cloning the script tag verbatim
- * would produce nonsense (`<script src="…\.css">`). Copy
- * `nonce`/`crossorigin`/`referrerpolicy` from the original element so
- * the same CSP and fetch policy applies; `defer`/`async`/`type` have no
- * meaning on `<link>` and are dropped.
- * @param {string} originalTag the originating `<script>`/`<link>` tag's source text
+ * would produce nonsense (`<script src="…\.css">`). `extra` carries the
+ * `nonce`/`crossorigin`/`referrerpolicy` source spans captured from the
+ * original element at parse time so the same CSP and fetch policy applies;
+ * `defer`/`async`/`type` have no meaning on `<link>` and are dropped.
+ * @param {string} extra the copyable CSP/fetch attribute source text (leading-space-prefixed, or empty)
  * @param {string} href URL for the stylesheet
+ * @param {string} crossOrigin ` crossorigin="…"` to append from `output.crossOriginLoading`, or `""`
  * @returns {string} the sibling `<link>` tag's HTML
  */
-const buildStylesheetLink = (originalTag, href) => {
-	let extra = "";
-	for (const attr of COPYABLE_LINK_ATTRS) {
-		// Match ` <attr>`, ` <attr>=value`, ` <attr>="value"`, ` <attr>='value'`.
-		const re = new RegExp(
-			`\\s${attr}(?:\\s*=\\s*(?:"[^"]*"|'[^']*'|[^\\s>]+))?(?=[\\s/>])`,
-			"i"
-		);
-		const m = originalTag.match(re);
-		if (m) extra += m[0];
-	}
+const buildStylesheetLink = (extra, href, crossOrigin) => {
 	const safeHref = href.replace(/"/g, "&quot;");
-	return `<link rel="stylesheet" href="${safeHref}"${extra}>`;
+	return `<link rel="stylesheet" href="${safeHref}"${extra}${crossOrigin}>`;
+};
+
+/**
+ * Build a fresh `<script src="…">` for a JS chunk pulled in by a custom
+ * (non-`<script>`) element that the user mapped to `type: "script"` /
+ * `"script-module"`. Cloning the custom element verbatim and appending
+ * `</script>` (as `cloneTagWithUrl` does for a real `<script>`) would emit
+ * mismatched, non-executing markup such as `<my-script src="…"></script>`,
+ * so synthesize a real script element instead — copying only the CSP/fetch
+ * attributes (`extra`, captured at parse time), since the custom element's
+ * other attributes have no defined meaning on a `<script>`.
+ * @param {string} extra the copyable CSP/fetch attribute source text (leading-space-prefixed, or empty)
+ * @param {string} src URL for the script
+ * @param {boolean} isModule whether to emit `type="module"`
+ * @param {string} crossOrigin ` crossorigin="…"` to append from `output.crossOriginLoading`, or `""`
+ * @returns {string} the sibling `<script>` tag's HTML
+ */
+const buildScriptTag = (extra, src, isModule, crossOrigin) => {
+	const safeSrc = src.replace(/"/g, "&quot;");
+	return `<script${
+		isModule ? ' type="module"' : ""
+	} src="${safeSrc}"${extra}${crossOrigin}></script>`;
 };
 
 /**
@@ -337,12 +366,18 @@ const buildStylesheetLink = (originalTag, href) => {
  * content-specific. When the original tag was upgraded to a module script
  * (either by the author or by the `output.module` auto-upgrade in
  * `HtmlParser`), the sibling is forced to `type="module"` regardless of what
- * the source originally said.
+ * the source originally said. The `integrity`/`type` spans come from the
+ * parser (`HtmlParser` captured them off the AST); edits are applied
+ * right-to-left so earlier offsets stay valid — no re-parsing of the tag.
  * @param {string} originalTag the opening tag's source text including `>`
  * @param {number} srcStartInTag offset of the src/href value start within `originalTag`
  * @param {number} srcEndInTag offset of the src/href value end within `originalTag`
  * @param {string} newUrl URL to put into the cloned tag's src/href slot
- * @param {HtmlScriptElementKind} elementKind shape of the originating tag
+ * @param {HtmlEntryElementKind} elementKind shape of the originating tag
+ * @param {string} crossOrigin ` crossorigin="…"` to insert from `output.crossOriginLoading`, or `""`
+ * @param {number} tagNameEndInTag offset right after the tag name within `originalTag`, where `crossOrigin` is inserted
+ * @param {Range | null} integrityRange `integrity` attribute span within `originalTag` to drop, or null
+ * @param {Range | null} typeValueRange `type` value span within `originalTag` to overwrite with `module`, or null to insert `type="module"`
  * @returns {string} the sibling tag's HTML (including a closing `</script>` for script tags)
  */
 const cloneTagWithUrl = (
@@ -350,39 +385,60 @@ const cloneTagWithUrl = (
 	srcStartInTag,
 	srcEndInTag,
 	newUrl,
-	elementKind
+	elementKind,
+	crossOrigin,
+	tagNameEndInTag,
+	integrityRange,
+	typeValueRange
 ) => {
-	let body =
-		originalTag.slice(0, srcStartInTag) +
-		newUrl +
-		originalTag.slice(srcEndInTag);
-
-	// Strip dangerous-to-copy attributes from the cloned tag — currently
-	// just `integrity`. The match handles all three quoting styles
-	// (`"…"`, `'…'`, unquoted) and the bare-attribute form.
-	body = body.replace(
-		/\s+integrity(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?(?=[\s/>])/gi,
-		""
-	);
+	const isLink =
+		elementKind === "modulepreload" || elementKind === "stylesheet";
 
+	/** @type {{ start: number, end: number, text: string }[]} */
+	const edits = [{ start: srcStartInTag, end: srcEndInTag, text: newUrl }];
+
+	// `integrity` is content-specific — drop it from the clone.
+	// TODO: emit a correct per-chunk `integrity` once a core SRI output
+	// option exists, instead of dropping it.
+	if (integrityRange) {
+		edits.push({ start: integrityRange[0], end: integrityRange[1], text: "" });
+	}
+
+	// Inserted right after the tag name: `crossorigin` from
+	// `output.crossOriginLoading`, then a forced `type="module"` when the tag
+	// has no `type` value to rewrite in place.
+	let afterName = crossOrigin;
 	if (elementKind === "script-module") {
-		if (/\stype\s*=/i.test(body)) {
-			body = body.replace(
-				/(\stype\s*=\s*)(?:"[^"]*"|'[^']*'|[^\s>]+)/i,
-				'$1"module"'
-			);
+		if (typeValueRange) {
+			edits.push({
+				start: typeValueRange[0],
+				end: typeValueRange[1],
+				text: "module"
+			});
 		} else {
-			body = body.replace(/^<script\b/i, '<script type="module"');
+			afterName += ' type="module"';
 		}
 	}
 
+	if (afterName) {
+		edits.push({
+			start: tagNameEndInTag,
+			end: tagNameEndInTag,
+			text: afterName
+		});
+	}
+
+	edits.sort((a, b) => b.start - a.start);
+	let body = originalTag;
+	for (const edit of edits) {
+		body = body.slice(0, edit.start) + edit.text + body.slice(edit.end);
+	}
+
 	// `<link>` is a void element — no closing tag. `<script>` needs `</script>`.
-	return elementKind === "modulepreload" || elementKind === "stylesheet"
-		? body
-		: `${body}</script>`;
+	return isLink ? body : `${body}</script>`;
 };
 
-HtmlScriptSrcDependency.Template = class HtmlScriptSrcDependencyTemplate extends (
+HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 	ModuleDependency.Template
 ) {
 	/**
@@ -394,9 +450,10 @@ HtmlScriptSrcDependency.Template = class HtmlScriptSrcDependencyTemplate extends
 	 */
 	apply(dependency, source, templateContext) {
 		const { runtimeTemplate } = templateContext;
-		const dep = /** @type {HtmlScriptSrcDependency} */ (dependency);
+		const dep = /** @type {HtmlEntryDependency} */ (dependency);
 		const compilation = runtimeTemplate.compilation;
 		const { chunkGraph } = compilation;
+		const { crossOriginLoading } = compilation.outputOptions;
 		const entrypoint = /** @type {Entrypoint | undefined} */ (
 			compilation.entrypoints.get(dep.entryName)
 		);
@@ -410,15 +467,13 @@ HtmlScriptSrcDependency.Template = class HtmlScriptSrcDependencyTemplate extends
 		const entryChunk = orderedChunks[orderedChunks.length - 1];
 		const isStylesheet = dep.elementKind === "stylesheet";
 
-		// Rewrite the originating tag's src/href to the entry chunk's
-		// primary asset for that element kind: `.css` for
-		// `<link rel="stylesheet">`, `.js` for everything else.
+		// Rewrite src/href to a chunk-URL sentinel (resolved by renderManifest):
+		// `.css` for `<link rel="stylesheet">`, `.js` for everything else.
 		const entryContentHashType = isStylesheet ? "css" : "javascript";
-		const entryUrl = `${CssUrlDependency.PUBLIC_PATH_AUTO}${getChunkFilename(
+		const entryUrl = HtmlGenerator.makeChunkUrlSentinel(
 			entryChunk,
-			compilation,
 			entryContentHashType
-		)}`;
+		);
 		source.replace(dep.range[0], dep.range[1] - 1, entryUrl);
 
 		if (dep.tagStart < 0 || dep.tagOpenEnd <= dep.tagStart) {
@@ -439,6 +494,30 @@ HtmlScriptSrcDependency.Template = class HtmlScriptSrcDependencyTemplate extends
 		const originalTag = originalContent.slice(dep.tagStart, dep.tagOpenEnd);
 		const srcStartInTag = dep.range[0] - dep.tagStart;
 		const srcEndInTag = dep.range[1] - dep.tagStart;
+		// Non-native originating elements (a custom element mapped to a
+		// `script`/`stylesheet` source `type`) can't be cloned verbatim — the
+		// clone would be invalid markup (e.g. `<my-script …></script>`), so a
+		// real native tag is synthesized instead. Decided at parse time from the
+		// tag name (`dep.tagIsNative`) rather than re-parsing the source text.
+		const tagIsNative = dep.tagIsNative;
+
+		// `crossorigin` to mirror `output.crossOriginLoading` onto every injected
+		// tag. Empty when the option is off or the originating tag already set
+		// `crossorigin` (author value wins, flagged at parse time). Mirrors
+		// webpack's runtime, which sets `crossOrigin` on chunk-loading scripts,
+		// and matches Vite, which emits it on every injected script/stylesheet.
+		const crossOrigin =
+			crossOriginLoading && !dep.hasOwnCrossOrigin
+				? ` crossorigin="${crossOriginLoading}"`
+				: "";
+		const tagNameEndInTag = dep.tagNameEnd - dep.tagStart;
+
+		// Mirror it onto the entry tag too (siblings get it via the builders
+		// below), inserted right after the tag name — its parse-time offset — so
+		// it sits alongside any `type="module"` the parser injected.
+		if (tagIsNative && crossOrigin && dep.tagNameEnd >= 0) {
+			source.insert(dep.tagNameEnd, crossOrigin);
+		}
 
 		/**
 		 * @param {Chunk} chunk chunk to emit a sibling tag for
@@ -446,23 +525,49 @@ HtmlScriptSrcDependency.Template = class HtmlScriptSrcDependencyTemplate extends
 		 * @returns {string} a single sibling tag's HTML
 		 */
 		const buildSibling = (chunk, kind) => {
-			const url = `${CssUrlDependency.PUBLIC_PATH_AUTO}${getChunkFilename(
-				chunk,
-				compilation,
-				kind
-			)}`;
-			if (kind === "css" && !isStylesheet) {
-				// Originating tag is `<script>` (or `<link rel=modulepreload>`)
-				// but this chunk is CSS — emit a fresh `<link>` rather than
-				// cloning the script.
-				return buildStylesheetLink(originalTag, url);
+			const url = HtmlGenerator.makeChunkUrlSentinel(chunk, kind);
+			if (kind === "css") {
+				// A CSS chunk is always loaded via `<link rel="stylesheet">`.
+				// Clone only when the entry tag is itself a native `<link
+				// rel="stylesheet">` (so attributes like `media` carry over);
+				// a `<script>` entry that imported CSS, or a custom element,
+				// gets a freshly synthesized `<link>`.
+				if (isStylesheet && tagIsNative) {
+					return cloneTagWithUrl(
+						originalTag,
+						srcStartInTag,
+						srcEndInTag,
+						url,
+						dep.elementKind,
+						crossOrigin,
+						tagNameEndInTag,
+						dep.integrityRange,
+						dep.typeValueRange
+					);
+				}
+				return buildStylesheetLink(dep.copyableAttrsText, url, crossOrigin);
+			}
+			// A JS chunk is loaded via `<script>`. Clone a native `<script>`
+			// verbatim; synthesize a real `<script>` for custom elements that
+			// were mapped to `type: script`/`script-module`.
+			if (tagIsNative) {
+				return cloneTagWithUrl(
+					originalTag,
+					srcStartInTag,
+					srcEndInTag,
+					url,
+					dep.elementKind,
+					crossOrigin,
+					tagNameEndInTag,
+					dep.integrityRange,
+					dep.typeValueRange
+				);
 			}
-			return cloneTagWithUrl(
-				originalTag,
-				srcStartInTag,
-				srcEndInTag,
+			return buildScriptTag(
+				dep.copyableAttrsText,
 				url,
-				dep.elementKind
+				dep.elementKind === "script-module",
+				crossOrigin
 			);
 		};
 
@@ -487,7 +592,7 @@ HtmlScriptSrcDependency.Template = class HtmlScriptSrcDependencyTemplate extends
 			// re-derive the order from the entrypoint's module post-order
 			// index, which mirrors the dependency walk and so reflects the
 			// import order.
-			/** @type {{ chunk: Chunk, index: number }[]} */
+			/** @type {{ chunk: Chunk, index: number, key: string }[]} */
 			const cssChunkOrder = [];
 			/** @type {Chunk[]} */
 			const jsChunks = [];
@@ -498,7 +603,8 @@ HtmlScriptSrcDependency.Template = class HtmlScriptSrcDependencyTemplate extends
 				if (hasCss) {
 					cssChunkOrder.push({
 						chunk,
-						index: firstCssModulePostOrderIndex(chunk, entrypoint, chunkGraph)
+						index: firstCssModulePostOrderIndex(chunk, entrypoint, chunkGraph),
+						key: cssChunkSortKey(chunk)
 					});
 				}
 				// Anything that isn't CSS-only stays on the JS lane, in the
@@ -520,7 +626,8 @@ HtmlScriptSrcDependency.Template = class HtmlScriptSrcDependencyTemplate extends
 						entryChunk,
 						entrypoint,
 						chunkGraph
-					)
+					),
+					key: cssChunkSortKey(entryChunk)
 				});
 			}
 			cssChunkOrder.sort((a, b) => {
@@ -533,11 +640,17 @@ HtmlScriptSrcDependency.Template = class HtmlScriptSrcDependencyTemplate extends
 				// including the `Infinity === Infinity` case.
 				if (a.index < b.index) return -1;
 				if (a.index > b.index) return 1;
-				return compareChunksForCssTieBreak(a.chunk, b.chunk);
+				if (a.key < b.key) return -1;
+				if (a.key > b.key) return 1;
+				return 0;
 			});
-			for (const { chunk } of cssChunkOrder) {
-				siblings.push(buildSibling(chunk, "css"));
-			}
+			// Insert CSS before the first script (not just before this tag) so a
+			// later entry's stylesheet still loads ahead of every script.
+			const cssAt = dep.cssAnchor === -1 ? dep.tagStart : dep.cssAnchor;
+			const cssLinks = cssChunkOrder.map(({ chunk }) =>
+				buildSibling(chunk, "css")
+			);
+			if (cssLinks.length > 0) source.insert(cssAt, cssLinks.join(""));
 			for (const chunk of jsChunks) {
 				siblings.push(buildSibling(chunk, "javascript"));
 			}
@@ -550,8 +663,8 @@ HtmlScriptSrcDependency.Template = class HtmlScriptSrcDependencyTemplate extends
 };
 
 makeSerializable(
-	HtmlScriptSrcDependency,
-	"webpack/lib/dependencies/HtmlScriptSrcDependency"
+	HtmlEntryDependency,
+	"webpack/lib/dependencies/HtmlEntryDependency"
 );
 
-module.exports = HtmlScriptSrcDependency;
+module.exports = HtmlEntryDependency;