-
Notifications
You must be signed in to change notification settings - Fork 27.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS order incorrect with the combination of server and client components #65480
Labels
bug
Issue was opened via the bug report template.
linear: next
Confirmed issue that is tracked by the Next.js team.
Webpack
Related to Webpack with Next.js.
Comments
I think this is also related and is a critical bug: #64773 |
Agreed on this being a critical bug, because this has huge impact on css rendering. |
Netail
changed the title
CSS order breaks with the combination of server and client components
CSS order incorrect with the combination of server and client components
May 8, 2024
1 task
A bit more info found here; #51030 (comment) |
samcx
added
the
linear: next
Confirmed issue that is tracked by the Next.js team.
label
Aug 26, 2024
Is there any more info about this issue? I'm currently on 14.2.0.canary.28 but I'm still having issue CSS ordering issues when using Client components. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
bug
Issue was opened via the bug report template.
linear: next
Confirmed issue that is tracked by the Next.js team.
Webpack
Related to Webpack with Next.js.
Link to the code that reproduces this issue
https://github.com/Netail/repro-app-dir-css-order
To Reproduce
yarn dev
& openlocalhost:3000
navigation-wrapper.tsx
Current vs. Expected behavior
CSS streaming of client components mess with the order of the css bundle, resulting in being appended later and thus overriding certain server side styling.
In the example it should stay a yellow and blue component instead of 2 blue components when uncommenting 'use client'.
It seem like the page.css overwrites css from the layout.css due to importing order issues. Some classes which get streamed to page.css are already in layout.css, maybe a check could be built in if they were already present in the layout.css bundle?
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:10:42 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6000 Available memory (MB): 32768 Available CPU cores: 10 Binaries: Node: 20.8.1 npm: 10.5.0 Yarn: 1.22.22 pnpm: N/A Relevant Packages: next: 14.3.0-canary.45 // Latest available version is detected (14.3.0-canary.45). eslint-config-next: N/A react: 18.2.0 react-dom: 18.2.0 typescript: 5.3.3 Next.js Config: output: N/A
Which area(s) are affected? (Select all that apply)
Webpack
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
No response
The text was updated successfully, but these errors were encountered: