Best thing to do would be to just get the .className at runtime. Crappy fix, but it'll work. Personally I have issues trying to programmatically apply animations because it transforms the css name but not any other reference to it in the file. The keyframes become s-VSwDfhj2prWB-opacityvisibleanimation but my code is element.style.animation = "1s forwards opacityvisibleanimation", which fails.
Even including it in the HTML segment fails, such as
style="animation: {expanded ? "1s forwards opacityvisibleanimation" : "1s forwards opacityinvisibleanimation"}".
I'm not sure how Rich intended us to reference animation names?
You'll need to do this at runtime.
in your .svelte:
element.className.match(/s-[\s\S]{12}/g)[0]
element being anything...
Now I can properly reference animation names:
element.style.animation = "1s forwards " + element.className.match(/s-[\s\S]{12}/g)[0] + "-opacityvisibleanimation"