argyleink / argyleink/open-props

Gradients Bug with JIT Props

Open
#556 4 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.