nextjs - 💡(How to fix) Fix [Turbopack] @import layer() attributes stripped in dev mode, work in production [1 comments, 2 participants]

Description

Turbopack (Next.js dev mode with --turbopack) strips layer() and media query attributes from @import statements. Production builds with Webpack preserve these correctly.

This is caused by an upstream bug in Lightning CSS's dependency analysis mode.

To Reproduce

Minimal Repo

https://github.com/aneuhold/lightningcss-layer-bug

Steps

1. Create a Next.js app with the following CSS:

/* app/global-styles/global.css */
@import url('https://unpkg.com/papercss/dist/paper.min.css') layer(external) not print;

.test {
  color: blue;
}

1. Run in dev mode with Turbopack:

next dev --turbopack

1. Check the browser dev tools - the @import is missing the layer(external) not print attributes

2. Build for production and run:

next build

1. Check the output CSS in .next/static - the attributes are correctly preserved

Expected Behavior

Both dev and production should preserve:

@import url('...') layer(external) not print;

Actual Behavior

Dev mode (Turbopack):

@import url('...');  /* layer() and not print are stripped */

Production (Webpack):

@import url('...') layer(external) not print;  /* ✅ correct */

Root Cause

Turbopack uses Lightning CSS (v1.0.0-alpha.62) for CSS parsing. When Lightning CSS's analyzeDependencies mode is enabled (required for bundling), it drops the layer information from import dependency metadata.

Upstream Issue: https://github.com/parcel-bundler/lightningcss/issues/1074

Technical Details

Lightning CSS correctly:

• ✅ Parses @import ... layer() syntax
• ✅ Preserves it in output when not analyzing dependencies
• ✅ Preserves media queries in dependency metadata

But fails to:

• ❌ Include layer field in dependency objects when analyzeDependencies: true

This makes it impossible for Turbopack to reconstruct the @import with proper layer semantics.

Impact

• CSS Cascade Layers cannot be used with external imports in Turbopack
• Inconsistent behavior between dev and production
• Breaking changes when switching from Webpack to Turbopack

Workaround

Disable Turbopack for development:

{
  "scripts": {
    "dev": "next dev"  // Remove --turbopack flag
  }
}

Or use @layer blocks instead of import attributes:

@import url('https://unpkg.com/papercss/dist/paper.min.css');

@layer external {
  /* Unfortunately this doesn't work for external imports */
}

Environment

Operating System:
  Platform: darwin
  Arch: arm64
Binaries:
  Node: 20.x
  pnpm: 10.18.2
Relevant Packages:
  next: 15.5.6
  react: 19.2.0
  react-dom: 19.2.0

Additional Context

This affects any Next.js project trying to use modern CSS cascade layers with external stylesheets. The CSS Cascade 5 spec explicitly supports this syntax:

@import <url> [layer | layer(<layer-name>)]? <media-query-list>?;

Related

• Upstream Lightning CSS bug: https://github.com/parcel-bundler/lightningcss/issues/1074
• CSS Cascade 5 spec: https://www.w3.org/TR/css-cascade-5/#at-import