state
when
The primitive selector wrapper every other state wrapper (hover(), checked(), ...) is sugar over.
import { when } from "@sdxc/u/state";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.when("&:has(input:checked)", [u.bg("brand.tint"), u.border("brand")]) | css({ "&:has(input:checked)": { backgroundColor: "...", borderColor: "..." } }) |
Examples
Calls that compose other mixins rather than emitting declarations of their own.
u.when(":is(input:checked) ~ &", u.bg("brand.solid"))Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.when("&:has(input:checked)", [u.bg("brand.tint"), u.border("brand")])Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.when("&:has(input:checked)", [u.bg("brand.tint"), u.border("brand")]))Signature
u.when(selector: string, input: UtilityInput<Node>)