[solved] [Prettier Plugin] 0.5.9 vs 0.5.10 place of min-h-*

[Shinigami92]

I just updated from 0.5.9 to 0.5.10 and it makes some new formatings
Most of them are totally fine 👌

But one is weird to me:

- w-25vw min-h-10 relative flex flex-col
+ w-25vw relative flex min-h-10 flex-col

in 0.5.9 the min-h-10 was near the w-25vw
now in 0.5.10 it is "far away" from that and in the middle of a flex + flex-col

🤔

I prefer the 0.5.9 order, is there anything that could be done to change this behavior back? (except of pinning the dependency 😉)

[adamwathan]

Hey! I think what you're seeing here is that prior to Tailwind CSS v3.4, min-h-10 was not a class, and since unrecognized classes are put first, w-25vw and min-h-10 are both sorted to the front since neither are built-in Tailwind classes. In Tailwind CSS v3.4, min-h-10 does exist so it's sorted to the right place.

The correct sort order here is:

relative flex min-h-10 w-[25vw] flex-col

...but you'll only see that if using w-[25vw] with the arbitrary value like that, since it's not a real class without the square brackets.

If you've configured your tailwind.config.js file to include these extra values then it seems like the Prettier plugin is not able to find your config file and doesn't know about those classes.

If you can share a complete reproduction someone can definitely point out the specific issue 👍

[Shinigami92]

Pls dont slap me senpai, but we use UnoCSS 🤪
I will try w-[25vw] tomorrow (I mean logically, so Tuesday...), might be fine with that, if it works 🙂

[Shinigami92]

Ok, the [x] syntax is working fine
I swapped all occurrences to that, so it is now also consistent 👍