CSS module composition fails beyond one level deep.
The issue involves CSS module composition not working beyond one level, affecting styling inheritance. The problem appears to be a regression introduced in a specific canary version. The scope is somewhat clear but requires understanding of Next.js CSS module handling.
https://github.com/narkowicz/next-css-module-composes
<span class="[...]">World</span> element, which uses the Label component with nested variant / local class name.The local class .nested (in Label.mobule.css) composes .upperItalic which composes .italic.
The expectation here is that Label-module__[###]__italic is applied to the rendered element's class list (i.e. that styles.upperItalic equates to the string: Label-module__[###]__upperItalic Label-module__[###]__italic.
Instead, only Label-module__[###]__upperItalic is present and as a result the font-style: italic rule is not applied.
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:30 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6020
Available memory (MB): 32768
Available CPU cores: 12
Binaries:
Node: 24.2.0
npm: 11.3.0
Yarn: 1.22.19
pnpm: 10.8.0
Relevant Packages:
next: 16.1.1-canary.17 // Latest available version is detected (16.1.1-canary.17).
eslint-config-next: N/A
react: 19.2.3
react-dom: 19.2.3
typescript: 5.9.3
Next.js Config:
output: N/A
CSS
next dev (local), next build (local), next start (local), Vercel (Deployed)
Bug appears to be introduced in [email protected] (working as expected in [email protected]). Pinned versions branched in repo.
Also note that this issue is present when composing both local classes and classes from external modules / files.
Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!