The plugin does not order classes that are specified in a variable outside the className prop

[piedrahitapablo]

What version of prettier-plugin-tailwindcss are you using?

v0.2.5

What version of Tailwind CSS are you using?

v3.2.7

What version of Node.js are you using?

v18.14.2

What package manager are you using?

Yarn

What operating system are you using?

macOS

Reproduction URL

https://github.com/piedrahitapablo/prettier-tailwind-bug

Steps:

git clone git@github.com:piedrahitapablo/prettier-tailwind-bug.git
yarn install
yarn format

that should show you the git diff for the classes that are reordered

Describe your issue

The issue is that this plugin does not order classes that are specified in a variable outside the className prop. If you go to the minimal reproduction repo, you can see that I defined two variables (classes and classes2) that are later used inside the className prop, one inside a template string and the other one as the full value of className but the plugin does not reorder them. In line 24 I used the classnames package inside the className prop and the plugin picks the classes and reorders them, so it's not an issue with that package.

The behavior I would expect is that the plugin reorders those values. I know that can be tricky in some situations and using classnames inside the className prop should cover most cases.

Finally, if the plugin is working as intended, I think adding some clarification on the docs would be great, just saying that the plugin only reorders the classes defined inside the prop.

Happy to help if I can make a PR, just need some pointers on where to start.

Thanks!

[nanxiaobei]

facing the same demand

[gutisalex]

same issue when using class variance authority...

[NorrisWu0]

Would be great to see support for this. ❤️

[GreenTea124]

This extension allows custom matching patterns https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss via tailwindCSS.experimental.classRegex. Prettier plugin could support something simmilar. Though it probably wouldn't be very performant.

[MosheRivkin]

Check out the prettier-plugin-nativewind, it's allow you to customize
props functions and Tagged Templates.

[rodrigoehlers]

I agree that this is annoying, however I understand this is a difficult problem to solve. I would suggest having sorting of strings of variables whose names end in classname(s) (case-insensitive).

I can't prove it yet but I don't think this would impact runtime performance by too much. Would this be an option you would be open to add @reinink to the project? I'm happy to implement this.

[thecrypticace]

Hey, we've just merged #155 which provides a way for you to specify additional attributes, functions, and tagged template literals that should be sorted by the plugin. It's available via our insiders build and will be released in the next version of the plugin. We would like to get some feedback on this feature before we release it, so please give it a try and let us know what you think!

To test the new features you can install the insiders build like so:

npm install prettier-plugin-tailwindcss@insiders

[pawelblaszczyk5]

Hi, I've just wanted to let you know that I've added the insider version to my codebase today and everything works like a breeze! I've managed to configure it to sort every Tailwind occurrence inside of my code. Awesome job and thank you a lot for this!