Lightning CSS: @import layer() Bug Reproduction

This repository demonstrates a bug in Lightning CSS where @import layer information is lost when analyzeDependencies is enabled.

This is referenced in the following issues:

• parcel-bundler/lightningcss#1074

Bug Description

When using Lightning CSS's analyzeDependencies option (required for bundlers), the layer() function information from @import rules is lost in the dependency metadata.

Example

Input CSS:

@import url("styles.css") layer(external) not print;

Expected dependency object:

{
  type: 'import',
  url: 'styles.css',
  layer: 'external',  // ❌ MISSING
  media: 'not print'
}

Actual dependency object:

{
  type: 'import',
  url: 'styles.css',
  // layer field is missing
  media: 'not print'
}

Impact

This bug breaks:

• Turbopack (used in Next.js) - Cannot preserve CSS cascade layers from import rules
• Any bundler using Lightning CSS with analyzeDependencies
• CSS cascade layer ordering - Critical for modern CSS architecture

Reproduction

Prerequisites

• Node.js 18+
• npm

Steps

1. Clone this repository

2. Install dependencies:

   npm install

3. Run the test:

   npm test

Expected Output

The test will show:

• ✅ Without analyzeDependencies: layer information preserved
• ❌ With analyzeDependencies: layer information missing

Environment

• Lightning CSS npm package: v1.30.2 (Rust crate v1.0.0-alpha.68) - Turbopack (Next.js): Uses Rust crate v1.0.0-alpha.68
• Node.js: v20+
• OS: macOS/Linux/Windows

CSS Specification

According to the CSS Cascade 5 spec, @import supports:

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

The layer() function is valid CSS.

Related Issues

This affects:

• Next.js Turbopack users trying to use CSS cascade layers with external imports
• Any project using Lightning CSS in bundler mode that depends on CSS layers

Additional Context

The bug appears to be in the dependency extraction logic. While Lightning CSS correctly:

• ✅ Parses layer() syntax without errors
• ✅ Preserves it in output when not analyzing dependencies
• ✅ Preserves media queries in dependency metadata

It fails to:

• ❌ Include layer field in dependency objects
• ❌ Provide any way to recover layer information from dependencies

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