test: add regression test for Turbopack global CSS edit lost during initial page load

Draft
LU
1mo ago
+108-0

Adds a focused e2e regression suite for a Turbopack dev CSS hot-reload bug reported through DX Agent feedback.

When an imported global stylesheet is edited while the route's initial page load is still in flight, the update is never delivered to the browser: no Fast Refresh cycle, no reload, and the page keeps the pre-edit CSS indefinitely. The dev server itself is correct (the served CSS chunk already contains the newly added selector), and a manual reload or a dev-server restart makes the change visible. Idle edits hot-reload normally, and the same sequence under webpack applies the edit, so this looks like a Turbopack HMR subscription race against the first navigation.

The test encodes the current, incorrect behavior so the suite stays green while the bug is open:

  • the element's computed color is still the pre-edit value 5s after the raced edit;
  • the stylesheet chunk served by the dev server already contains the newly added selector;
  • a manual reload applies the edit.

A fix must flip the first expectation to the edited color, so the fixing PR has to update this test.

Gating: // @force-gate dev && turbopack — statically skipped in start/deploy mode and under webpack/rspack.

Validation:

  • NEXT_SKIP_ISOLATE=1 pnpm test-dev-turbo test/e2e/css-hmr-initial-load-race/css-hmr-initial-load-race.test.ts passes (4/4 runs).
  • Temporarily asserting the intended rgb(9, 9, 9) fails with Received: "rgb(1, 2, 3)"; restoring the observed-behavior assertion passes again.
  • The same path under pnpm test-dev-webpack and pnpm test-start-turbo is skipped.

Reported on next@16.4.0; still reproduces on next@16.5.0-canary.4.

Maintainer dashboard: https://next-maintainer-agent.vercel.tools/investigations/feedback/95
DX Agent feedback: https://dxagent.labs.vercel.dev/dashboard/feedback/0cdad9ce-6904-44ab-89f3-7e936f8717af

Prepared in fork: https://github.com/vercel-labs/next.js-experimental/pull/242