Instable/Incorrect CSS import order

[Netail]

Link to the code that reproduces this issue

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

To Reproduce

1. Override styling through the className prop from an external component (In this case from a package within the monorepo)
2. Start the development server yarn dev
3. Open the root page /, observe; the component uses the initial CSS (Incorrect order)
4. Reload the root page /, observe; the component uses the locally overwritten CSS (Correct order)
5. Open the subpath /bug, observe; the component uses the initial CSS (Incorrect order)
6. Reload the subpath /bug, observe; the component still uses the initial CSS (Incorrect order)

(When the dev server is restarted, it can be reproduced the other way around - if you open the subpath first, the CSS on this page will be correct after a page reload while the other page stays broken at all times)

Current vs. Expected behavior

Currently, the order of the classes in the bundled CSS file is not consistent, resulting in an inconsistency of style overwriting and not respecting the correct order. Only the first rendered page will have the correct CSS order (but only after a page reload), while the CSS of the other pages continue with the incorrect order.

Override (local CSS) is placed before the initial CSS

All pages should maintain the correct import order from the start (not even requiring a reload)

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 20.11.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.2
  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)

App Router

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

No response

[Netail]

Still seems to be an issue with version 14.2.0-canary.5 after the merge of #62927. cc: @sokra @shuding

[Netail]

Also reproducible on macOS, but slightly different (You need to open a different page first);

1. Open the root page /, observe; the component uses the initial CSS (Incorrect order)
2. Open the subpath /bug, observe; the component uses the initial CSS (Incorrect order)
3. Reopen the root page /, observe; the component uses the locally overwritten CSS (Correct order)
4. Reopen the subpath /bug, observe; the component still uses the initial CSS (Incorrect order)

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:30:44 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.8.1
  npm: 10.1.0
  Yarn: 1.22.21
  pnpm: 8.9.0
Relevant Packages:
  next: 14.2.0-canary.9 // Latest available version is detected (14.2.0-canary.9).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

[Netail]

Seems to be resolved since; 14.2.0-canary.28

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.