[ @sdxc/u/general ]
env
Resolves a CSS environment variable reference: env({name}), or env({name}, {fallback}) when a fallback is given.
import { env } from "@sdxc/u/general";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.env("safe-area-inset-bottom") | "env(safe-area-inset-bottom)" |
u.env("safe-area-inset-bottom", "0px") | "env(safe-area-inset-bottom, 0px)" |
Examples
Basic example
Use env(name) to read a value the browser provides, like the safe area at the bottom of a phone screen, in any utility that takes a CSS value:
<nav
mix={[
hstack({ justify: "around" }),
is("full"),
pbs(3),
pbe(calc(`0.75rem + ${env("safe-area-inset-bottom")}`)),
bg(),
fg("neutral.muted"),
text("sm"),
border({ color: "neutral.border", width: 1, style: "solid" }),
]}
>
<a href="/home">Home</a>
<a href="/search">Search</a>
<a href="/library">Library</a>
<a href="/profile">Profile</a>
</nav>Providing a fallback
Pass a second argument for browsers that do not define the variable, like env("keyboard-inset-height", "0px"):
<div mix={[...]}>
<input
placeholder="Write a message…"
mix={[
is("full"),
p(2, 3),
mbe(env("keyboard-inset-height", "0px")),
rounded("md"),
border({ color: "neutral.border", width: 1, style: "solid" }),
]}
/>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.env("safe-area-inset-bottom"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.env("safe-area-inset-bottom"))Signature
u.env(name: string, fallback?: string)