`@keyframes` get compressed, causing sync issues with the animation-name CSS property

[FabulousCodingFox]

It seems like @keyframes animations are being compressed (specifically the name of the keyframes), but their corresponding references in the animation-name directive within the CSS are not being similarly compressed. This results in a mismatch where the animation is not applied as intended.

For example, in the following CSS:

.g[data-astro-cid-wxwyi4a4] {
  animation-name: popup;
  animation-duration: .75s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}

@keyframes g { /*  Shoud be @keyframes popup { */
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

[FabulousCodingFox]

It appears that this issue only occurs if a CSS class with the same name as the @keyframes exists

[RodrigoTomeES]

Hi @FabulousCodingFox ,

Do you tried the new V2 version? Do you still has the error in that version?