0% -> Unmatched selector: %

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.

[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.