[ @sdxc/u/general ]
raw
Wraps a plain style object as a utility mixin, so bespoke declarations — a property outside this package's surface, or a call-site-computed value — compose inside wrappers like when(), whose inputs are utility mixins.
import { raw } from "@sdxc/u/general";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.when('&[data-color="1"]', u.raw({ color: "var(--ui-chart-1)" })) | css({ '&[data-color="1"]': { color: "var(--ui-chart-1)" } }) |
Examples
Basic example
Use raw({...}) to write declarations no utility covers, like CSS columns, as a mixin that sits beside the others:
The ferry left at dawn, and by the time the fog lifted we could see the island: a low green line, a lighthouse, and one road climbing from the harbour to the church. Nobody on board had been there before. The captain said the bakery opened at eight and closed when the bread ran out, which on a Saturday meant before ten, so we walked straight up the hill without stopping to look at the boats.
<p mix={[raw({ columnCount: 2, columnGap: "2rem" }), ...]}>
The ferry left at dawn, and by the time the fog lifted we could see the island: a low green
line, a lighthouse, and one road climbing from the harbour to the church. Nobody on board had
been there before. The captain said the bakery opened at eight and closed when the bread ran
out, which on a Saturday meant before ten, so we walked straight up the hill without stopping
to look at the boats.
</p>Composing with states
A raw mixin goes anywhere a utility does, including state wrappers like hover(). Hover a book to pull it from the shelf:
<div mix={[hstack({ gap: 1, align: "end" })]}>
<div
mix={[
raw({ writingMode: "vertical-rl" }),
bs(48),
p(3, 2),
rounded("sm"),
bg("brand.solid"),
fg("brand.onSolid"),
font("serif"),
weight("semibold"),
transition("transform"),
hover(raw({ transform: "translateY(-0.75rem)" })),
]}
>
Moby-Dick
</div>
<div
mix={[
raw({ writingMode: "vertical-rl" }),
bs(40),
p(3, 2),
rounded("sm"),
bg("success.solid"),
fg("success.onSolid"),
font("serif"),
weight("semibold"),
transition("transform"),
hover(raw({ transform: "translateY(-0.75rem)" })),
]}
>
Middlemarch
</div>
<div
mix={[
raw({ writingMode: "vertical-rl" }),
bs(52),
p(3, 2),
rounded("sm"),
bg("warning.solid"),
fg("warning.onSolid"),
font("serif"),
weight("semibold"),
transition("transform"),
hover(raw({ transform: "translateY(-0.75rem)" })),
]}
>
War and Peace
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.when('&[data-color="1"]', u.raw({ color: "var(--ui-chart-1)" })))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.when('&[data-color="1"]', u.raw({ color: "var(--ui-chart-1)" })))Signature
u.raw(styles: CSSStyles)