Reformat issue with css formatter

[ah-yu]

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:           "v18.14.2"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "npm/9.5.0"

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

Formatter:
  Format with errors:           false
  Indent style:                 Space
  Indent width:                 8
  Line ending:                  Lf
  Line width:                   80
  Attribute position:           Auto
  Ignore:                       []
  Include:                      []

JavaScript Formatter:
  Enabled:                      true
  JSX quote style:              Double
  Quote properties:             AsNeeded
  Trailing commas:              All
  Semicolons:                   Always
  Arrow parentheses:            Always
  Bracket spacing:              false
  Bracket same line:            false
  Quote style:                  Double
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Attribute position:           Auto

JSON Formatter:
  Enabled:                      true
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Trailing Commas:              unset

CSS Formatter:
  Enabled:                      true
  Indent style:                 Tab
  Indent width:                 0
  Line ending:                  Lf
  Line width:                   LineWidth(80)
  Quote style:                  Double

Workspace:
  Open Documents:               0

Configuration

{
  "css": {
    "formatter": {
      "enabled": true
    }
  }
}

Playground link

https://biomejs.dev/playground/?files.main.css=LwAqACAAaQBuAHAAdQB0ACAAKgAvAAoAIAAgAGYAbwBvAAoACgAgACAALwAqACAAYQAgAGMAbwBtAG0AZQBuAHQAIAAqAC8ACgAKACAAIAAuAGEAUgB1AGwAZQAgAHsACgAgACAAIAAgAGMAbwBsAG8AcgA6ACAAcgBlAGQACgAgACAAfQAKAAoACgAKAAoALwAqACAAZgBpAHIAcwB0ACAAZgBvAHIAbQBhAHQAIAAqAC8ACgBmAG8AbwAKAAkALwAqACAAYQAgAGMAbwBtAG0AZQBuAHQAIAAqAC8ACgAKAAkALgBhAFIAdQBsAGUAIAB7AAoACQBjAG8AbABvAHIAOgAgAHIAZQBkADsACgB9AA%3D%3D

Code of Conduct

• I agree to follow Biome's Code of Conduct

[ematipico]

It seems that Prettier has the same issue

[dyc3]

I think I've figured out the root cause. So a "complex selector" has 3 parts: left, combinator, and right.

In the initial input, the comment trivia is attached to the combinator on the trailing end. When reformatting, the parser attaches the trivia to the right on the leading end. This changes the text range of the combinator to no longer include the comment trivia (the length of the range goes from 18 to 1).

I have no idea how to fix this, so I'm unassigning myself for now.