CSS module of client component is injected to DOM before global css in layout regardless of import order

[Zycon42]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/distracted-ganguly-hj5f2t?workspaceId=048684f0-8a53-456b-8e5c-a90d92be952d

To Reproduce

1. Start application in DEV mode
2. Observe coloured rectangle

Current vs. Expected behavior

The rectangle should be blue but it's red.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.3.0-canary.73 // Latest available version is detected (14.3.0-canary.73).
  eslint-config-next: N/A
  react: 19.0.0-beta-04b058868c-20240508
  react-dom: 19.0.0-beta-04b058868c-20240508
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

Not sure

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

next dev (local), next start (local)

Additional context

When you have a client component inside a layout which relies on overriding some global styles added by the layout, even if layout specifies css import order correctly

import "../styles/global.css";
import Block from "./_components/Block";

the css module styles of a Block component are injected into the DOM before the styles from global.css messing with a css cascading.

Note this only happens if Block is client component, if it's RSC the declarations order is correct.

[samcx]

@Zycon42 Thanks for sharing! Can confirm this is an issue. We are taking a look!