[bug]: Error when transitioning particular lab colors

[JoeEnnever]

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

10.0.2

What's Wrong?

When transitioning an element from the color oklch(0.81 0 255 / 1) to oklch(0.4 0.2639 271.35 / 1), an error is thrown:

Uncaught (in promise) Error: The arity of each "output" value must be equal
    at react-spring_shared.modern.mjs:708:15
    at Array.map (<anonymous>)
    at react-spring_shared.modern.mjs:706:25
    at Array.map (<anonymous>)
    at createStringInterpolator2 (react-spring_shared.modern.mjs:705:37)
    at createInterpolator (react-spring_shared.modern.mjs:476:12)
    at _AnimatedString.reset (react-spring_animated.modern.mjs:103:42)
    at SpringValue._start (react-spring_core.modern.mjs:1168:24)
    at SpringValue._merge (react-spring_core.modern.mjs:1082:12)
    at onStart (react-spring_core.modern.mjs:348:17)
    at onResume (react-spring_core.modern.mjs:335:9)
    at react-spring_core.modern.mjs:319:9
    at new Promise (<anonymous>)
    at scheduleProps (react-spring_core.modern.mjs:299:10)
    at SpringValue._update (react-spring_core.modern.mjs:912:12)
    at react-spring_core.modern.mjs:834:25
    at Array.map (<anonymous>)
    at SpringValue.start (react-spring_core.modern.mjs:833:13)
    at react-spring_core.modern.mjs:1516:32
    at Array.map (<anonymous>)
    at flushUpdate (react-spring_core.modern.mjs:1515:56)
    at react-spring_core.modern.mjs:1465:43
    at Array.map (<anonymous>)
    at flushUpdateQueue (react-spring_core.modern.mjs:1465:28)
    at Controller.flush [as _flush] (react-spring_core.modern.mjs:1714:31)
    at Controller.start (react-spring_core.modern.mjs:1380:19)
    at useSprings.useIsomorphicLayoutEffect2 (react-spring_core.modern.mjs:1773:16)
    at Array.forEach (<anonymous>)
    at each (react-spring_shared.modern.mjs:41:29)

The error is because the gray color is turned into lab(77.96% -.0000298023 0) (either by Chrome or tailwind, I'm not sure), which is then parsed incorrectly in createStringInterpolator by the number regex into [77.96, 0, 0, 0, 0, 298023, 0] instead of [77.96, -0.0000298023 0].

To Reproduce

1. npx create next-app@latest <dir> --yes
2. cd <dir>; npm install --save @react-spring/web
3. In globals.css, add to the :root block:

  --gray: oklch(0.81 0 255 / 1);
  --blue: oklch(0.4 0.2639 271.35 / 1)

4. Change page.tsx to:

"use client";
import { animated, useSpring } from "@react-spring/web";

export default function Home() {
  const style = useSpring({
    from: { backgroundColor: "var(--gray)" },
    to: { backgroundColor: "var(--blue)" }
  });

  return (
    <animated.div style={style} className="w-10 h-10 rounded-full flex items-center justify-center">
      Hello world
    </animated.div>
  );
}

5. Run server, open browser, check console errors

Expected Behaviour

No error thrown

Link to repo

https://github.com/JoeEnnever/react-spring-error