Pretties does not arrange classes not in a "class"

[espenlg]

I'm not sure if this have ever worked, but Antler templates (from Statamic CMS) allows for use of classes without them being in a class tag.

Example:

<section>
      {{ layout = switch(
               (flip && index == 0) => "col-start-1 lg:col-start-7 col-end-11 row-start-1 aspect-square lg:aspect-auto h-full object-cover",
               (flip && index == 1) => "col-start-1 col-end-11 lg:col-end-7 aspect-square lg:aspect-[934/740] object-cover row-start-2 lg:row-start-1",
               (!flip && index == 0) => "col-start-1 col-end-11 lg:col-end-5 row-start-2 lg:row-start-1 aspect-square lg:aspect-auto h-full object-cover",
               (!flip && index == 1) => "col-start-1 lg:col-start-5 col-end-11 aspect-square lg:aspect-[934/740] object-cover row-start-1",
               ) }}
        <img class="{{ layout }}" src="{{ url }}" alt="{{ alt }}" />
</section>

Would it be possible for prettier-plugin-tailwindcss to arrange these as well?

[adamwathan]

Hey! Have you tried this option?

https://github.com/tailwindlabs/prettier-plugin-tailwindcss?tab=readme-ov-file#sorting-classes-in-function-calls

[espenlg]

Hey! Have you tried this option? https://github.com/tailwindlabs/prettier-plugin-tailwindcss?tab=readme-ov-file#sorting-classes-in-function-calls

I don't think it would help in my case, as it is not in a js-function or with template literals. Not a big problem really. I asked about the same for the Tailwind CSS IntelliSense extension to VS Code, and they had a nifty solution that worked. Maybe this could inspire for something in the future?

{
  "tailwindCSS.experimental.classRegex": [
    [
      // Look inside `{{ … }}` expressions for class lists
      "{{\\s*([\\s\\S]+?)\\s*}}",

      // Each class list is inside a double-quoted string preceded by `=>`
      "=>\\s*\"([^\"]+)\"",
    ]
  ]
}

[thecrypticace]

The plugin is at is core based on ASTs produced by prettier or other prettier plugins. Supporting this would require a plugin for Antler templates and some glue code to identify arbitrary expressions like these.

Though, because of that "arbitrary" nature I don't think we'd want to support it because we'd have to know how to differentiate which strings to sort and which ones not to — and in this case I don't see a way we'd be able to do that other than "any string is sortable". In HTML that's a super simple task, same with JSX, JS tagged templates / function calls (when configured), etc…

Doing this via regex is very very brittle. It's easy to craft regexes that capture too much or just break when given certain classes (what if the class has quotes in it? e.g. content-["hello"]). So that's not something we'd add to this plugin I don't think.