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 scope styleset  #2
stylistic  #2 supports swash  #2
top-center top-left top-left-corner
top-right top-right-corner viewport

stylelint Related Rules