Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
Multiple inheritance via CSS module composes only one level deep | GoodFirstPicks

Multiple inheritance via CSS module composes only one level deep

vercel/next.js 1 comments 8d ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeNext.jsTypeScriptReact

Why this is a good first issue

CSS module composition fails beyond one level deep.

AI Summary

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.

Issue Description

Link to the code that reproduces this issue

https://github.com/narkowicz/next-css-module-composes

To Reproduce

  1. Start the application (next dev)
  2. Inspect class list in <span class="[...]">World</span> element, which uses the Label component with nested variant / local class name.

Current vs. Expected behavior

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.

Provide environment information

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

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

CSS

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

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

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.

GitHub Labels

CSS

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!

Risk Flags

  • CSS module behavior change
  • potential regression
Loading labels...

Details

Points20 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedno