search

heybourn / headwind

An opinionated Tailwind CSS class sorter built for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=heybourn.headwind
MIT License
1.37k stars 46 forks source link

Class sorting is not working when arbitrary value is used #183

Open snax4a opened 2 years ago

snax4a commented 2 years ago

Hi,

I noticed that plugin is not sorting classes of the element if there is at least one arbitrary value.

This will not be sorted because of w-[200px] class used

<div className="px-5 w-[200px] py-6 justify-center flex flex-col"></div>

This works:

<div className="px-5 py-6 justify-center flex flex-col"></div>
leoriviera commented 2 years ago

I've just come across this issue too. Any way to fix it or work around it?

ruridge commented 1 year ago

Still no word on how to resolve this?

sina-salahshour commented 10 months ago

I think the problem is caused because the extension sorts the classes based on an array of string(so it doesn't match dynamic tailwind classes), i think i would be better to use regex instead and include the arbitrary values alos.

https://github.com/heybourn/headwind/blob/ae5d26f7ec9b1923705abca3a85b8be4fc3904ad/package.json#L57-L66

https://github.com/heybourn/headwind/blob/ae5d26f7ec9b1923705abca3a85b8be4fc3904ad/src/utils.ts#L37-L41

it would also be much less code. currently there are 5216 lines only for specifying tailwind class names (with the dynamic ones missing)

az-nextsec commented 1 week ago

This is still an issue unfortunately :(