Extract Sort Logic into Separate Package
Closed this issue · 5 comments
Is your feature request related to a problem? Please describe.
I would like to write a Prettier plugin that automatically sorts my Tailwind classes, rather than needing to run the code through a VSCode plugin. This will allow me to ensure classes are sorted correctly as part of my CI configuration.
Describe the solution you'd like
Ideally, I would like to use the class sorting functionality from Headwind directly, rather than implementing something very similar from scratch.
What I'm imagining is that the actual sort logic is extracted into something like a @headwind/core package that would allow other tools to do something like this:
const { sortClasses } = require('@headwind/core');
/// whatever
sortClasses(classString, options);where my own code will handle
- File parsing and extracting the class string
- Reading the options from the file
- Updating the file
Describe alternatives you've considered
Some alternatives include
- Waiting for the Tailwind team to build something themselves
Problem: Not really in the spirit of OSS; I'd love to see the community work on tools together, rather than waiting for them! - Writing my own custom Tailwind sorter
Problem: There would then be my own implementation, Headwind, and whatever Tailwind eventually makes first-party - Just copying the code from here
Problem: This package and my own would be in sync to start, but I'd be constantly trying to keep up with changes to this library
Additional context
If you're interested in the idea, I'd love to help out with getting this done! If you're not interested, that's OK too; I'm happy to just duplicate the logic if need be.
What happened to this, did you abandon it @alexlafroscia? We consider using headwind in a project but it doesn't really make sense imo if we cant run it in ci. So I really like your idea here.
Hey! Yeah, I did end up abandoning this I guess. I don't remember closing it necessarily, but it looks like I did 😅 I don't have a lot of open-source time these days but agree that this would be a really nice thing to support!
Ah I see, the same situation here 😉 I'll give you a ping here if I sometime in the future find some time to extract it into a prettier plugin! 🙂
I think part of the problem that I ran into was the fact that there is not a good way to generate the list of actual Tailwind classes generated by a Tailwind config without running all of Tailwind (including the actual CSS generation). I believe that Headwind assumes your class names match the default, but for my apps that's not the case. You'd want a piece of light-weight software that allows you to do something like
const listOfClassNames = generateClassNames(tailwindConfigObject);But... that doesn't actually exist in any way, including within Tailwind's source code itself. It's all tied up with PostCSS and actually running the transformations over the output CSS files. This was true at the time I was looking into this, at least; it may have changed by now, and (hopefully) will in the future, too.
IIRC I ran into a problem, then, where a Prettier plugin must run synchronously and, because Tailwind runs as part of PostCSS, it must be run (or I guess, is designed to be run?) asynchronously. I basically had to generate a faux Tailwind output CSS file from the config object and then parse it again with PostCSS to generate the list of classes actually used. With those things being incompatible I just put the whole thing down. If we had the kind of utility described above, we wouldn't have the sync/async problem, but... that's where things are right now.
Okay interesting, thanks for the writeup! For my team just matching as Headwind does would probably be sufficient, at least better than nothing. To have something that would handle everything from the tailwind config would've been incredible but running the generation of the tailwind classes and do the matching and ranking sounds pretty heavy to run on save. Might be wrong tho, I have quite limited experience in this area.