[Prettier Plugin] Sorting in JS files

[RomanAtBrief]

Hey guys,
Maybe this is alredy available , but I am working in vanilla JS and extend HTMLElement for my main ui parts.
Unfortunately sorting does not work in JS.
Anyway to add it or some workaround for now?

Thank you

class Sidebar extends HTMLElement {
  connectedCallback() {
    // Add styling to element
    this.className = "w-54 p-2 text-2xl";
    // Add things to sidebar
    this.innerHTML =
      '<div class="p-2 text-xl font-bold text-slate-900">MyApp</div>';
  }
}

customElements.define("app-sidebar", Sidebar);

[dickjohnpaul]

I was just researching this issue/feature myself and came across this from 2022:

tailwindlabs/prettier-plugin-tailwindcss#97 (comment)

Specifically, the reasoning for not implementing this:

We've talked this through internally and have decided that we don't want to do this as it could have adverse effects on raw strings that are not meant to be related to CSS.

What you can do though, is add the "tailwindFunctions": ["tw"] line to your .prettierrc config file and then prefix template literals.

I just tested this myself with your given example, and while it might not be ideal, it does work:

const tw = (strings, ...values) => String.raw({ raw: strings }, ...values)

class Sidebar extends HTMLElement {
  connectedCallback() {
    // Add styling to element
    this.className = tw`w-54 p-2 text-2xl`
    // Add things to sidebar
    this.innerHTML = "<div class=" + tw`p-2 text-xl font-bold text-slate-900` + ">MyApp</div>"
  }
}

Or what I've been doing:

If you're using VS Code and the Tailwind CSS IntelliSense extension, you can highlight a string and then use:

Command Palette > Tailwind CSS: Sort Selection

Hope this helps!