Skip to content

🐛 [css] Parser breaks on active-view-transition-type() pseudo-class with a user-defined identifier #6973

@half0wl

Description

@half0wl

Environment information

CLI:
  Version:                      2.1.2
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_PATH:               unset
  BIOME_LOG_PREFIX_NAME:        unset
  BIOME_CONFIG_PATH:            unset
  BIOME_THREADS:                unset
  NO_COLOR:                     unset
  TERM:                         xterm-256color
  JS_RUNTIME_VERSION:           v18.18.2
  JS_RUNTIME_NAME:              node
  NODE_PACKAGE_MANAGER:         pnpm/8.10.2

Biome Configuration:
  Status:                       Loaded successfully
  Path:                         biome.jsonc
  Formatter enabled:            true
  Linter enabled:               true
  Assist enabled:               true
  VCS enabled:                  false

Workspace:
  Open Documents:               0

What happened?

Using active-view-transition-type() with a custom identifier breaks the parser. Reproduction in playground.

Input:

html:active-view-transition-type(forwards) {
  &::view-transition-new(group) {
    box-shadow: var(--nested-canvas-shadow);
  }
}

Result:

main.css:7:34 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ expected `,` but instead found `forwards`
  
    5 │ }
    6 │ 
  > 7 │ html:active-view-transition-type(forwards) {
      │                                  ^^^^^^^^
    8 │   &::view-transition-new(group) {
    9 │     box-shadow: var(--nested-canvas-shadow);

According to the W3C spec [0], the active-view-transition-type() pseudo-class accepts a custom user-defined identifier where the parameter (forwards in this case) should be treated as valid [1].

[0] https://www.w3.org/TR/css-view-transitions-2/#the-active-view-transition-type-pseudo
[1] https://www.w3.org/TR/css-values-4/#identifier-value

Expected result

Parser should not throw an error.

Code of Conduct

  • I agree to follow Biome's Code of Conduct

Metadata

Metadata

Assignees

Labels

A-ParserArea: parserL-CSSLanguage: CSSS-Bug-confirmedStatus: report has been confirmed as a valid bugS-Help-wantedStatus: you're familiar with the code base and want to help the project

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions