Skip to content

fix: use consistent CSS precedence for dynamic imports#84522

Open
TrevorBurnham wants to merge 1 commit into
vercel:canaryfrom
TrevorBurnham:fix-css-duplicate-preload
Open

fix: use consistent CSS precedence for dynamic imports#84522
TrevorBurnham wants to merge 1 commit into
vercel:canaryfrom
TrevorBurnham:fix-css-duplicate-preload

Conversation

@TrevorBurnham

@TrevorBurnham TrevorBurnham commented Oct 4, 2025

Copy link
Copy Markdown
Contributor

This PR fixes CSS ordering inconsistencies in the App Router by ensuring that CSS from dynamic imports (next/dynamic) uses the same precedence values as CSS from static imports.

Fixes #42082

Problem

When using next/dynamic in the App Router, CSS files were being loaded with different React precedence attributes depending on how they were imported:

  • Static imports: Used precedence="next" (production) or precedence="next_<path>" (development)
  • Dynamic imports: Used precedence="dynamic"

This inconsistency caused unpredictable CSS ordering, particularly when the same stylesheet was referenced through both static and dynamic import paths.

React's resource deduplication relies on matching href attributes to prevent duplicate stylesheets, but different precedence values could lead to inconsistent ordering behavior.

Solution

Modified PreloadChunks component in preload-chunks.tsx to use the same precedence pattern as renderCssResource:

// Before
precedence="dynamic"

// After
const precedence = process.env.NODE_ENV === 'development' ? 'next_' + chunk : 'next'

This ensures:

  • Production: All CSS uses precedence="next"
  • Development: All CSS uses precedence="next_" for proper HMR ordering
  • Consistency: Same precedence regardless of import method

@ijjk

ijjk commented Oct 4, 2025

Copy link
Copy Markdown
Member

Allow CI Workflow Run

  • approve CI run for commit: 5e1407e

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

Comment thread test/e2e/app-dir/dynamic-css/index.test.ts Outdated
Changes the precedence value used for CSS from dynamic imports
to match the precedence used for static imports, ensuring
consistent CSS ordering in the App Router.

Previously, CSS loaded via next/dynamic used precedence="dynamic"
while CSS from static imports used precedence="next" (production)
or precedence="next_<path>" (development). This inconsistency
could lead to unpredictable CSS ordering when the same stylesheet
was referenced through both code paths.

Fixes vercel#42082
@TrevorBurnham TrevorBurnham force-pushed the fix-css-duplicate-preload branch from 7015b18 to 5e1407e Compare February 16, 2026 20:07
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.

Duplication of CSS rules

2 participants