a11y
outline
Outlines the host in red during development and resolves to an empty style tree elsewhere, so the call is safe to leave in committed code.
import { debug } from "@sdxc/u/a11y";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.debug() | css({ outline: "2px solid red", outlineOffset: "-2px" }) |
u.debug("nested") | css({
outline: "2px solid red",
outlineOffset: "-2px",
"& *": { outline: "2px solid red", outlineOffset: "-2px" },
}) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.debug()Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.debug())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.debug())Signature
u.debug(mode?: boolean | "nested")