How to enable formatting for class names in html?

[csntr]

I almost completely covered all my formatting and linting needs but there is still 1 thing which is that classes are just not getting formatted.

class="test-sm
                  ml-2
            overflow-hidden
            white-space-nowrap text-overflow-ellipsis"

If I leave this in one line then max length complains. Essentially nothing is fixed that is inside the class, I can leave empty spaces, bad tabbing or anything there.

In my eslint config I currently have:

export default withNuxt(
  antfu(
    {
      formatters: {
        css: true,
        html: true,
      },
      lessOpinionated: true,
    },
    {
      rules: {
        'style/max-len': ['error', 80, { ignoreComments: true }],
        'vue/max-attributes-per-line': ['error', {
          singleline: {
            max: 1,
          },
          multiline: {
            max: 1,
          },
        }],
      },
    },
  ),
)

Any help would be greatly appreciated! Thank you!

[zanfee]

Tailwind Labs is experimenting with an update for their prettier plugin that addresses the whitespace problem and removes duplicate class names: https://x.com/reinink/status/1795907080139743709?t=bsdvHa7L9oFaa52owAf8ww&s=19

Not sure if this is the right way to include this in this config as there is an UnoCSS ESLint config aswell. But might still be useful as a resource or workaround when it's ready.

[antfu]

To do that properly, we would need an HTML parser in ESLint. There are a few in the community but I haven't done the research. I don't usually work on HTML files directly so there is little incentive for me to work on that any sooner. But open for proposes (ideally it would be handle in the UnoCSS plugin)