Prop For That

Announcing Prop For That, a JS library that backfills what CSS doesn't provide us yet (and maybe never will). I'm done waiting for CSS to catch up to all the valuable information JS knows and done watching folks write the same little JS to just write a custom property to a component. demo · docs · npm Here's a basic example taking the value from a range slider to draw a nice gradient that fills up the slider: import 'prop-for-that/auto' // or import 'https://esm.sh/prop-for-that/auto' <input type="range" data-props-for="range" min="0" max="100" value="40" /> input[type="range"] { background: linear-gradient( to right in oklab, var(--theme) calc(var(--live-value-pct) * 100%), var(--track) 0 ); } codepen · docs example · codepen collection Why? # It's super common to need a few lines of JS for a simple thing like: the value of the color input the mouse pointer position the size of the scrollbar the colors present in an image or video the battery level an element's visibility etc With…