Why is Next.js transforming my CSS?

[thany]

Summary

I have not told Next.js to transform anything. I'm using CSS modules because I assumed they are closest to vanilla CSS, and what do I get? Transformation I never asked for.

I'm using the light-dark() function (see below), and Next.js transforms it into some messy variables malarky. Sorry if I'm sounding a bit grumpy, but why is this being done please? I'm writing it the way I want, because that's what how I want things. Not so that some process that is documented exactly nowhere, can go ahead and mess up what I took the time to write carefully and properly. It's a teensy weensy bit disrespectful, frankly, to be doing CSS tranformation without the dev's consent or permission.

Anyway, that's the rant done. The question is:

How do I configure PostCSS, or LightningCSS, or whatever is responsible, to stop touching my CSS files please? Minification is fine. Just no functional modifications of any kind please.

I'm on Next.js 16, Turbopack, app router.

Additional information

:root {
  color-scheme: light dark;
  --color-background-primary: light-dark(#f5f2ea, #1c1a17);
  --color-background-secondary: light-dark(#ebe5d7, #2a2621);
}

Example

No response

[icyJoseph]

Throw this into your package.json

  "browserslist": [
    "chrome >= 123",
    "edge >= 123",
    "firefox >= 120",
    "safari >= 17.5"
  ]

Turbopack via LightningCSS, is trying to cover older browsers that don't support these, aka modifications that ensure the app is functional in browsers that don't support the new CSS color functions (baseline 2024).

[thany]

Sure, but how can I completely disable it everywhere forever?

There has got to be some kind of config of these feature flags somewhere somehow. I refuse to believe it's all completely hardcoded.

[NourMoftah]

Hello there
I ran into this same issue and managed to prevent the unwanted CSS transformation.

You can disable LightningCSS in your next.config.js file like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    lightningcss: false,
  },
}

module.exports = nextConfig

Alternatively, if you want to keep minification but skip transformations, try:

const nextConfig = {
  experimental: {
    lightningcss: {
      minify: true,
      targets: {}, // disables browser compatibility transforms
    },
  },
}

module.exports = nextConfig

After editing your config, clear the cache:
rm -rf .next
npm run dev

This stopped Next.js from modifying light-dark() and other CSS color functions for me.

[icyJoseph]

• https://nextjs.org/docs/app/api-reference/config/next-config-js/useLightningcss

Turbopack uses Lightning CSS by default since Next 14.2. This configuration option has no effect on Turbopack. Turbopack always uses Lightning CSS.

Did you actually try any of these? In latest Next.js 16 there isn't even an experimental.lightningcss flag, was there ever one? OPs point is that the flags are not controllable as a singular unit, even though the Lightning CSS docs seem to suggest it is a bit of an edge case to that, and the browserlists is the most comprehensive way, as it targets browser coverage rather. Anyway... please verify this claim, or document more of what you've done, otherwise you lead others into trying something that won't work, increasing frustration.

[thany]

Yeah I think I remember this flag is (or was) only a thing if using webpack, rather than turbopack.

I'd rather not use webpack.