-
Notifications
You must be signed in to change notification settings - Fork 29.8k
Open
Labels
CSSRelated to CSS.Related to CSS.TurbopackRelated to Turbopack with Next.js.Related to Turbopack with Next.js.
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/next-turbo-css-modules-chained-composes-issue-hjyd9c
To Reproduce
- Start the app in Turbopack mode (
npm run dev). - Note that the "text" is styled bold and italic, but not underlined.
- Restart the app in Webpack mode (
npm run devWebpack). - Note that the "text" is now also underlined.
Current vs. Expected behavior
Consider the following SCSS code which is used in the linked reproduction:
.a {
text-decoration: underline;
}
.b {
composes: a;
font-style: italic;
}
.c {
composes: b;
font-weight: bold;
}The sample text has className={styles.c}.
Using Webpack, this composes to "c b a", which is the expected behaviour. I.e. It supports chaining of composes.
Using Turbopack, it composes only to "c b", which is unexpected.
Turbopack not supporting chaining of composes means it fails to build our web apps correctly, as they have been coded to depend on this behaviour.
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: 16.0.1-canary.1 // Latest available version is detected (16.0.1-canary.1).
eslint-config-next: N/A
react: 19.2.0
react-dom: 19.2.0
typescript: 5.9.3
Next.js Config:
output: N/AWhich area(s) are affected? (Select all that apply)
CSS, Turbopack
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local)
Additional context
No response
Metadata
Metadata
Assignees
Labels
CSSRelated to CSS.Related to CSS.TurbopackRelated to Turbopack with Next.js.Related to Turbopack with Next.js.