heybourn / headwind

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

Add Sort Selection Command #90

Closed imjoshellis closed 3 years ago

imjoshellis commented 4 years ago

I thought I would get the ball rolling on #65 because that feature would help me quite a bit, and I imagine others would appreciate it.

So far, the proposed added command is really simple.

It uses a regex to make sure the text looks like CSS classes.

Then, if it matches the regex, it sorts the selection. Otherwise, it throws an error message.

I'm happy to adjust it and/or add documentation if you're interested in adding this feature.

Resolves #65

praveenperera commented 3 years ago

Hey @imjoshellis could you explain the difference between selectionRegex and the existing classRegex? Could we use the existing classRegex to avoid adding a new config?

imjoshellis commented 3 years ago

@praveenperera it's been a while, so I'm not 100% remembering my motivations.

But I believe at the time, my target use case was sorting a sub-selection of classes that weren't easy to make a wrapper-based regex, so I made my own regex that assumed the user would only select CSS classes.

Looking at it again, I'm not sure if that was the best assumption to make.

Ultimately, the question is -- what kind of selection do we expect users to make?

My use case (I don't do this anymore) was something like this where writing a regex wasn't simple since the class names were in a string by themselves without any easy-to-target wrapper:

const classListVariableName = "px-4 text-gray-500 etc"
// ...
const Component = () => 
<div classNames={classListVariableName}>content</div>

Even if we keep it, I'm realizing there's no need to expose the selection regex as a config. It would be better to put it in the function since that's the only place it's used and we wouldn't expect users to want to change it.