heybourn / headwind

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

support classnames #93

Open AdrienLemaire opened 4 years ago

AdrienLemaire commented 4 years ago

Is your feature request related to a problem? Please describe.

I'm using tailwindcss-classnames by @muhammadsammy in my typescript project to have typed classes. But unfortunately, I do not get auto-sorting of classname arguments.

Describe the solution you'd like Currently, we can get sorting with

return (
- <div className="bg-red-500 container mx-auto text-white" />
+ <div className="container mx-auto text-white bg-red-500" />
);

I'd like the following snippet to also get sorted the same way.

import {classnames as cn} from 'tailwindcss-classnames';

- const divCn = cn("bg-red-500", "container", "mx-auto", "text-white");
+ const divCn = cn("container", "mx-auto", "text-white", "bg-red-500");

return (
  <div className={divCn} />
);

Note that it should also work with multilines:

const divCn = cn(
-  "bg-red-500", 
  "container", 
  "mx-auto",
-  "text-white"
+  "text-white",
+  "bg-red-500", 
);

Describe alternatives you've considered Current, I'm using vim fu to sort alphabetically my classes, which is suboptimal. I'd really like to enjoy headwind's sort order.

heybourn commented 4 years ago

This isn't something I plan on adding support for at this stage but I'm always open to PR's 👍

tylersayshi commented 3 years ago

Was this fixed with #109? I noticed it was mentioned as getting resolved, but I cannot get the sorting to work with and sort of classname function still. Demo of sort working with normal className string, but not the function call:

headwind