0% -> Unmatched selector: %

[jllodra]

This is happening in an angular12 project, which is using critters under the hood I assume.

1 rules skipped due to selector errors:
  0% -> Unmatched selector: %

In my styles.scss file I have:

  @keyframes bounce {
    from {
      opacity: 0.10;
      transform: scale(0.9);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

If I remove this code, the warning disappears.

Probably the scss compiler is turning the from into a 0%, this is just a guess.

[morrisrob]

I am upgrading from Angular 11 to 12 and I am getting these same errors that I did not have prior to upgrading. Here's an example of what I'm using in my scss:

@keyframes yellow_blink_animation { 0%,49% { fill: #00000000; } 50%,100% { fill: #ffcd05; } }

[developit]

Keyframes are supposed to be skipped here, I assume that match may not be working. Is there anything funky prior to the keyframe rule in your generated CSS?

[jllodra]

Keyframes are supposed to be skipped here, I assume that match may not be working. Is there anything funky prior to the keyframe rule in your generated CSS?

No, I removed everything but those lines. It is possible that Angular 12 is using an older version of critters (prior to the commit you have pointed). I can let you know if this is still happening or not when I update to Angular 13+.

[benz-netapp]

Ran into this as well after updating to Angular 13. This change to the location @developit mentioned fixed it for me:

-    rule.name !== 'keyframes'
+    rule.name !== 'keyframes' &&
+    rule.name !== '-webkit-keyframes'

[developit]

Awesome, thanks @benz-netapp and @JessicaSachs! I've just merged the fix, and published it as critters@0.0.16 / critters-webpack-plugin@3.0.2.