atom/language-css

Incorrect syntax highlighting for keyframes at-rule when using vendor prefixes

Closed this issue · 1 comments

Prerequisites

Description

The syntax highlighting for the keyframes at-rule is not applied correctly if there are vendor prefixes. e.g. @keyframes produces the correct syntax highlighting, but @-moz-keyframes, @-o-keyframes, @-webkit-keyframes and @-ms-keyframes do not.

Steps to Reproduce

Two ways to reproduce.

First way:

  1. Create a new file with a .css extension
  2. Paste the following text into this file:
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Syntax highlighting incorrect for vendor prefixes
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
  1. Open the file in Atom

Second way:

  1. Open a blank file (File > New File)
  2. Paste the above text into this blank file
  3. Switch the syntax to CSS

Expected behavior:
The following behavior for -webkit-keyframes, -o-keyframes, -moz-keyframes, and -ms-keyframes
expected

Actual behavior:

screen shot 2017-04-01 at 5 03 55 pm

Reproduces how often: 100%

Versions

Atom : 1.15.0
Electron: 1.3.13
Chrome : 52.0.2743.82
Node : 6.5.0
OS : MacOS Sierra 10.12.3

Additional Information

Tested with Seti and Atom Light syntax themes. Seems reproducible on multiple syntax themes.

P.S. I haven't contributed to open source before - this is my first time. If this is accepted as a bug, I have a fix to this that I'd love to put a PR in for.