CSS import order differs between dev turbopack and prod webpack

Start by cloning the linked reproduction and running pnpm docs:dev, then pnpm docs:build and pnpm docs:start to compare the CSS layer order at /preview-card. Read docs/src/app/layout.tsx, reset.css, ThemeToggle.module.css, and test-package/index.css. Done means development and production preserve the declared CSS layer order.

Link to the code that reproduces this issue

https://github.com/brijeshb42/nextjs-css-order-repro

To Reproduce

TLDR: The import order of css files changes between dev (with Turbpack) and prod (without Turbopack).

Setup

1. git clone https://github.com/brijeshb42/nextjs-css-order-repro.git
2. pnpm install

Dev mode

1. pnpm docs:dev will start the docs in dev mode (with Turbopack enabled). Open the URL http://localhost:3000/preview-card and you'll see that the Size 1, Size 2 etc text is underlined and has a color.
2. Right click on the Size 1 text and goto Inspect to inspect the element in devtools. On the right, you'll see text-decoration-line and color properties applied with relevant values. Clicking the Layer components will show the layer order as theme, base, components, utilities and tokens.

Prod mode

1. pnpm docs:build will build the app with Webpack.
2. pnpm docs:start will start the built app. Goto the same url http://localhost:3000/preview-card. You'll see that the Size 1, Size 2 etc text now not underlined and the color is black.
3. Right click on the Size 1 text and goto Inspect to inspect the element in devtools. On the right, clicking the Layer base will show the layer order as tokens, components, theme, base and utilities.

Issue

In dev mode, the css order is as expected, which is declared in docs/src/app/layout.tsx. First test-package/index.css is imported which has an explicit layer order defined and then local ./reset.css is imported.

In prod mode, its not the same case. Looking at the built files in browser, the order is

1. ./reset.css
2. ThemeToggle.module.css

and test-package/index.css seems to be imported at the end. So the css layer order gets defined implicitly as and when components get imported.

Current vs. Expected behavior

In dev mode, the css order is as expected, which is declared in docs/src/app/layout.tsx. First test-package/index.css is imported which has an explicit layer order defined and then local ./reset.css is imported.

In prod mode, its not the same case. Looking at the built files in browser, the order is

1. ./reset.css
2. ThemeToggle.module.css

and test-package/index.css seems to be imported at the end. So the css layer order gets defined implicitly as and when components get imported.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.5.0: Tue Apr 22 19:52:00 PDT 2025; root:xnu-11417.121.6~2/RELEASE_ARM64_T6031
  Available memory (MB): 36864
  Available CPU cores: 14
Binaries:
  Node: 20.17.0
  npm: 11.0.0
  Yarn: N/A
  pnpm: 10.7.0
Relevant Packages:
  next: 15.4.0-canary.48 // Latest available version is detected (15.4.0-canary.48).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: export

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

Turbopack, Webpack

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

next build (local)

Additional context

No response