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

What is the logic of the default sorting? #171

Closed ouweiya closed 2 years ago

ouweiya commented 2 years ago

It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.

The class names are sorted in the given order, but what is the logic of the default sorting? It seems to be the positioning attribute, then the font attribute, and then the background attribute?

raphaelgoetter commented 2 years ago

Same question :)

hacknug commented 2 years ago

The first prototype of the extension used a list of properties I shared with Ryan over Discord. It wasn't complete and we never got to discuss how that would look like before releasing the extension.

The original inspiration for this, was @ mdo's code-guide project. You can read more about their approach here: https://codeguide.co/#css-declaration-order

Then what I did was changing the order of some of those properties: eg. when looking at three absolutely-positioned items, the most relevant property to me is their z-index so I moved that to the start of the classes to make it easier to read. Other changes were having color as part of the Visual group and moving this whole group before Typography.

Since this is extremely opinionated and has to account for all kinds of new properties being added to core or via third-party plugins, headwind.defaultSortOrder was added to allow users of the extension to customize to their liking.