noUnknownAtRules

CSS

Summary

• Rule available since: v2.0.0
• Diagnostic Category: lint/suspicious/noUnknownAtRules
• This rule is recommended, which means is enabled by default.
• This rule doesn’t have a fix.
• The default severity of this rule is error.
• Sources:
  • Same as stylelint/at-rule-no-unknown

How to configure

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "noUnknownAtRules": "error"
      }
    }
  }
}

Description

Disallow unknown at-rules.

For details on known at-rules, see the MDN web docs.

Examples

Invalid

@uNkNoWn {}

code-block.css:1:2 lint/suspicious/noUnknownAtRules ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected unknown at-rule: uNkNoWn
  
  > 1 │ @uNkNoWn {}
      │  ^^^^^^^
    2 │ 
  
  ℹ uNkNoWn is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended.
  
  ℹ See MDN web docs for a known list of at-rules.
  
  ℹ To fix this issue, consider removing the unknown at-rule.
  

@unknown-at-rule {
  font-size: 14px;
}

code-block.css:1:2 lint/suspicious/noUnknownAtRules ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected unknown at-rule: unknown-at-rule
  
  > 1 │ @unknown-at-rule {
      │  ^^^^^^^^^^^^^^^
    2 │   font-size: 14px;
    3 │ }
  
  ℹ unknown-at-rule is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended.
  
  ℹ See MDN web docs for a known list of at-rules.
  
  ℹ To fix this issue, consider removing the unknown at-rule.
  

Valid

@charset 'UTF-8';

@media (max-width: 960px) {
  body {
    font-size: 13px;
  }
}

Options

ignore

A list of unknown at-rule names to ignore (case-insensitive).

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "noUnknownAtRules": {
          "options": {
            "ignore": [
              "custom-at-rule",
              "my-custom-rule"
            ]
          }
        }
      }
    }
  }
}

Valid

@custom-at-rule {}
@my-custom-rule {
  color: red;
}

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases