Skip to content

Chained CSS Module composes not working with Turbopack #85296

@cduff

Description

@cduff

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/next-turbo-css-modules-chained-composes-issue-hjyd9c

To Reproduce

  1. Start the app in Turbopack mode (npm run dev).
  2. Note that the "text" is styled bold and italic, but not underlined.
  3. Restart the app in Webpack mode (npm run devWebpack).
  4. 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/A

Which 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

No one assigned

    Labels

    CSSRelated to CSS.TurbopackRelated to Turbopack with Next.js.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions