keyframe selectors "overly analyzed"

Suppose I have a CSS like this:

@keyframes RotateSlot {
  0% { margin-top: 0 }
  3% { margin-top: -2em }
  20% { margin-top: -2em }
  23% { margin-top: -4em }
  40% { margin-top: -4em }
  43% { margin-top: -6em }
  60% { margin-top: -6em }
  63% { margin-top: -8em }
  90% { margin-top: -8em }
  93% { margin-top: 0 }
  100% { margin-top: 0 }
}

When I run that, this happens:

▶ ./bin/minimalcss.js -d http://localhost:8080/keyframe.html
0% SyntaxError: Unmatched selector: %
3% SyntaxError: Unmatched selector: %
20% SyntaxError: Unmatched selector: %
23% SyntaxError: Unmatched selector: %
40% SyntaxError: Unmatched selector: %
43% SyntaxError: Unmatched selector: %
60% SyntaxError: Unmatched selector: %
63% SyntaxError: Unmatched selector: %
90% SyntaxError: Unmatched selector: %
93% SyntaxError: Unmatched selector: %
100% SyntaxError: Unmatched selector: %

It basically thinks 0% is a CSS selector and it tries to look for that in the DOM (using cheerio). I.e. dom('0%').length > 0

[lahmatiy]

Inside @keyframes a rules are using. That’s not a regular rules, but keyframe-block. However, at the moment CSSTree uses the same node type for both cases. I’m thinking about introducing an additional node types for that. For now you can use this.atrule.name and csstree.keyword() to filter rules, as you already did.

[peterbe]

Let’s use csstree.keyword(this.atrule.name).basename instead of this.atrule.name