The list of supported CSS @-rules is growing quite large, and it's very easy to miss a typo.

This rule checks each @-rule name to make sure that it is a known CSS @-rule. All vendor-prefixed @-rules are ignored because vendors may add in their own @-rules at any point in time.

Noncompliant Code Example

@abc { /* Noncompliant: 'abc' isn't a known @-rule */
  color: red;
}

Compliant Solution

@import url("styles.css"); /* Compliant: 'import' is a known @-rule */

@-moz-vendoratrule {} /* Compliant: '-moz-vendoratrule is a vendor @-rule */

List of Known @-rules

annotation  #2 bottom-center bottom-left
bottom-left-corner bottom-right bottom-right-corner
character-variant  #2 charset counter-style
custom-media document  #2 font-face
font-feature-values  #2 import keyframes
left-bottom left-middle left-top
media namespace ornaments  #2
page  #2 right-bottom right-middle
right-top styleset  #2 stylistic  #2
supports swash  #2 top-center
top-left top-left-corner top-right
top-right-corner viewport