Formatter: Multiline attribute splitting breaks block highlighting in vscode

[dombarnes]

Input:

<div data-slot="card-header" class="border-border @container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 border-b px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6">
    <div data-slot="card-title" class="flex items-center gap-2 text-lg font-semibold"></div>
</div>

Output:

<div
    data-slot="card-header"
    class="
      border-border @container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2
      border-b px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6
    "
>
    <div data-slot="card-title" class="flex items-center gap-2 text-lg font-semibold">
</div>

Expected:

<div
      data-slot="card-header"
      class="
        border-border @container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2
        border-b px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6
      "
  >
    <div data-slot="card-title" class="flex items-center gap-2 text-lg font-semibold">
</div>

VSCode offers a feature that adds a colour indicator to indented blocks to help aid visual navigation and being able to see where tags close. Putting the > at the end of an opening tag breaks this highlighting, as seen eblow

Playground:
N/A

Additional context:

I'd love a formatter option to configure wrapping behaviour a bit more. Personally I am usually happy not to new line attributes, and kinda hate putting > on their own lines

[marcoroth]

Potentially a duplicate of #928

[marcoroth]

@dombarnes out of curiosity, what would be your preferred way of formatting this, so we still have a sense of hierarchy?