responsive

atQuery

The raw escape hatch for expressing a container condition directly — querying height, orientation, a style feature, or combining several with and/or.

import { atQuery } from "@sdxc/u/responsive";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.atQuery("(min-width: 40rem)", u.p(6))`	`css({ "@container (min-width: 40rem)": { padding: "..." } })`
`u.atQuery("sidebar (min-width: 40rem)", u.p(6))`	`css({ "@container sidebar (min-width: 40rem)": { padding: "..." } })`

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.atQuery("(min-width: 40rem)", u.p("2.75rem"))

Applying on a state

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

u.hover(u.atQuery("(min-width: 40rem)", u.p(6)))

Signature

u.atQuery(query: string, input: UtilityInput<Node>)