Handle syntax highlighting of custom at-rules for Microsoft/vscode-css-languageservice#51

[octref]

Description of the Change

This gives some basic highlighting to unknown at-rules. The rules are modeled after @media.

For example,

@some-rule () {

}

Will now receive correct highlighting on

• @some-rule as keyword.control.at-rule.css
• some-rule as punctuation.definition.keyword.css
• Everything between { and } is tokenized as normal css
• There is no tokenization between ( and ), as we don't know the argument format for the unknown at rule

Before:

After:

Spec: https://www.w3.org/TR/css-syntax-3/#consume-an-at-rule
Related: microsoft/vscode-css-languageservice#51
Motivation: Pre-processors that define custom at-rules, for example https://github.com/css-modules/postcss-icss-values

Benefits

Better syntax highlighting of unknown css rules.

Possible Drawbacks

None.

Applicable Issues

microsoft/vscode-css-languageservice#51

[lee-dohm]

@50Wliu what do you think?

[nathansobo]

Thanks very much!

[lleheny0]

@50Wliu @nathansobo I think this might have caused this bug:

Lines 2, 3, 5-7 are not highlighted properly.
On line 1, from is normally pink, and 'shared/responsive.css' is normally yellow, if that helps.
And lines 5-7 normally look pretty similar to lines 9-11.

[Arcanemagus]

@lleheny0 Please file a new issue about that, making sure to fill out the template. Thanks!

[octref]

@lleheny0 Tag me in the issue, and I'll take a look today.