stivoat/tailwind-fold

Fold classes in custom `cn` function

Closed this issue · 2 comments

Hey! Thanks for a great little library ✨

Is it possible to modify the settings somehow to hide classes in custom fns? I see you support clsx #26 for example.

I have this fn called cn that looks like this (clsx & twMerge, pattern made popular by shadcn/ui and others)

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

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

I'd like to fold classes that look like this basically

<h1
  className={cn('max-w-[14ch] text-balance font-bold', {
    'text-[clamp(2.75rem,7.7cqw,7.5rem)] leading-[clamp(3rem,8cqw,8rem)]': !isPageHero,
    'text-2xl ml:text-3xl': isPageHero,
  })}
>
  {title}
</h1>

+1
I need it a lot!
For cva function as well. Would be great to implement adjustable regex just like Tailwind IntelliSense VSCode extension does:

{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

Just released an update