nextjs - 💡(How to fix) Fix Turbopack CSS optimizer strips @media keyword when nesting rules [1 comments, 2 participants]

Link to the code that reproduces this issue

Reproduction steps below (no sandbox needed — reproducible with any vanilla-extract project using @media in style() calls).

To Reproduce

1. Create a Next.js 16.1.7 project with Turbopack enabled
2. Install @vanilla-extract/[email protected] with unstable_turbopack: { mode: 'auto' }
3. Create a .css.ts file with @media inside style():

import { style } from '@vanilla-extract/css';

export const stickyNav = style({
  position: 'sticky',
  left: 0,
  zIndex: 2,
  '@media': {
    '(min-width: 1024px)': {
      position: 'relative'
    }
  }
});

1. Start the dev server with next dev --turbopack

Current vs. Expected behavior

Current behavior: Turbopack's CSS optimizer nests the flat @media rule into the selector block and strips the @media keyword, producing invalid CSS:

.stickyNav__abc123 {
  position: sticky;
  left: 0;
  z-index: 2;
  (min-width: 1024px) {
    position: relative;
  }
}

Error: Parsing CSS source code failed — Invalid empty selector

Expected behavior: The CSS should remain as valid flat CSS or valid nested CSS:

/* Flat (as generated by vanilla-extract): */
.stickyNav__abc123 { position: sticky; left: 0; z-index: 2; }
@media (min-width: 1024px) { .stickyNav__abc123 { position: relative; } }

/* Or valid nested CSS: */
.stickyNav__abc123 {
  position: sticky;
  left: 0;
  z-index: 2;
  @media (min-width: 1024px) {
    position: relative;
  }
}

Debugging performed

We confirmed via logging in the @vanilla-extract/turbopack-plugin loader that the CSS returned by the loader is correct — it contains proper @media (min-width: ...) blocks at the top level. The corruption happens after the loader returns the CSS, during Turbopack's internal CSS processing.

Things we tested that did NOT fix the issue:

• unstable_splitCssPerRule: true vs false — no difference
• Removing screen and from media queries — no difference
• Removing all PostCSS plugins (empty config) — no difference
• Removing browserslist from package.json — no difference

This confirms the bug is in Turbopack's own CSS optimizer (SWC CSS), not in PostCSS, vanilla-extract, or user code.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin 25.3.0
Binaries:
  Node: 22.x
  pnpm: 10.32.1
Relevant Packages:
  next: 16.1.7
  react: 19.2.4
  @vanilla-extract/css: 1.19.1
  @vanilla-extract/next-plugin: 2.5.1
  @vanilla-extract/turbopack-plugin: 0.1.1

Which area(s) are affected?

Turbopack

Which stage(s) are affected?

next dev (Turbopack)

Additional context

The @vanilla-extract/turbopack-plugin is at v0.1.1 — this may also be partially a vanilla-extract integration issue, but the root cause is Turbopack's CSS processing stripping the @media keyword during rule nesting optimization. The CSS is valid when it enters Turbopack's pipeline.