CSS Modules in React Server Components not working as intended

[lfades]

What version of Next.js are you using?

^12.0.5-canary.13

What version of Node.js are you using?

16.13.0

What browser are you using?

Chrome

What operating system are you using?

Macos (M1)

How are you deploying your application?

Vercel

Describe the Bug

Behavior in Server Components

• CSS Modules don't work in server components (.server.js), they're currently only supported by client components (.client.js). This is currently mentioned in the Next.js documentation but I'm still including as it being supported seems expected. There are no errors displayed when using them in the server either.

Behavior in Client Components

• CSS Modules included in a .client.js component under a server component have a flash of content, the first render is unstyled. Happens with next dev and next start
• If the server component page switches to a dynamic route, e.g switching from css-modules.server.js to [css-modules].server.js, CSS modules won't work for client components either, the classname is applied but the styles aren't there

Expected Behavior

To CSS Modules to work as they do without RSC.

To Reproduce

Should be reproducible by running the css-modules.server.js page available in the react-streaming-and-server-components tests: https://github.com/vercel/next.js/blob/canary/test/integration/react-streaming-and-server-components/app/pages/css-modules.server.js

[huozhi]

Closed in #38536

[github-actions]

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