fix(turbopack): handle valid name-only container queries by arpankanwer · Pull Request #98273 · vercel/next.js · GitHub
Skip to content

fix(turbopack): handle valid name-only container queries - #98273

Open
arpankanwer wants to merge 1 commit into
vercel:canaryfrom
arpankanwer:fix/turbopack-css-named-container-98261
Open

fix(turbopack): handle valid name-only container queries#98273
arpankanwer wants to merge 1 commit into
vercel:canaryfrom
arpankanwer:fix/turbopack-css-named-container-98261

Conversation

@arpankanwer

Copy link
Copy Markdown

Fixes #98261

What

Turbopack build failed with Parsing CSS source code failed / Unexpected end of input on valid name-only @container queries:

@supports (container-type: inline-size scroll-state) {
  @container scroll-content {
    .foo { max-width: 100cqw; }
  }
}

This CSS is valid per CSS Containment Module Level 3 (named containers + scroll-state) and is emitted by nhsuk-frontend@10.6.1.

Why

lightningcss (1.33 / 1.0.0-alpha.72) correctly supports name-only containers via Option<ContainerCondition>. With error_recovery:true, it still emits an EndOfInput warning when parsing @container <name> { (no condition) and recovers with None.

turbopack-css/src/process.rs mapped ParserError::EndOfInput to IssueSeverity::Error, so the warning surfaced as a build error:

./src/app/repro.css:2:29 Unexpected end of input

How

Demote EndOfInput to Warning in the severity match (same as other recoverable parser warnings like UnsupportedPseudo*). The stylesheet already parses and minify/to_css succeed; only the severity caused the failure.

Repro: cptiv2020/turbopack-parsing-issue-repronext@canary before fix fails at 2:29, after fix no longer fails. cargo check -p turbopack-css passes. Direct lightningcss test with error_recovery:true shows 1 warning EndOfInput at 1:29 now treated as Warning.

Test

  • cargo check -p turbopack-css — pass
  • npm run build on repro with next@canary before: Turbopack error 2:29; after fix: expected to pass (warning only)
  • lightningcss direct parse with error_recovery:trueEndOfInput warning now Warning

Name-only @container (e.g. @container scroll-content) is valid per
CSS Containment Module Level 3. With error_recovery enabled,
lightningcss emits EndOfInput warning and recovers with None
condition, but Next treated it as Error causing Turbopack build
failure for valid CSS like nhsuk-frontend.

Demote EndOfInput to Warning in turbopack-css severity mapping.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Turbopack build fails to parse valid CSS: named scroll-state container query

1 participant