Missing '@' in Shadow DOM @keyframes CSS

[mattdsteele]

Hi! Thanks for your help with #821. I have an issue in the same repo; I'm noticing the CSS keyframe animation isn't working - it appears the CSS is stripping off the @ in @keyframes, at least when I compile it to a custom element.

Authored CSS:

@keyframes creepy {
    0% { 
      transform: translateX(20px) translateY(20px); 
    }
    25% { 
      transform: translateX(20px) translateY(0); 
    }
    50% { 
      transform: translateX(10px) translateY(10px); 
    }
    100% {
      transform: translateX(0) translateY(0); 
    }
}

Output:

_this.shadowRoot.innerHTML = "<style>img{max-height:100%;max-width:50%;position:fixed;bottom:0;right:0;animation:creepy 3s infinite alternate ease-in-out}:host{display:block}keyframes creepy{0%{transform:translateX(20px) translateY(20px)}25%{transform:translateX(20px) translateY(0)}50%{transform:translateX(10px) translateY(10px)}100%{transform:translateX(0) translateY(0)}}</style>";

I'm wondering if it's related to #712?

[Rich-Harris]

Thanks — this is fixed in 1.39.2