Keyframe hydration fails due to incorrect keyframe parsing as cache key

[lxsmnsyc]

Server-rendered keyframe cache:

Client-rendered keyframe cache:

This breaks most of the animation in our website. You can visit the initial animation on our website here and notice how the spinners go from 'spinning' to 'translating' after the hydration process.

Code below is the one I used to track the generated keyframes

[tajo]

Quick workaround is to use styletron-engine-monolithic instead of styletron-engine-atomic since it doesn't use regexp based hydration. It seems that the regexp for keyframes doesn't really work properly. Trying to come up with one that works but it might need some other approach since regexps are not really good when dealing with recursion.

[tajo]

@rtsao This is what happens when trying to hydrate the example above: https://regex101.com/r/DuqFPv/1

Afaik, to parse that properly we would need to match nested {} correctly and that's not solvable with a regular expression in JS. I guess we need to add some better algo to parse that. I am surprised this has not been reported before?

Or am I missing something? If not, I can try to come up with fix.

[lxsmnsyc]

Quick workaround is to use styletron-engine-monolithic instead of styletron-engine-atomic since it doesn't use regexp based hydration. It seems that the regexp for keyframes doesn't really work properly. Trying to come up with one that works but it might need some other approach since regexps are not really good when dealing with recursion.

Does this work seamlessly with Base Web?

[tajo]

Does this work seamlessly with Base Web?

The monolithic engine? Yes.