argyleink
Gradients Bug with JIT Props
When using jit-props with Open Props, gradients don’t render properly. It looks like --gradient-space isn’t being injected, so the gradients break unless you manually define it in :root or html.
html {
/* You must comment out one of these for the gradient to render correctly */
/* --gradient-space: ; */
/* --gradient-space: in oklab; */
}
body {
background-image: var(--gradient-13);
}
Everything works fine when importing Open Props directly (without jit-props).
![bolt-new-by-stackblitz[bot] avatar](https://avatars.githubusercontent.com/in/182710?v=4 "Published by a pub.dev verified publisher"){kind=small}
It looks like the issue is that jit-props doesn’t handle props without values like --gradient-space: ;. When I tested locally and changed it to --gradient-space: in oklab;, the gradient worked!
That still lets users customize the interpolation method, but we’d lose support for older browsers.
https://developer.mozilla.org/en-US/docs/Web/CSS/hue-interpolation-method#browser_compatibility
seems more like a jit-props issue, that empty variables AND/OR variables in a supports query, arent injected upon use. seems pretty easy to write a test for in jit-props, not sure how easy it'll be to fix though. from a quick glance, looks like @supports rules aren't walked.
