Selector indentation after CSS comment wrap

[fregante]

Environment information

CLI:
  Version:                      1.9.4
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_PATH:               unset
  BIOME_LOG_PREFIX_NAME:        unset
  BIOME_CONFIG_PATH:            unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v23.1.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "npm/10.9.0"

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

Formatter:
  Format with errors:           true
  Indent style:                 Tab
  Indent width:                 2
  Line ending:                  Lf
  Line width:                   80
  Attribute position:           Auto
  Bracket spacing:              BracketSpacing(true)
  Ignore:                       []
  Include:                      []

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

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

CSS Formatter:
  Enabled:                      true
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Quote style:                  Single

GraphQL Formatter:
  Enabled:                      true
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Bracket spacing:              unset
  Quote style:                  unset

Workspace:
  Open Documents:               0

Configuration

{
    "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
    "vcs": {
        "enabled": true,
        "clientKind": "git",
        "useIgnoreFile": true
    },
    "formatter": {
        "enabled": true,
        "formatWithErrors": true,
        "indentStyle": "tab"
    },
    "javascript": {
        "formatter": {
            "enabled": false
        }
    },
    "json": {
        "formatter": {
            "enabled": false
        }
    },
    "css": {
        "formatter": {
            "enabled": true,
            "quoteStyle": "single"
        },
        "linter": {
            "enabled": true
        }
    },
    "graphql": {
        "formatter": {
            "enabled": true
        }
    }
}

Playground link

https://biomejs.dev/playground/?indentStyle=space&files.main.css=LwAqACAAcwBvAG0AZQAgAG0AZQBkAGkAdQBtACAAbABvAG4AZwAgAGMAbwBtAG0AZQBuAHQAIAAqAC8ACgAuAHMAbwBtAGUAIABzAGUAbABlAGMAdABvAHIAIAB7AAoAIAAgAGIAYQBjAGsAZwByAG8AdQBuAGQAOgAgAHIAZQBkADsACgB9AAoACgAvACoAIABzAG8AbQBlACAAbQBlAGQAaQB1AG0AIABsAG8AbgBnACAAYwBvAG0AbQBlAG4AdAAgACoALwAKAC4AbABpAG4AZQAxACAAcwBlAGwAZQBjAHQAbwByACwACgAvACoAIABzAG8AbQBlACAAbQBlAGQAaQB1AG0AIABsAG8AbgBnACAAYwBvAG0AbQBlAG4AdAAgACoALwAKAC4AbABpAG4AZQAyACAAcwBlAGwAZQBjAHQAbwByACAAewAKACAAIABiAGEAYwBrAGcAcgBvAHUAbgBkADoAIAByAGUAZAA7AAoAfQA%3D

Code of Conduct

• [X] I agree to follow Biome's Code of Conduct

[fregante]

Weird, your formatter bug report template doesn't have an "explanation/description" field.

In short, this piece of CSS ends up being indented badly due to the comment, but only for the second selector:

/* some medium long comment */
.line1 selector,
/* some medium long comment */
.line2 selector {
  background: red;
}

Is indented as

/* some medium long comment */
.line1 selector,
/* some medium long comment */
  .line2
  selector {
  background: red;
}

I assume it's because the comment is being considered "part of the selector", so indenting the second line makes sense (ish). But this logic only applies to the second selector in the selector list.

I expect both selectors to have the same exact indentation (the input CSS is already "correctly indented" IMHO)

Note that Prettier does not support indentation at all in this case:

• https://github.com/prettier/prettier/issues/15356