improve keyframes

[jantimon]

Right now next-yak does not support to statically extract keyframes.

So in the following example:

import { styled, keyframes } from 'next-yak';

const flip = keyframes`
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
`;

const Glow = styled.div`
  animation: 1.5s ${flip} ease-out;
`;

next-yak would create a runtime variable for the keyframe animation:

import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const flip = keyframes(__styleYak.flip);

therefore any function which uses the animation creates a css variable:

<div style="--yak-438e2: flip-53eaf2">...</div>

.Glow {
  animation: 1.5s var(--yak-438e2) ease-out;
}

there are two possible improvements:

1. allow animations in .yak files
   this would probably cause css duplication as every usage would create a new keyframe animation
2. compile the animation name directly in the css code
   this would probably only work if the definition and usage of the keyframe are in the same file

[jantimon]

@Mad-Kat this seems to be resolved - what do you think?