[bug]: Decimal prop values under 1, without 0 as a prefix, don't work

[varunarora]

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.4.5

What's Wrong?

The regex parser of the react-spring doesn't accurately read numbers inside a string which are under 1 and don't have a leading 0 in front of them, i.e. .5 fails, but 0.5 works. I am trying it inside transform: scale(.5)

I am not entirely sure how valid in the CSS world not adding the 0 in front of the decimal point is.

I am semi-embarrassed over how long I spent on this bug, because I could have circumvented it much earlier. But so that someone else doesn't end up on the tumultuous journey I did.

To Reproduce

const props = useSpring({
  // Works.
  // transform: state ? `scale(1)` : `scale(0.5)`

  // Doesn't work
  transform: state ? `scale(1)` : `scale(.5)`
});

Expected Behaviour

Spring animations working just fine regardless of the leading 0.

If I were more familiar with the codebase, I'd submit a PR with a test.

Link to repo

https://codesandbox.io/s/optimistic-fire-wzsg1d?file=/src/App.js

[varunarora]

Just to clarify, you may think: if he just used the shorthand scale prop, he might have not run into this because he would be using a native JavaScript number, and the react-spring wouldn't have to parse anything.

The reason it took me so long was that I am working with scale3d, which has three values. AND I am using interpolations, whose output ranges I think still only works with one value. So everything was more complex in reality.