CSS: Layout using named grid lines

[Mario Pizzinini]

Environment information

CLI:
  Version:                      1.8.0
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v20.14.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "npm/10.8.1"

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  VCS disabled:                 true

Linter:
  JavaScript enabled:           true
  JSON enabled:                 true
  CSS enabled:                  false
  Recommended:                  true
  All:                          false

Rule name

Unexpected value or character

Playground link

https://biomejs.dev/playground/?code=OgBoAG8AcwB0ACAAewAKACAAIAAtAC0AYwBvAGwAdQBtAG4AcwA6ACAAWwBmAHUAbABsAC0AcwB0AGEAcgB0AF0AIAAxAGYAcgAgAFsAbQBhAGkAbgAtAHMAdABhAHIAdABdACAANAA4ADAAcAB4ACAAWwBtAGEAaQBuAC0AZQBuAGQAXQAgADEAZgByACAAWwBmAHUAbABsAC0AZQBuAGQAXQA7AAoAfQAKAA%3D%3D

Expected result

This CSS is fine and Biome should accept it as it did in versions prior 1.8.0

:host {
  --columns: [full-start] 1fr [main-start] 480px [main-end] 1fr [full-end];
}

Biome linter error:

✖ Unexpected value or character.

  --columns: [full-start] 1fr [main-start] 480px [main-end] 1fr [full-end];
  
ℹ Expected one of:

  - identifier
  - string
  - number
  - dimension
  - ratio
  - custom property
  - function

Code of Conduct

• I agree to follow Biome's Code of Conduct

[Ken Xu]

+1