Sorting array of classes

[andraz]

I am trying to wrap my mind around how to get a list of classNames sorted automatically like the .join(' ') string below would be sorted when using https://github.com/tailwindlabs/prettier-plugin-tailwindcss if hardcoded as a normal string.

const classNames = [
  'text-blue-600',
  'px-4',
  'text-3xl',
  'font-bold',
  'underline',
]

const App = () => {
  return <h1 className={classNames.join(' ')}>Hello world!</h1>
}

export default App

The text-blue-600 item would need to move from [0] to [3] in the array on save, like the string changes below:

Before format on save:

const App = () => {
  return (
    <h1 className="text-blue-600 px-4 text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

export default App

after format on save:

const App = () => {
  return (
    <h1 className="px-4 text-3xl font-bold text-blue-600 underline">
      Hello world!
    </h1>
  )
}

export default App

How to achieve this identical result, but retain the reversed .split(' ') of the string in resulting code?

const classNames = [
  'px-4',
  'text-3xl',
  'font-bold',
  'text-blue-600',
  'underline',
]

const App = () => {
  return <h1 className={classNames.join(' ')}>Hello world!</h1>
}

export default App

We should keep the approach simple and simply try to detect the "classNames" substring in any constant name of the array - this should find most use cases like "mainClassNames", "buttonClassNames", "buttonClassNamesActive" etc...