AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

Turbopack CSS HMR Serves One-Revision-Stale Output When PostCSS Plugins Report Dependencies

In Next.js dev with Turbopack, editing a CSS file that uses a PostCSS plugin reporting dependencies (e.g. @tailwindcss/postcss) causes the served CSS to be one revision behind. The worker runs twice per save; first invocation receives stale content but new mtime, plugin caches stale output against new mtime, second invocation reuses cache and serves stale CSS.

highConfidence 93%Next.jsAffected V16.0.0-CanaryAffected V16.x

Origin Analysis

Turbopack's PostCSS task invokes the Node worker twice when at least one dependency is reported. Invocation 1 passes an out-of-date content snapshot while the input path's disk mtime is already updated; invocation 2 passes up-to-date content but sees the same mtime. Downstream plugins like @tailwindcss/postcss cache compiled output keyed on fs.statSync(path).mtimeMs, so they cache stale output in invocation 1 and return it in invocation 2, serving CSS one revision behind.
1. Clone https://github.com/Dougg11/nextjs-bug-repro and run npm install && npm run dev. 2. Open http://localhost:3000 and inspect CSS chunk for a Tailwind property. 3. Edit app/globals.css changing one property, e.g. rounded-lg to rounded-2xl. 4. Save and reload without further edits. 5. Observed served CSS reflects previous edit, not latest. Repeating shows one-revision lag. With --webpack works correctly.

Fixing Code Block

Edge Case Audit

This workaround bypasses Turbopack's content snapshot and reads disk on every transform, which may add I/O overhead and could theoretically race with very rapid edits. It also masks the underlying Turbopack double-invocation and may be unnecessary once Turbopack fixes the scheduling. To roll back, revert this patch and restore the original `source` argument usage. Do not apply in production because it affects only dev transforms.

Ecosystem Topology