Turbopack: @custom-media is not getting compiled by LightningCSS

[nickolaj-jepsen]

Link to the code that reproduces this issue

https://github.com/nickolaj-jepsen/next-custom-media-repro

To Reproduce

I've added a script to check the output: npm run repro, but otherwise just check the css output after a next build

Current vs. Expected behavior

When running Next.js with a config with this config:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    useLightningcss: true,
    lightningCssFeatures: {
      include: ['custom-media-queries'],
    },
  },
}

export default nextConfig

I expect LightningCSS to compile the @custom-media into the stylesheet

current output:

@custom-media --narrow (max-width: 960px);

.page-module__E0kJGG__box {
  color: #00f;
}

@media (--narrow) {
  .page-module__E0kJGG__box {
    color: red;
  }
}

expected output:

.page-module__E0kJGG__box {
  color: #00f;
}

@media (max-width: 960px) {
  .page-module__E0kJGG__box {
    color: red;
  }
}

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1-NixOS SMP PREEMPT_DYNAMIC Sat Jul  4 11:44:22 UTC 2026
  Available memory (MB): 64006
  Available CPU cores: 28
Binaries:
  Node: 24.16.0
  npm: 11.13.0
  Yarn: N/A
  pnpm: 11.9.0
Relevant Packages:
  next: 16.3.0-canary.82 // Latest available version is detected (16.3.0-canary.82).
  eslint-config-next: N/A
  react: 19.2.7
  react-dom: 19.2.7
  typescript: 5.9.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 build (local), next dev (local)

Additional context

I'm pretty sure it happens because LightningCSS needs to run with the ParserFlag::CUSTOM_MEDIA for the feature to work, it's not enough to just add custom-media-queries to the include