Class Merge

Resolve two utilities that set the same property so the last one wins.

Using merge

merge takes class strings & returns one with the losers removed, so the last class wins.

import { merge } from "yummacss/merge";

merge("c:white", "c:accent"); // "c:accent"

<span className={merge("c:white", className)}>Accent</span>

Falsy arguments are skipped, so conditionals read cleanly.

<div className={merge("d:f ai:c", isOpen && "bg:silver-1", className)}></div>

A class is dropped only when a later class sets everything it sets.

merge("px:8 p:4"); // "p:4"
merge("p:4 px:8"); // "p:4 px:8"

p:4 covers px:8, so px:8 goes. Reversed, both stay, since p:4 still sets the block axis.

merge("w:10 h:10", "w:12"); // "h:10 w:12"

merge reads the value, so a shared prefix never collides: c:p is a cursor, c:slate-10 a color.

merge("c:p c:slate-10"); // "c:p c:slate-10"
merge("p:a p:4"); // "p:a p:4"

Classes are compared within their own variant, so a hover class never covers a base class.

merge("h:bg:silver-2", "bg:white"); // "h:bg:silver-2 bg:white"
merge("h:bg:silver-2", "h:bg:indigo-2"); // "h:bg:indigo-2"

Media queries work the same way.

merge("@lg:p:4 p:2", "@lg:p:8"); // "p:2 @lg:p:8"

Anything merge does not recognize passes through in place.

merge("card", "bg:white", "card-active"); // "card bg:white card-active"