search

schoero / eslint-plugin-readable-tailwind

ESLint plugin to automatically break up long tailwind class strings into multiple lines for better readability.
MIT License
62 stars 3 forks source link

Multiline breakpoint sorting small to large #27

Open Collexi-Dev opened 1 month ago

Collexi-Dev commented 1 month ago

It seems like you are sorting multiline breakpoints from none (mobile) -> large -> small, i.e.:

z-1 flex flex-col gap-4
lg:col-span-5 lg:col-start-3 lg:row-span-2 lg:row-start-2
md:col-span-6 md:col-start-2 md:row-span-2 md:row-start-2

While you are more likely to change your styles mobile first and scale up, meaning mobile -> small -> large it would make sense to sort them this way as well, is it possible to make this an opt-in rule?

Collexi-Dev commented 1 month ago

Update: I just noticed the official sorting does go from small to large, since improved only mentions "Same as official but also sorts by data-attributes" I didn't try it at first

schoero commented 1 month ago

I like that suggestion.

Update: I just noticed the official sorting does go from small to large, since improved only mentions "Same as official but also sorts by data-attributes" I didn't try it at first

I have noticed that the official order does not treat variants/modifiers differently than the normal classes. So they sometimes got mixed up in the order.

Example (not necessarily correct)

<img class="
  flex bg-red-500
  md:bg-blue-500
  border
" />

I wanted to always have variants/modifiers at the end, so thats why I added the improved order.

<img class="
  flex bg-red-500 border
  md:bg-blue-500
" />

There are a lot of discussions around sorting tailwind classes recently:

I think there should be more nuanced ways to sort tailwind classes that the current options don't provide, so I will definitely look into this in the future.