Remove duplicate class names and spaces on sort

[jakeprins]

Awesome work on this plugin! The only thing Headwind is doing that's currently missing is also removing duplicate class names and extra spaces. Would be a nice addition.

// before
<div className=" text-white bg-slate-900 bg-slate-900   "></div>

// after formatting
<div className=" bg-slate-900 bg-slate-900 text-white   "></div>

// expected behavior
<div className="bg-slate-900 text-white"></div> // <-- trim

[reinink]

I dig the idea of removing duplicate classes! 👍

However, Prettier should already take care of extra spaces. I just gave this a try:

<!-- Before -->
<header class=" bg-grey-200 md:flex         hidden        ">

<!-- After -->
<header class="hidden bg-grey-200 md:flex">

[reinink]

Hmm, just realizing that while it does it for the class attribute, it doesn't do it for :class:

<!-- Before -->
<header :class="` bg-grey-200 md:flex         hidden        `">

<!-- After -->
<header :class="` hidden bg-grey-200         md:flex        `">

So, I suspect it probably also won't work with some other variations like className and ngClass (although I haven't tested these).

[Harry2D]

@reinink I can confirm it doesn't remove extra spaces for className

[camiant]

I did the idea of removing duplicate classes! 👍

will this feature be implemented in next releases?

[zommerberg]

It doesn't remove the spaces in svelte with class.

[jenstornell]

:class can include more than just the CSS classes. It can have methods etc, even inside the special kind of ticks. Maybe that's why it does not remove duplicate spaces, because it may have unwanted side effects.

But yes, please remove duplicate classes from class.

[snax4a]

Not only spaces but line breaks also should be removed