Exhaust Pipe
Posted on
A few months ago, I wrote a little library Exhaust Pipe to help out with a side project. Exhaust pipe is a helper library for managing tailwind token lists.
The behavior in question
A common issue that you encounter using tailwind in a component based application is class conflict. Say you have a component that has a default margin and you allow passing in classes that will be applied to your component.
What happens today is that the rule with the highest specificity is applied. Thus, if we have a default margin, passing in another margin class and concatenating it to the token list may or may not apply the rule.
This behavior is described in a github issue here
Side note, in Tailwind play, a warning will alert you to the cssConflict in the div above. I wish there was a tool to surface this via static analysis. (Although this is tricky b/c whatever tool you use has to understand your component system.) They also wrote a VS Code extension that will sometimes surface these conflicts.
What is the problem with this behavior?
- The order of css rule definitions is opaque to developers.
- Conflicts fail silently.
- Unnecessary classes make it past code review
- Developers have to root out the conflict themselves.
- Silent failures and unexpected effects make this behavior unfriendly to component based applications.
My goal with this project
In component based applications, we often want to allow developers to merge style lists. We want to be able to support two behaviors:
- Merge and raise errors about conflicts.
- Merge and override the style.
Exhaust pipe is still a proof of concept. I'm not planning on fleshing it out unless I have a pressing need. My current team is too small to justify the investment. Maybe someday.