[Prettier Plugin] Format to canonical class names?

[karlhorky]

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

Sometimes Tailwind CSS class names are more complex than they need to be

Describe the solution you'd like

Create something like suggestCanonicalClasses from the official Tailwind CSS VS Code plugin:

• https://x.com/adamwathan/status/1975579419335926176

@adamwathan: Cool improvement we just merged into our VS Code plugin — it'll now tell you when any Tailwind class you've used could be written in a simpler or more idiomatic way ✨

Alternatives considered

Maybe it belongs in an ESLint rule instead:

• https://x.com/karlhorky/status/1975592642093453778
• [Feature request] Canonical class name rule francoismassart/eslint-plugin-tailwindcss#426

[karlhorky]

Some feedback from @thecrypticace here:

• https://x.com/jordanpittman/status/1975601379382337906

In the prettier plugin this could be doable for some languages but not others. Some languages don't handle it when you change the length of the text. This is why whitespace collapsing + duplicate removal is disabled for a couple of them.

There's also a perf / memory cost to this and it's worth it for longer running processes where things are cached but maybe not for one-off invocations of prettier.

[Jisu-Woniu]

Hope this can be made into an ESLint rule. Prettier may not be a good place for this since it can lead to potential changes to code meaning.

[mehediScriptDev]

this definitely feels like an eslint rule, not a prettier one.

prettier's job is just to format code – spaces, line breaks, etc. it's not supposed to change what the code means.

changing a class like [display:flex] to flex is a logical change to make the code 'better', which is exactly what a linter like eslint is for.

plus, this kind of change can mess with prettier's formatting for some languages and would slow down the process.

an eslint rule with an auto-fix would be the perfect place for this.