test(html): assert <link> precedes <script> for JS-imported CSS#21007
Conversation
Reinforce the html-webpack-plugin#1813 invariant in the css-imported-from-js case: a <link rel=stylesheet> emitted for a CSS chunk pulled in by a <script src> entry must precede the <script> 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).
|
|
This PR is packaged and the instant preview is available (883de7a). Install it locally:
npm i -D webpack@https://pkg.pr.new/webpack@883de7a
yarn add -D webpack@https://pkg.pr.new/webpack@883de7a
pnpm add -D webpack@https://pkg.pr.new/webpack@883de7a |
There was a problem hiding this comment.
Pull request overview
This PR strengthens the test/configCases/html/css-imported-from-js config case by adding an explicit assertion that the emitted stylesheet <link rel="stylesheet"> tag appears before the corresponding <script> tag when CSS is imported from a JS entry. This documents and enforces the ordering invariant related to html-webpack-plugin#1813, beyond the existing snapshot coverage.
Changes:
- Add an explicit
<link>-before-<script>ordering assertion in thecss-imported-from-jsHTML extraction test. - Document the rationale for the ordering requirement directly in the test for future maintainers.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #21007 +/- ##
=======================================
Coverage 91.62% 91.63%
=======================================
Files 573 573
Lines 59232 59232
Branches 15995 15995
=======================================
+ Hits 54272 54276 +4
+ Misses 4960 4956 -4
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
<link> precedes <script> for JS-imported CSS
Merging this PR will degrade performance by 34.58%
Warning Please fix the performance issues or acknowledge them on CodSpeed. Performance Changes
Tip Investigate this regression by commenting Comparing 
Footnotes
|
Summary
Pins the html-webpack-plugin#1813 invariant for the
experiments.html+experiments.csspath: when JS in an HTML entry imports CSS, the emitted<link rel="stylesheet">must precede the<script>so browsers start the stylesheet download before the script download.The behaviour already works — it was added in #21002 (
HtmlScriptSrcDependencyinserts CSS siblings before JS siblings, and the entry chunk's own CSS is folded into the CSS group so its<link>lands before the entry<script>). Three of the fourtest/configCases/html/css-*cases that landed alongside that change have an explicitlinkIdx < scriptIdxassertion (css-split-chunks-order,css-mixed-link-and-js-import,css-runtime-and-split-chunks); thecss-imported-from-jscase — which is the most direct exercise of the html-webpack-plugin#1813 concern — only had the snapshot.This PR adds the matching explicit assertion so the requirement is documented in code, not only captured implicitly by the snapshot.
What kind of change does this PR introduce?
test — adds an assertion to an existing test case; no production code changes.
Did you add tests for your changes?
Yes —
test/configCases/html/css-imported-from-js/test.jsnow explicitly asserts the<link>precedes the<script>, matching the pattern used by the other threetest/configCases/html/css-*cases.Does this PR introduce a breaking change?
No.
If relevant, what needs to be documented once your changes are merged or what have you already documented?
n/a
Use of AI
Claude Code was used under human review. It read the linked issue, traced the existing ordering logic in
lib/dependencies/HtmlScriptSrcDependency.jsand the fourtest/configCases/html/css-*cases, identified thatcss-imported-from-jswas the only one of the four lacking an explicit order assertion, and drafted the assertion. The change was reviewed and run locally before being committed.