test(html): assert <link> precedes <script> for JS-imported CSS

alexander-akait · alexander-akait · commit 377d164f80fc · 2026-05-21T13:08:59.000Z
Reinforce the html-webpack-plugin#1813 invariant in the
css-imported-from-js case: a &lt;link rel=stylesheet&gt; emitted for a CSS
chunk pulled in by a &lt;script src&gt; entry must precede the &lt;script&gt; tag
itself, so browsers start the stylesheet download before the script
download. The snapshot already captures the order; the explicit
assertion documents the requirement and matches the pattern used by
the sibling tests (css-split-chunks-order, css-mixed-link-and-js-import,
css-runtime-and-split-chunks).
diff --git a/test/configCases/html/css-imported-from-js/test.js b/test/configCases/html/css-imported-from-js/test.js
@@ -40,6 +40,16 @@ it("should emit a <link rel=stylesheet> for the entry chunk's CSS file, copying
 	expect(linkTag).not.toContain("defer");
 	expect(linkTag).not.toContain("integrity");
 
+	// The `<link>` must precede the `<script>` so the browser starts the
+	// stylesheet download before the script download — otherwise scripts
+	// race ahead and the stylesheet's render-blocking arrival is pushed
+	// out (the html-webpack-plugin#1813 concern, applied to JS-imported
+	// CSS in HTML entries).
+	const scriptIdx = extracted.indexOf("<script");
+	const linkIdx = extracted.indexOf('<link rel="stylesheet"');
+	expect(linkIdx).toBeGreaterThan(-1);
+	expect(linkIdx).toBeLessThan(scriptIdx);
+
 	// The referenced files actually exist on disk.
 	expect(() => readFile(scriptMatch[1])).not.toThrow();
 	const css = readFile(hrefMatch[1]);
