[Prettier Plugin] Support for classNames helper function

[MBuchalik]

Hi,

in React, I typically use the classnames helper function to build the list of classes to apply to a particular DOM element.

Example usage:

<div className={classNames('p-2', 'my-4', state.isImportant ? 'font-bold' : undefined)}>
  This is some text
</div>

Unfortunately, it seems like the Prettier plugin for Tailwind does not get applied here: In the example above, I get no warnings that the order is wrong. When looking at https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/0a5e7d3373eaf70eb7002b4b3fb259d79fe11993/src/index.js#L472-L484, I saw that the plugin does not look at CallExpressions, meaning that function calls like classNames() are simply ignored.

I know that sorting the arguments of an arbitrary function call could lead to many false-positives. However, would it be possible to include a special case handling for a function named "classNames"? Or, to add a plugin config that allows to specify a Regex for function names to be considered for sorting?

[khinshankhan]

If I'm not mistaken, the plugin acts on a consecutive string in the jsx attribute so 'p-2 my-4'. This is a utility function I've been using

export function cx(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

so I might rewrite it as <div className={cx('p-2 my-4', state.isImportant ? 'font-bold' : undefined)}>. I bet you could replace clsx with classNames too.

The extra twMerge wrapper will ensure your classes are good, read more here https://github.com/dcastil/tailwind-merge

[MBuchalik]

Wow, I really did not think about moving everyting into one string. That works, thank you! 👍

The benefit of using multiple arguments is that Prettier will properly move them into separate lines like so:

<div
    className={classNames(
      'flex',
      'flex-row',
      'px-4',
      'py-2',
      'my-4',
      'font-bold',
    )}
  >
    This is some text
  </div>

But I guess I will simply move my classes into one string for now to get proper sorting.

[akx]

Support for call expressions has been added to the plugin in tailwindlabs/prettier-plugin-tailwindcss#155: https://github.com/tailwindlabs/prettier-plugin-tailwindcss?tab=readme-ov-file#sorting-classes-in-function-calls