feature: custom cn function

[jzxhuang]

Issue 😱:

Support a custom cn function, for example if you want to use clsx or tailwind-merge . In particular I was looking for the tw-merge use case

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sonner	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 3, 2024 2:04pm

[emilkowalski]

I don't fully understand why this is needed, can you explain?

[jzxhuang]

I don't fully understand why this is needed, can you explain?

Yep! Suppose we have something like:

<Toaster toastOptions={{ unstyled: true, classNames: { title: "text-sm font-heading font-semibold" }}} />

then in an individual toast, we want to override some styles:

toast("Hello world", { classNames: { title: "text-lg font-bold" }})

As-is, there is no easy way to tell if text-lg or text-sm will take precedence; same with font-semibold vs font-bold. Sure, we could try to use !important but this is not very reliable, and I've also found myself needing to use !important in Toaster itself (separate issue, see #321).

With a custom cn function we could guarantee that the classes are merged in a way such that the classes in toast(...) take precedence over classes in Toaster when there are classes that target the same attribute. In particular, I'm thinking of the tailwind use case with tailwind-merge, i.e. https://ui.shadcn.com/docs/installation/manual#add-a-cn-helper!

Let me know if this makes sense 🙏