eslint-plugin-tailwindcss icon indicating copy to clipboard operation
eslint-plugin-tailwindcss copied to clipboard

[Feature request] Automatically move conditional class names to the end of template literals

Open mpsijm opened this issue 2 years ago • 0 comments

Is your feature request related to a problem? Please describe. The documentation for the callees option mentions:

For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.

And the same goes for tagged template literals (specifically, I use https://github.com/michal-wrzosek/cntl).

Currently, this ESLint plugin appears to process template literals recursively. This means for rules like classname-order that each so-called "quasi" of the template literal is processed separately. For example:

cntl`p-3 ${red && "bg-red"} m-3` // Wrong order, because `m-3` should come before `p-3`

cntl`pt-0 p-3 ${red && "bg-red"} mt-0 m-3` // Currently gets corrected to:
cntl`p-3 pt-0 ${red && "bg-red"} m-3 mt-0` // But this is still the wrong order

Describe the solution you'd like It would be nice if this plugin would process all "quasi"s in a template literal as if they were one, while keeping the layout (spaces/newlines) intact. To fix this, there could be a new rule that automatically moves conditionals inside template literals to the end. So, the two examples above would be corrected to:

cntl`m-3 p-3 ${red && "bg-red"}`

cntl`m-3 mt-0 p-3 pt-0 ${red && "bg-red"}`

Describe alternatives you've considered I can manually move conditional class names to the end of template literals, but this is tedious and I'd like to automate it.

Additional context I'd be happy to help out with writing this rule, but I'd first like to discuss the implementation of it. This feature could be built into the classname-order rule, or be a separate rule that can be enabled/disabled independently of the classname-order rule. In the first case, I'm not sure how to enforce that this new rule is always executed before the classname-order rule. In the second case, we'd need to document how the two rules interact somewhere.

mpsijm avatar Apr 22 '22 12:04 mpsijm