nextjs - 💡(How to fix) Fix Turbopack does not apply PostCSS @value plugin (CSS Modules values are not resolved) [2 comments, 2 participants]

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>
  );
}

---

@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 */
}

---

@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;
}

---

next dev --webpack

---

/* /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;
}

---

next dev

---

/* [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;
}

---

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