Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Multiple inheritance via CSS module composes only one level deep [1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#88258•Fetched 2026-04-08 02:05:17
View on GitHub
Comments
1
Participants
2
Timeline
9
Reactions
0
Author
narkowicznarkowicz
Participants
cduffcduffnarkowicznarkowicz
Timeline (top)
subscribed ×4commented ×1issue_type_added ×1labeled ×1

Code Example

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
RAW_BUFFERClick to expand / collapse

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.

extent analysis

TL;DR

The issue can be fixed by updating the CSS composition to correctly handle nested classes or by reverting to a previous version of Next.js where this bug is not present.

Guidance

  • Verify that the issue is indeed caused by the update to [email protected] by testing with [email protected] as mentioned in the additional context.
  • Check the CSS composition in Label.module.css to ensure that .upperItalic is correctly composing .italic and that the expected class names are being generated.
  • Consider using a different approach to apply the font-style: italic rule, such as adding it directly to the .upperItalic class or using a separate class for italic text.
  • Test the application in different environments and stages to ensure that the issue is not specific to a particular setup.

Example

No code snippet is provided as the issue is related to a specific version of Next.js and the code is available in the linked repository.

Notes

The issue seems to be specific to the [email protected] version, and reverting to a previous version may be a temporary workaround. However, it's recommended to investigate and fix the root cause of the issue to ensure compatibility with future versions of Next.js.

Recommendation

Apply workaround by reverting to [email protected] until a fix is available in a newer version, as this version is known to work as expected.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#environment setup#docker error#permission error#memory optimization#batch processing

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - 💡(How to fix) Fix Multiple inheritance via CSS module composes only one level deep [1 comments, 2 participants]