📝 CSS value lists are wrapped unsemantically

[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:           "v22.14.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "bun/1.1.32"

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

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

JavaScript Formatter:
  Enabled:                      true
  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:                      true
  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:                  Double

GraphQL Formatter:
  Enabled:                      false
  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
  },
  "files": {
    "ignore": [
      ".vscode",
      "**/*.json",
      "**/public/mockServiceWorker.js",
      "libs/util-types/src/swaggerTypes.ts",
      "apps/app-service/openapi.yaml",
      "apps/app-service/api/templates/api/index.html"
    ]
  },
  "javascript": {
    "jsxRuntime": "reactClassic"
  },
  "formatter": {
    "indentStyle": "space"
  },
  "organizeImports": {
    "enabled": false
  },
  "linter": {
    "rules": {
      "recommended": false,
      "style": {
        "useImportType": "error"
      }
    }
  }
}

Playground link

https://biomejs.dev/playground/?files.style.css=YgBvAGQAeQAgAHsACgAgACAAZgBvAG4AdAAtAGYAYQBtAGkAbAB5ADoACgAgACAAIAAgACIATgBvAHQAbwAgAFMAYQBuAHMAIgAsAAoAIAAgACAAIAAtAGEAcABwAGwAZQAtAHMAeQBzAHQAZQBtACwACgAgACAAIAAgAEIAbABpAG4AawBNAGEAYwBTAHkAcwB0AGUAbQBGAG8AbgB0ACwACgAgACAAIAAgACIAUwBlAGcAbwBlACAAVQBJACIALAAKACAAIAAgACAAUgBvAGIAbwB0AG8ALAAKACAAIAAgACAAIgBIAGUAbAB2AGUAdABpAGMAYQAgAE4AZQB1AGUAIgAsAAoAIAAgACAAIABBAHIAaQBhAGwALAAKACAAIAAgACAAcwBhAG4AcwAtAHMAZQByAGkAZgAsAAoAIAAgACAAIAAiAEEAcABwAGwAZQAgAEMAbwBsAG8AcgAgAEUAbQBvAGoAaQAiACwACgAgACAAIAAgACIAUwBlAGcAbwBlACAAVQBJACAARQBtAG8AagBpACIALAAKACAAIAAgACAAIgBTAGUAZwBvAGUAIABVAEkAIABTAHkAbQBiAG8AbAAiACwACgAgACAAIAAgACIATgBvAHQAbwAgAEMAbwBsAG8AcgAgAEUAbQBvAGoAaQAiADsACgAgACAACgAgACAAdAByAGEAbgBzAGkAdABpAG8AbgA6AAoAIAAgACAAIABjAG8AbABvAHIAIAAwAC4AMQA1AHMAIABlAGEAcwBlAC0AaQBuAC0AbwB1AHQALAAKACAAIAAgACAAYgBhAGMAawBnAHIAbwB1AG4AZAAtAGMAbwBsAG8AcgAgADAALgAxADUAcwAgAGUAYQBzAGUALQBpAG4ALQBvAHUAdAAsAAoAIAAgACAAIABiAG8AcgBkAGUAcgAtAGMAbwBsAG8AcgAgADAALgAxADUAcwAgAGUAYQBzAGUALQBpAG4ALQBvAHUAdAAsAAoAIAAgACAAIABiAG8AeAAtAHMAaABhAGQAbwB3ACAAMAAuADEANQBzACAAZQBhAHMAZQAtAGkAbgAtAG8AdQB0ADsACgAgAAoAIAAgAGIAbwB4AC0AcwBoAGEAZABvAHcAOgAKACAAIAAgACAAMAAgADAAIAAwACAAMQBwAHgAIAAjAGYAZgBmACwACgAgACAAIAAgADAAIAAwACAAMAAgADMALgAyAHAAeAAgAHIAZwBiAGEAKAA4ADkALAAgADgAOQAsACAAMgAzADUALAAgADAALgAyADUAKQA7AAoAfQA%3D

Code of Conduct

• I agree to follow Biome's Code of Conduct

[fregante]

I think your bug report template should include a field to describe the problem.

* {
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 3.2px rgba(89, 89, 235, 0.25),
    0 0 0 3.2px rgba(89, 89, 235, 0.25),
    0 0 0 3.2px red,
    0 0 0 3.2px rgba(89, 89, 235, 0.25);
}

This input CSS is already well-formatted. Lists wrap after each item. Unfortunately Biome wraps them as:

* {
	box-shadow: 0 0 0 1px #fff, 0 0 0 3.2px rgba(89, 89, 235, 0.25), 0 0 0 3.2px
		rgba(89, 89, 235, 0.25), 0 0 0 3.2px red, 0 0 0 3.2px
		rgba(89, 89, 235, 0.25);
}

which is much less readable and also has a line-break inside the third and last item.

[wanghaoPolar]

Just took a look into it, I think I should be able to fix this. Can you help to assign this issue to me? thanks! @ematipico