CSS line wrapping

[artola]

Environment information

CLI:
  Version:                      1.9.3
  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:           "v20.13.1"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "yarn/4.5.0"

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  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(false)
  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:                  Single
  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:                      false
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Quote style:                  Single

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": "https://biomejs.dev/schemas/1.9.3/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "defaultBranch": "master",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": true,
    "ignore": []
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 80,
    "attributePosition": "auto",
    "bracketSpacing": false
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "a11y": {
        "useAriaPropsForRole": "off",
        "useFocusableInteractive": "off",
        "useSemanticElements": "off"
      },
      "correctness": {
        "useExhaustiveDependencies": "off"
      },
      "style": {
        "useFilenamingConvention": {
          "level": "error",
          "options": {
            "strictCase": false,
            "requireAscii": true,
            "filenameCases": ["kebab-case", "PascalCase", "export"]
          }
        },
        "useImportType": "off",
        "noNonNullAssertion": "off",
        "noParameterAssign": "off"
      },
      "suspicious": {
        "noExplicitAny": "off"
      }
    }
  },
  "assists": {
    "enabled": true,
    "actions": {
      "source": {
        "sortJsxProps": "off",
        "useSortedKeys": "off"
      }
    }
  },
  "javascript": {
    "formatter": {
      "jsxQuoteStyle": "double",
      "quoteProperties": "asNeeded",
      "trailingCommas": "all",
      "semicolons": "always",
      "arrowParentheses": "always",
      "bracketSameLine": false,
      "quoteStyle": "single"
    }
  },
  "css": {
    "formatter": {
      "quoteStyle": "single"
    }
  }
}

Playground link

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

Code of Conduct

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

[eryue0220]

I could try to solve it.

[seeintea]

I've had a few attempts, but that task has already been assigned, so I can offer some thoughts on that as well as some questions I'm having

line is 80chars + 2 indent with a max of 80：this one is because after processing the fill, it encounters an element that can be inserted directly, I think we need to calculate the length of this fill before processing the fill and check the next element is it possible to directly insert

lines should wrap on overflow to improve readability: while I was researching this issue, I discovered something else

html {
  font-family: system-ui, -apple-system,
}

in prettier will be processed as

html {
  font-family:
    system-ui,
    -apple-system;
}

but if you remove -apple-system 's -, will be processed as

html {
  font-family: system-ui, -apple-system,
}

they think - is operator, it's very unreasonable

maybe for css values, If , is present and we can just expand it