argyleink / argyleink/open-props
Gradients Bug with JIT Props
- Dominant language
- HTML
- Stars
- 5.5k
- Forks
- 216
- PR merge metrics
- No merged PRs in 30d
Description
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`.
```css
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).
[StackBlitz demo link](https://stackblitz.com/edit/vitejs-vite-r1o5iusq?file=src%2Fstyle.css)
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the linked StackBlitz demo and its src/style.css, then compare the generated properties when using jit-props with a direct Open Props import. Trace why --gradient-space is absent or malformed; done means the gradient renders without manually defining that custom property in html or :root.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100