Enhancement Proposal: Generalize into a Multi-Language Sort Plugin

[maekoya]

I'm really impressed with this extension! The way it leverages Tailwind's built-in sorting logic is a fantastic advantage over other sorting tools.(Also checked discussions about Tailwind CSS's getClassOrder.)

I once tried to build a similar Prettier plugin, but the complexity of handling ASTs and the need for language-specific parsers made it too challenging to pursue.

Summary

I was wondering if we could explore the possibility of making this a more universal sort plugin, not limited to Clojure. I think by adding these two configurable settings to the VS Code options, it could become a valuable tool for many languages:

• Regex Rules: Allow users to define regular expressions to match class attributes in various language formats.
• Support Languages: Enable users to specify the languages for which the sorting functionality should be active.

Example settings.json configuration:

"tailwindCssClojureClassSorter.tailwindClassRegexs": [
  ["<.+?class=(?:\"|')([^\"']+)(?:\"|').*?>", "(\\S+)", " "] // Append regex
],
"tailwindCssClojureClassSorter.supportLanguages": [
  "clojure",
  "mtml", // Append lang
  "htl" // Append lang
]

or

"tailwindCssClojureClassSorter.tailwindClassRegexs": [
  // Append lang & regexs
  "mtml": [
    ["<.+?class=(?:\"|')([^\"']+)(?:\"|').*?>", "(\\S+)", " "]
  ] 
]

Thanks for considering this suggestion.

[maekoya]

@garrett-hopper
What do you think about this matter?

If it's difficult to address, I'm also considering creating a Pull Request or forking and handling it as a separate plugin.

Thank you for your consideration.

[garrett-hopper]

@maekoya, feel free to fork or create a new plugin reusing parts of this!

It's something I think would be done by the Tailwind LSP itself in an ideal world. Because tailwindCSS.experimental.classRegex has to be configured to get LSP completions and colors, I think it'd be best if it was also responsible for the sorting.

When I originally implemented this, I'd done so by referencing the Prettier plugin which means it runs TW separate from the LSP. Later on, while looking into tailwind-tools.nvim, I discovered that the LSP exposes tailwindCSS/sortSelection which I think would be a better basis to build a better VSCode TW sorting plugin upon. I think ideally that plugin would hook into the LSP's tailwindCSS.experimental.classRegex configuration directly (not sure about delimiter specification here though) or perhaps abstract it and set that for the user so they don't have to configure custom matches in multiple places.

Also see the discussion on tailwind-tools.nvim/pull/78 which added delimiter and Clojure support. Basic idea is to search for all possible tailwind class lists, matched by regex and delimited by either spaces or periods, and send those to the LSP's sortSelection.

That Neovim plugin also has support for a lot of other languages through tree-sitter queries that the Prettier plugin wouldn't work on. (Though they'd have to be regex to work in VSCode.)

There may also be some value in having an external non-VSCode specific tool that supports all these languages the Prettier plugin can't be used for. It's nice to have sorting builtin to the editor on save, but it'd also be nice to have it run in CI/CD as a linter. 🤔