Sort classes deep inside `clsx` calls

[kripod]

#11 was implemented recently and it works like charm for simple cases. However, it doesn't sort class names within arrays and objects passed to clsx (and similar methods). For instance, classes in the following code should be auto-sorted deeply:

clsx(
  "relative focus:z-10 flex justify-between px-6 py-3 hover:bg-neutral-60 space-x-6",
  disabled
    ? "text-neutral-60"
    : [
        variant === "neutral" && {
          "hover:text-neutral-0": true,
          "text-neutral-0 bg-neutral-60": active,
          "text-neutral-20 bg-neutral-80": !active,
        },
        variant === "danger" && "text-danger-40 bg-neutral-80",
      ],
  className,
)

Thank you in for maintaining this wonderful library! 😊

[tqwewe]

You're right! I didn't consider this.. I'll look into implementing this soon!

[kripod]

Awesome, I love how fast you're delivering improvements 🙌

[jsardev]

Yeah, run into this too! I think there was a wrong assumption that we're only talking about JSX attributes. It would be nice to be able to sort any function calls, just like @kripod proposed 😄

[brc-dd]

Classes inside arrays passed as an argument are also not sorted. An example:

const zz = cx(['flex-col flex']); // flex should come before flex-col
const yy = (<div tw={['flex-col flex']}>Hey There!</div>);

[addemod]

Another case where the classes isn't sorted is if you use clsx to "structure" the classes, i.e. printing each class on a separate row:

<div
  className={clsx(
    'flex-col',
    'max-w-[768px]',
    'w-full',
    'flex',
    'items-center',
    'py-20',
    'lg:py-60'
  )}
>
</div>