Build process plugin

[brandonmcconnell]

I think a great advancement of this package would be to offer using tail and merge automatically as a build-time preprocessor plugin so that it automatically applies the merging to all instances of class/className across the codebase without needing to use twMerge directly.

twMerge would still be useful where the user wants to set up classes outside of the usual class/className attribute/prop.

[brandonmcconnell]

@dcastil alive been spinning on this idea with @DaniGuardiola

I understand they’re might be some limitations as far as what we can achieve at build-time vs. run-time, but wanted to float the idea.

[DaniGuardiola]

I'm unfortunately pretty sure this is not doable (beyond maybe some very localized and simple circumstances) because you need runtime information to do anything useful.

[dcastil]

Interesting idea! Leaving the feasibility aside, I'd be worried about the performance characteristics of this though. 🤔

The twMerge function is fast enough to be called hundreds of times during initial render which is usually enough when you only use it to merge internal classes with classes from props. But calling it on every className (in the https://risecalendar.com codebase there are thousands of results when I search for className), it could start slowing the app down and get into the problem area that is commonly associated with CSS-in-JS, especially on low-end devices.

I tested how much CPU time tailwind-merge uses and wrote about it in #243 (comment) and #164 (comment).

[brandonmcconnell]

@dcastil Yes, my thought was to do that portion at build time, but it might not be feasible.

Here is an example:

// Child component
const Child = ({ className, children }) => (
  <div className={`p-2 ${className}`}>{children}</div>
);

// Parent component
const Parent = ({ children }) => (
  <Child className="p-4 bg-blue-500 text-white rounded-lg">
    {children}
  </Child>
);

However, giving this some more thought, I believe this would have to be a runtime, so the build-time plugin is likely not feasible.

[dcastil]

Ah sorry, I misunderstood what you meant.

Yes, that would indeed be really hard. We'd need construct the React render tree at build time for that which would be an impressive feat on its own.