Webpack mangles `@import ... supports(...)` syntax when inlining CSS

Why this is a good first issue

Webpack CSS parsing issue requires understanding of Webpack internals.

AI Summary

The issue involves Webpack incorrectly mangling `@import ... supports(...)` syntax in CSS, causing incorrect styling. The fix likely requires modifying Webpack's CSS parsing logic, but the exact scope and impact are not fully clear. The issue is test-focused with a clear reproduction case, but understanding Webpack internals is necessary.

Issue Description

Link to the code that reproduces this issue

https://github.com/robert-j-webb/nextjs-repro-webpack-import-supports-css

To Reproduce

Clone repo, npm install.

Run

npm run build && npm run start

or

npm run dev

Go to localhost:3000

Observe the h1 is blue.

Additionally, observe the CSS in the network tab of the inspector

@media supports(display: flex) {
    h1 {
        color:rgb(255,0,0)!important
    }
}

h1 {
    color: rgb(0,0,255)
}

Current vs. Expected behavior

The H1 should be red.

The CSS should look like (Notice that @media supports -> @supports)

@supports(display: flex) {
    h1 {
        color:rgb(255,0,0)!important
    }
}

h1 {
    color: rgb(0,0,255)
}

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Wed Nov  5 21:34:00 PST 2025; root:xnu-11417.140.69.705.2~1/RELEASE_ARM64_T8132
  Available memory (MB): 24576
  Available CPU cores: 10
Binaries:
  Node: 24.10.0
  npm: 11.6.1
  Yarn: 1.22.22
  pnpm: 10.28.0
Relevant Packages:
  next: 16.2.0-canary.29 // Latest available version is detected (16.2.0-canary.29).
  eslint-config-next: N/A
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

CSS, Webpack

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

next build (local), next dev (local)

Additional context

I found this while fixing Turbopack support for the @import url in https://github.com/vercel/next.js/pull/89300

GitHub Labels

WebpackCSS