Gradients Bug with JIT Props

[mobalti]

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).

StackBlitz demo link

[bolt-new-by-stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-r1o5iusq (Open reproduction)

[mobalti]

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

[argyleink]

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.

[argyleink]

GoogleChromeLabs/postcss-jit-props#59