Fails to sort for arbitrary-value class

[DanikVitek]

When I use the rustywind to sort classes and the string contains a class like shadow-[0_2px_2px_rgba(0,0,0,0.2)], it refuses to sort the entry completely and treats it as sorted. When I temporarily replace the class with something simpler like shadow-sm it works fine.
I suppose this has to do with the default class regex so it needs tweaking

[timokoesters]

It looks like this was fixed in #99. Can you make a new release?

[therealparmesh]

This doesn't work with arbitrary selectors like [&.htmx-request]:h-[unset].

[therealparmesh]

Tracking arbitrary selectors here: #115

[praveenperera]

We can start adding more of the arbitrary properties into the default sorter, but you could also use your own.

But the best solution it to point RustyWind to the css file outputted by Tailwind, that way everything should be sorted correctly.

rustywind --output-css-file <path to the tailwind generated css file>

@therealparmesh @DanikVitek

[jondkinney]

I see #76 but can anyone confirm that pointing to your output css file in this way actually sorts in the same order as the prettier plugin? I have this set up and it is definitely not working that way for me. In fact, it frequently doesn't even re-sort at all when it runs unless I move the class names to the end. Could be something I'm doing wrong, or something I'm not getting added to my tailwind output file?

With the path to the built tailwind css file specified, I can move many classes around in the class string and running rustywind doesn't re-format them. If I remove the path to the built css file, then it does at least consistently "put them back" to the defaults based on the tools's internal sorting mechanism.

The https://github.com/tailwindlabs/prettier-plugin-tailwindcss VS Code extension has an on-demand sorter Tailwind CSS: Sort Selection that does match the prettier plugin output, but you have to run it on every class attribute's class list selection manually, and that's not practical. But it does serve as a good check for whether a different tool is matching the expected output.

I'm not quite sure where to go from here. I'm struggling to get reliable (and official, I guess) sort-order to work inside of Rails ERB view templates. Though, this regex does at least find the ruby hash key variant of class: "".

rustywind --custom-regex \"(?:class|className)(?:=|:)(?:\\s*?)[\\\"'](\\s*[^<\\\"']*\\s*)[\\\"']\" --write

So if I can figure out how to get the right order, I can match on the spots that have the class names in them!

[praveenperera]

@jondkinney can you give me some example output.css and html files that’s not working so I can I build test cases around them? Thanks

[therealparmesh]

I see this too - I think it's a race condition of sorts. My guess (I'll take a closer look when I can) is that you run the Tailwind build based on the unsorted classes, which build a CSS file with the classes in that order, and then rustywind sorts based on that which retains the order.