Turbopack does not apply PostCSS @value plugin (CSS Modules values are not resolved)

[fakkio]

Link to the code that reproduces this issue

https://github.com/fakkio/next-issue-postcss-modules-values.git

To Reproduce

1. Create a new Next.js app using create-next-app (App Router, TypeScript).
2. Add or edit the following files:

src/app/page.tsx

import styles from "./page.module.css";
import redStyles from "./redBg.module.css";

export default function Home() {
  return (
    <div className={styles.page}>
      <div className={redStyles.redBg} />
      <div className={styles.greenify}>
        <div className={redStyles.redBg} />
      </div>
    </div>
  );
}

src/app/page.module.css

@value custom: #0c77f8;

.page {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  height: 100vh;
}

.greenify {
  opacity: 1; /* otherwise this will be stripped out */
}

src/app/redBg.module.css

@value greenify from './page.module.css';
@value custom from './page.module.css';

.redBg {
  height: 100px;
  width: 100px;
  background: custom;
  border: 1px #fff solid;
}

.greenify .redBg {
  background-color: green;
}

3. Start the app with Webpack:

   next dev --webpack

   ✅ Rendered page is correct:

   

   ✅ Expected CSS is generated correctly:

/* /src/app/page.module.css */
  
.page_page__ZU32B {
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    height: 100vh;
}

.page_greenify__ESLM3 {
    opacity: 1; /* otherwise this will be stripped out */
}


/* /src/app/redBg.module.css */

.redBg_redBg__7VTYH {
    height: 100px;
    width: 100px;
    background: #0c77f8;
    border: 1px #fff solid;
}

.page_greenify__ESLM3 .redBg_redBg__7VTYH {
    background-color: green;
}

4. Start the app with Turbopack (default):

   next dev

   ❌ Rendered page is wrong:

   

   ❌ The generated CSS contains unresolved @value tokens, i.e. the custom color is not replaced in rebBg module and the .greenify class is different from the original one in page module:

/* [project]/src/app/page.module.css [app-client] (css) */
.page-module___8aEwW__page {
  background: black;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  height: 100vh;
  display: flex;
}

.page-module___8aEwW__greenify {
  opacity: 1;
}

/* [project]/src/app/redBg.module.css [app-client] (css) */
.redBg-module__mv2fOq__redBg {
  background: custom;
  border: 1px solid #fff;
  width: 100px;
  height: 100px;
}

.redBg-module__mv2fOq__greenify .redBg-module__mv2fOq__redBg {
  background-color: green;
}

Current vs. Expected behavior

Current (Turbopack)
@value imports from CSS Modules are not resolved — the literal custom string remains in the final CSS output and the greenify class has a different hash name.

Expected (Webpack)
The PostCSS plugin for @value should replace imported constants (e.g., custom) with their actual values (e.g., #0c77f8), and greenify class should match the original one, matching the behavior of the Webpack pipeline.

This affects both dev and build stages.

Provide environment information

Operating System:
  Windows 11 Pro 25H2
  Build 26200.6899
  Windows Feature Experience Pack 1000.26100.253.0

Binaries:
  Node: 22.17.1
  npm: 10.9.2
Relevant Packages:
  next: 16.0.0-canary.16
  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

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

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

Additional context

No response

[denesbeck]

Based on the documentation, this appears to be an intentional limitation, as outlined here: https://nextjs.org/docs/app/api-reference/turbopack#unsupported-and-unplanned-features

[fakkio]

Thanks for pointing that out, my mistake for not reading that section of the documentation beforehand.

That said, I’d like to highlight that the lack of support for cross-module references is a significant limitation for teams using CSS Modules at scale.

Being unable to reference class names across components makes it much harder to build consistent, decoupled, modular styling systems without falling back to :global CSS or workaround with element style and CSS variables.

Even if it’s currently marked as “unsupported/unplanned”, I think it deserves reconsideration.

[timneutkens]

Converted to discussions ideas section to track as a feature request. Specifically lightningcss.dev which most modern bundlers use does not support these features: https://lightningcss.dev/css-modules.html