Unable to define correct CSS @Rules when CSS shimming is enabled

[bernardyen]

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?

[bernardyen]

Just to be clear, when the [material-progress] tags are inserted after the percentages in the keyframes, the rule blows up and the animation refuses to run.

[zoechi]

AFAIK this shim is maintained by the Polymer project, you might have better chances to get a response there.

[bernardyen]

SG - I will repost this in the Polymer issue section and reference this bug.