Wrap HTML attributes on their own lines, but only if the line length is exceeded

[jeroenvanrensen]

Description

Currently, I can choose between auto, which puts multiple attributes on the same line when wrapping, and force, which always inserts a new line.

Input

With this new feature, when I give like this input:

<a x-data="{ open: false }" x-init="alert(1)" @click="open = true" @click.away="open = false"
    class="bg-red-500 placeholder-gray-600 text-gray-700 p-8 text-white text-xs font-semibold uppercase tracking-wider hover:text-gray-800 focus:text-gray-800 focus:outline-none">
    Test
</a>

<button class="text-red" @click="alert(1);">Inner text</button>

Expected Output

I'd like to see this output:

<a
    x-data="{ open: false }"
    x-init="alert(1)"
    @click="open = true"
    @click.away="open = false"
    class="bg-red-500 placeholder-gray-600 text-gray-700 p-8 text-white text-xs font-semibold uppercase tracking-wider hover:text-gray-800 focus:text-gray-800 focus:outline-none">
    Test
</a>

<button class="text-red" @click="alert(1);">Inner text</button>

[andersbystrom]

I would also like to see an attribute that produces the above output. But only if the line length exceeds the wrap-line-length

Maybe you could add an additional attribute named expand-multiline, which respects wrap-line-length

By using force-expand-multiline, you get the above output, but it ignores wrap-line-length