(CSS) Animations highlighting incorrectly

CSS animations highlighting incorrectly When writing CSS animations, such as:

@keyframes animation {
  10.1% {
    left: 10px;
  }
}

It highlights incorrectly.

• animation isn’t highlighted as a variable
• 10.1% isn’t highlighted as an hljs-number as it should be
• .1 is highlighted as a hljs-selector-class.

Language: CSS

I used highlight

…

Sample Code to Reproduce

@keyframes animation {
  10.1% {
    left: 10px;
  }
}

Or any other CSS animation, really. Example JSFiddle: https://jsfiddle.net/barhatsor/oz14ewyx/2/

Expected behavior Turns out Github also higlights it incorrectly so here’s a picture of CodeMirror getting it right:

Would be happy if this got fixed. Thanks!

[joshgoebel]

FYI css_consistency is rebased and merged into master now.

[joshgoebel]

We’ll see if @allejo has any thoughts. I been working on the CSS consistency more and this is pretty simple once you flatten the grammar… you can just use from/to keywords at the top-level for the frame positives, easy peasy. So complexity shouldn’t stop us.