Reposted from Angular Issue #1723: Unable to define correct CSS @Rules when CSS shimming is enabled

[tjsavage]

I initially posted this in the Angular project as Issue #1723, but I was told that Polymer owns the CSS shimming code and that I should post it here instead.

We are currently shimming our SCSS files because ShadowDOM is disabled. However, if we define the following CSS rule,

@-webkit-keyframes indeterminate-bar {
  0% {
    -webkit-transform: translate(-50%) scaleX(0);
  }
  50% {
    -webkit-transform: translate(0%) scaleX(0.3);
  }
  100% {
    -webkit-transform: translate(50%) scaleX(0);
  }
}

it will get shimmed to something like

@-webkit-keyframes indeterminate-bar {
0%[material-progress] {-webkit-transform:translate(-50%) scaleX(0)}
50%[material-progress] {-webkit-transform:translate(0%) scaleX(0.3)}
100%[material-progress] {-webkit-transform:translate(50%) scaleX(0)}
}

I've tried to use polyfill-unscoped-next-selector, but it seems that it doesn't recognize 0% as a valid CSS selector, so the SCSS file doesn't compile correctly.

This is especially important for Polymer objects, since most of them have associated keyframes and animations. Is there a workaround for this, or can we get a fix so that the shimming will ignore keyframes rules?

[TimvdLippe]

Thanks for the issue. It has been a great while since this issue was opened. Sadly, this issue misses a live reproduction with the most recent version of the webcomponents polyfill for us to be able to debug and potentially fix. Versions 1 of the polyfills fix a large amount of issues, probably including this one as well.

Please see the CONTRIBUTING.md for guidelines on filing issues. You can start from this jsBin template as a starting point and link it in the issue template under "Live Demo".

Feel free to file a new issue following these instructions if you can still reproduce this issue with versions 1 of the polyfills. Thank you!