Keyframes and comments in CSS get mangled

[Gilmore Davidson]

I wanted to use CSS animation keyframes instead of jQuery, but I can't because the CSS seems to get transformed into the wrong thing.

For example, the source file reads:

@keyframes breached-flash {
    0%:   { background-color: #0f0f0f; }
    100%: { background-color: #ff4136; }
}

When I inspect the page, the generated CSS reads:

li[data-widget-id="qa-issues"] %: {
    background-color: #0f0f0f;
}


li[data-widget-id="qa-issues"] 100%: {
    background-color: #ff4136;
}


li[data-widget-id="qa-issues"] }

Also, if I comment out a single property definition in a CSS rule, the entire rule is ignored and doesn't get send to the frontend.

[Gilmore Davidson]

OK, so I'm a nong and had the keyframes syntax incorrect (that's what I get for lazy copy+paste). However, when I put the right syntax in, an error is thrown for trying to call .forEach() on undefined.

Pull request to fix this is coming.

[Iván Loire]

Fixed with 5c755e7. Thanks @gdavidson! :)