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

[bernardyen]

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?

[tjsavage]

auto-moving this issue to webcomponents/webcomponentsjs#309 and closing this one