mergeMix

Applies mix on top of base: the utilities of both render as one class, mix's in a later cascade sublayer, so they win whatever selector base nests its rule under.

tsx

import { mergeMix } from "@sdxc/u/general";

Examples

Basic example

Use mergeMix(ownMixins, mix) where a component forwards its caller's mix, so a utility the caller passes wins over the component's own for the same property:

Updated two minutes agoUpdated two minutes ago

tsx

<div mix={[...]}>
	<span mix={[fg("neutral.muted"), text("sm")]}>Updated two minutes ago</span>
	<span mix={mergeMix([fg("neutral.muted"), text("sm")], [text("xs"), fg("brand")])}>
		Updated two minutes ago
	</span>
</div>

typescript

<span mix={mergeMix([fg("neutral"), text("sm")], mix)} />

Applying on a state

Wrap the call in a state utility to scope it to one selector.

typescript

u.hover(<span mix={mergeMix([fg("neutral"), text("sm")], mix)} />)

Responsive design

Wrap the call in a container query to scope it to one width.

typescript

u.at("md", <span mix={mergeMix([fg("neutral"), text("sm")], mix)} />)

Signature

typescript

u.mergeMix(base: MixInput<Node>, mix: MixInput<Node>)