idea: function helpers or generics for stacked modifiers

[bstro]

Somewhat like the introduction of function helpers like TW.{backgroundColor,opacity,…}, I'm wondering if it might make sense to apply a similar pattern to variants. This could address the limitation where one can only use tailwindcss-classnames with one modifier like T.backgroundColor('active:bg-red-500'), where something with more modifiers like T.backgroundColor('active:hover:bg-red-500)` would not typecheck.

Moreover, it might help reduce the amount of types overall. I'm not sure if this would improve TS performance but it seems like it might?

Example of API:

    import { TW, M } from "tailwindcss-classnames";

    const classname = classnames(
        TW.backgroundColor(M("active", "hover", "active:hover:bg-red-500"))
    );

However, it seems a bit unnecessarily to duplicate the active and hover in the final argument, so perhaps its worth considering that the M function could apply those for the end-user: M("active", "hover", "bg-red-500") would produce a string like active:hover:bg-red-500

Or perhaps a purely type-based approach:

const classname = classnames(
  TW.backgroundColor<'active', 'hover'>("active:hover:bg-red-500")
);

Would love to hear your thoughts.

[muhammadsammy]

Well thought. I think the generics approach looks better :+1: Sorry for the late response, I've been very busy.

[bstro]

No problem! I dug into this a little bit more and uncovered a complication that I wanted to document here. I realized that the generic type will have to generate permutations for every possible order of classes. For instance, the generic for the following backgroundColor<['dark', '2xl']>("bg-red-500") would have to generate the following permutations dark:2xl:bg-red-500, 2xl:dark:bg-red-500, since we do not know what order the user might choose. Makes the DX a little less clean, but I still think this idea could be an improvement overall.