Support for Tailwind classes in function calls

[LinnJS]

trafficstars

I love this plugin has changed my workflow a ton and puts some accountability across the team rather than relying on a hyper-local workflow via headwind. Would love to see more dynamic support for this plugin.

ie:

export const Button = ({ label, primary = true, backgroundColor, iconName, ...rest }: ButtonProps) => {
  return (
    <button
      type='submit'
      className={classNames(
        primary ? 'border-transparent bg-blue fill-white text-white hover:bg-blue-600' : 'border-blue bg-white fill-blue text-blue',
        'inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
      )}
      style={{ backgroundColor }}
      {...rest}
    >
      {iconName && <Icon name={iconName} className='w-5 h-5 mr-3 -ml-1' aria-hidden='true' isSolid />}
      {label}
    </button>
  );
};

Would be awesome if the Tailwind classes inside the classNames func would also get sorted like they would if they were not dynamic.

[LinnJS]

Still having this issue and it seems that it happens anytime the classes are not specifically in a className="" syntax as soon as you add {}s you lose all formatting so any kind of CSS in JS use case it does not work.

I was thinking as a work around instead of trying to find all the edge cases would be nice for a "sort selected text" type command so I can just manually do it would be better than me looking at other files and trying to mimic order.