Skip to content

Conversation

@harshcoder-harsh
Copy link

Fixes #86704

Problem

CSS prioritization differs between next dev --turbopack and next build --turbopack, causing layout breakage in production builds. Styles that load correctly in development mode are applied in a different order in production, breaking the visual appearance.

Root Cause

In flight-manifest-plugin.ts:297-318, CSS files are collected from webpack entrypoints using:

manifest.entryCSSFiles[chunkEntryName] = entrypoint
  .getFiles()
  .filter((f) => !f.startsWith('static/css/pages/') && f.endsWith('.css'))
  .map((file) => { /* ... */ })

@ijjk
Copy link
Member

ijjk commented Dec 3, 2025

Allow CI Workflow Run

  • approve CI run for commit: 8637bf4

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

@ijjk
Copy link
Member

ijjk commented Dec 3, 2025

Allow CI Workflow Run

  • approve CI run for commit: 6ab4f8b

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

Fixes vercel#86704

The issue was that CSS files were collected from webpack entrypoints
without sorting, leading to non-deterministic ordering between
development (next dev --turbopack) and production (next build --turbopack).

This commit adds .sort() to the CSS files array in flight-manifest-plugin.ts
to ensure consistent alphabetical ordering in both modes.

The fix ensures that CSS prioritization is deterministic and matches
between dev and build, preventing layout breakage in production.
@harshcoder-harsh harshcoder-harsh force-pushed the fix-css-prioritization-issue-86704 branch from 8637bf4 to 6ab4f8b Compare December 3, 2025 17:29
@ijjk ijjk added the type: next label Dec 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CSS prioritization differs between next dev --turbopack and next build --turbopack

2 participants