Sorting classes inside variables

Is there any way to make the plugin sort classes inside variables? Consider the following code:

const ClassVariable: React.FC = (props) => {
  const klass = "flex flex-col min-h-0";
  return <div className={klass} />;
};

const ClassName: React.FC = (props) => {
  return <div className="flex flex-col min-h-0" />;
};

After formatting, this is the result:

const ClassVariable: React.FC = (props) => {
-  const klass = "flex flex-col min-h-0"; // not changed
  return <div className={klass} />;
};

const ClassName: React.FC = (props) => {
+  return <div className="flex min-h-0 flex-col" />; // changed
};

I can imagine trying to sort all string variables by default would not be feasible, but some kind of workaround would be nice. klass is a pretty common variable name for CSS classes from what I’ve seen, so trying to sort strings assigned to klass (as well as strings inside an array assigned to klass, like klass = ["some class strings", bool ? "this" : "that"]) could be one possibility. I imagine this would be one thing that could use a config option if provided though, like a variable name string/regex that is used for matching what variables to try to sort.

[Daiz]

@gustavopch The plugin actually already sorts the strings in your example if you put it inside a <div className={/* complex array/ternary/whatever goes here */}>. In general, the plugin works by identifying specific AST nodes and sorting all strings that appear inside said nodes. So in theory, all we should need is some way to signal to the plugin when a variable is a class name variable and it should be able to handle things from there.

[gustavopch]

Leaving a more complex use case here with ternaries and maps to be considered too:

const buttonClass = [
  'block transition',

  `${full ? 'w-full' : 'w-fit'} ${
    {
      small: 'h-9',
      medium: 'h-12',
      large: 'h-14',
    }[size]
  } rounded-full ${
    {
      neutral: 'border-0',
      primary: 'border border-blue-500',
      secondary: 'border border-blue-500',
      text: 'border-0',
    }[variant]
  } ${
    {
      neutral: 'bg-gray-900/5',
      primary: 'bg-blue-500',
      secondary: 'bg-transparent',
      text: 'bg-transparent',
    }[variant]
  } ${
    {
      small: 'py-2 px-3',
      medium: 'py-3 px-6',
      large: 'py-4 px-10',
    }[size]
  }`,
].join(' ')

I haven’t put a lot of thought into it, but I’m not sure if the tailwindCSS.experimental.classRegex approach would work here (unless perhaps if I added the comment to each line, which would not be ideal IMO).