CSS order incorrect with the combination of server and client components

### 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 ```bash 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_