[Prettier Plugin] Make it possible to sort class names in arbitrary strings

[nikwen]

Sometimes it is necessary to have class names in arbitrary strings. It would be great to be able to sort them using the Tailwind CSS Prettier plugin.

Examples:

var className1 = 'sm:p-1 p-0';
let className2 = "sm:p-1 p-0";
const className3 = `sm:p-1 p-0`;

let obj1 = {
  className: "sm:p-1 p-0",
};

let obj2 = {
  ["className"]: Math.random() >= 0.5 ? "sm:p-1 p-0" : "sm:p-2 p-1",
};

This was also requested in tailwindlabs/prettier-plugin-tailwindcss#97.

Implementation ideas

Comments

By @jamescmartinez:

// prettier-plugin-tailwindcss
const base = "mb-4 text-white"

Via the Tailwind CSS Intellisense plugin

There was also a discussion about implementing sorting functionality in the Tailwind CSS Intellisense plugin. I'd advocate against that because:

• A lot of devs use Jetbrains IDEs instead of VS Code (myself included).
• It cannot be automated using tools such as husky and lint-staged.

[joulev]

Agreed about the Intellisense plugin part. Although most if not all members in my team, me included, use VSCode, our workflow should not be made dependent on any specific editors.

[RoyRao2333]

Yes, I absolutely support this proposal. Sometimes we have some duplicated components and we only wanna take the className out as a variable. But then everytime you edit that variable, you can't be sure the order of those classes is right.

[Jorge-Luis-Rangel-Peralta]

I also think this would be useful