Unexpected transform to modern media query syntax

[warmrobot]

Link to the code that reproduces this issue

https://github.com/warmrobot/test-next-mq

To Reproduce

1. npx create-next-app@latest test-next-mq
2. npm run dev

Current vs. Expected behavior

current:

@media (width <= 600px) {

expected:

@media (max-width: 600px) {

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.5.0: Tue Apr 22 19:54:29 PDT 2025; root:xnu-11417.121.6~2/RELEASE_ARM64_T6030
  Available memory (MB): 18432
  Available CPU cores: 11
Binaries:
  Node: 22.12.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.3.4 // Latest available version is detected (15.3.4).
  eslint-config-next: 15.3.4
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.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

Trying to add .browserslistrc or postcss.config.js but it doesn't helps
Some browsers can't show modern media query syntax correctly. Safari on old iOS fo example.

[mezotv]

Considering this CSS feature is baseline available (https://caniuse.com/css-media-range-syntax) already I assume this was an intentional change and not a bug. If this causes issues developing for you I would suggest upgrading your browser to a version that supports the feature. Considering turbopack shouldn't be used for production currently anyways (https://x.com/timneutkens/status/1938254891572453433) that shouldn't be an issue either.

[warmrobot]

Perhaps the main question here is why turbopack does not allow you to configure transpilation for CSS? Ignored both .browserslistrc and config for postcss-preset-env with stage 3 for example. I would be happy with any way to fix up CSS after processing it.

For example, rspack-next correctly handles stage 3 in the postcss-preset-env config.
stage 3 -> old syntax
stage 4 -> new syntax

But turbopack don't

[timneutkens]

Can you give next@canary a try? I've landed browserslist for CSS earlier this week and we're now passing the same browserslist as what Next.js has as default targets (previously it was passing last 1 version)

Perhaps the main question here is why turbopack does not allow you to configure transpilation for CSS?

Because it was part of the last 50 tests that were failing, this was in fact one of the last tests for areweturboyet.com I fixed this week 😄 #80603

[warmrobot]

Hi!
I've installed "next": "15.4.0-canary.102"

// cat postcss.config.js

module.exports = {
  plugins: {
    "postcss-preset-env": {
      stage: 3, // Use stage 3 features
    },
  },
};

# cat .browserslistrc
chrome >= 60

and it doesn't work

rm -rf .next && npm run dev