[ @sdxc/u/a11y ]
debug
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" },
}) |
Examples
Basic example
Use debug() to outline an element in red while you develop. A production build drops the outline, so the call is safe to leave in; this page is one, so the example shows what development draws:
debug()
<div mix={[debug(), ...]}>debug()</div>Outlining descendants
Pass nested to outline every descendant as well, to see how each box of a layout sits, shown here as a development build draws it:
One
Two
Three
<div mix={[debug("nested"), ...]}>
<div mix={[...]}>One</div>
<div mix={[...]}>Two</div>
<div mix={[...]}>Three</div>
</div>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")