[Prettier Plugin] Support sorting class arrays

[PhilippMolitor]

Many use cases include putting class names in arrays, take cva for example.

Autocomplete support for arrays works with the experimental vscode extension setting:

{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

When using the prettier plugin, and doing something like:

const button = cva(["font-semibold", "border", "rounded"])

sorting will only work inside a single string, but not for the array. This problem applies to popular utilities such as clsx as well.

[gobsonret323]

In your JavaScript project, firstly you have to install and configure Prettier, you can do that easily by installing prettier as a dev dependency by running this command. After installing Prettier, we'll create a configuration file at the root of your project called .prettierrc. In that file, you can write JSON to configure prettier fitting to your needs. This is my configuration. MyCCPay Log In

[PhilippMolitor]

Please be aware: this user is most likely a bot, and the "MyCCPay" link reeks of fraud.

[Robertopera]

HI , I properly read your question i am cybersecurity student so i can tell you one thing is that if you face the issue with experiencing is related to sorting class names within an array when using the Tailwind CSS class pattern in code editors like Visual Studio Code (VSCode) with the Tailwind CSS experimental VSCode extension and the Prettier plugin.
The experimental tailwindCSS.experimental.classRegex setting in the VSCode extension allows you to define custom regular expressions to improve syntax highlighting and autocomplete support for Tailwind CSS class names. To address the sorting problem within arrays, you can modify the regular expression to handle the array syntax. Here's an example of how you can update the setting:
code : official site

{"tailwindCSS.experimental.classRegex": [
["cva\(([^\\)])\)", "\[(.?)\]|['"]([^'\"]).?['"`]|([^\\s]+)"]
]
}
With this updated configuration, the class names within the cva([...]) array, such as ["font-semibold", "border", "rounded"], should now be properly sorted and supported by autocomplete features. Keep in mind that this is an experimental feature, and it may not work perfectly in all scenarios. Make sure to review the documentation and updates for the Tailwind CSS experimental VSCode extension for any changes or improvements regarding this functionality.

[PhilippMolitor]

Thank you for this idea. I wasn't sure if the experimental setting would support custom syntaxes like that, especially because the properties are not contained in the same single string literal.
I will try this out as soon as I get back to that project again.
If this works as expected, we should probably communicate this to the authors of cva and tailwind, so it can be added to the docs.

[ITenthusiasm]

FWIW, I can sort an array that spans a single line. But when I try to make the array of CSS classes spread across multiple lines, prettier isn't able to do the class sorting anymore. Any ideas on how to fix?

[vishals9711]

Did we ever get a workaround to this ?