Skip to content
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

Open
Netail opened this issue May 7, 2024 · 5 comments
Open
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

@Netail
Copy link
Contributor

Netail commented May 7, 2024

Link to the code that reproduces this issue

https://github.com/Netail/repro-app-dir-css-order

To Reproduce

  1. yarn dev & open localhost:3000
  2. See 1 yellow and 1 blue component
  3. Uncomment the 'use client' in the navigation-wrapper.tsx
  4. Instead of 1 yellow & 1 blue component it becomes 2 blue ones (Even after a reload & restart)

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

@Netail Netail added the bug Issue was opened via the bug report template. label May 7, 2024
@github-actions github-actions bot added the Webpack Related to Webpack with Next.js. label May 7, 2024
@Netail
Copy link
Contributor Author

Netail commented May 7, 2024

cc: @sokra as you've worked a lot on the CSS bundling part

#63157 fixed a big issues we had before, but it seems like there's still an issue left regarding the css order when using both client & server components :(

@iamlinkus
Copy link

iamlinkus commented May 7, 2024

I think this is also related and is a critical bug: #64773

@Netail
Copy link
Contributor Author

Netail commented May 7, 2024

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 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
@Netail
Copy link
Contributor Author

Netail commented Jul 11, 2024

A bit more info found here; #51030 (comment)

@samcx samcx added the linear: next Confirmed issue that is tracked by the Next.js team. label Aug 26, 2024
@peerjollux
Copy link

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.
Projects
None yet
Development

No branches or pull requests

4 participants