prop-for-thatlisted

# prop-for-that — runtime state as CSS custom properties CSS can't see most of what the browser already knows: where the pointer is, how big an element is, whether you're offline, battery level, whether a video is playing, how full a textarea is. `prop-for-that` runs one tiny batched loop that writes that state into CSS custom properties (`--live-*` reactive, `--const-*` write-once), so your stylesheets react with plain `var()`/`calc()` (continuous values) or `@container style()` (discrete values) — no per-element event handlers, no JS in the animation path. Zero deps, TypeScript, SSR-safe, MIT. **Pinned to `prop-for-that@0.7.2` — it's pre-1.0, so pin the version and re-read the changelog before bumping.** Full catalog, gotchas, and complete recipes live in `reference.md` (read it before writing CSS against these props). ## Step 1 — check native CSS FIRST (this is the rule, not a footnote) Most "JS knows, CSS doesn't" is *already* native CSS. Don't add a JS dependency for anything in this list — use the platform: | You want… | Use native CSS | Not the library | | --- | --- | --- | | React to scroll position/progress | `animation-timeline: scroll()` / `view()` | ✅ | | Element size → layout | container queries + `cqw/cqh` units | ✅ | | Viewport size → layout | media queries + `dvh/svh/lvh` units | ✅ | | Dark/light mode | `prefers-color-scheme`, `light-dark()` | ✅ | | Reduce motion | `prefers-reduced-motion` | ✅ | | Hover/touch capability | `@media (hover)`, `(pointer: fine