noValueAtRule

CSS

Summary

• Rule available since: v1.8.0
• Diagnostic Category: lint/style/noValueAtRule
• This rule doesn’t have a fix.
• The default severity of this rule is information.

How to configure

biome.json

{
  "linter": {
    "rules": {
      "style": {
        "noValueAtRule": "error"
      }
    }
  }
}

Description

Disallow use of @value rule in css modules.

Use of CSS variables is recommended instead of @value rule.

Examples

Invalid

@value red: #FF0000;

code-block.css:1:1 lint/style/noValueAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Use of @value rule is disallowed
  
  > 1 │ @value red: #FF0000;
      │ ^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Using @value is not recommended, consider using CSS variables instead.
  
  ℹ See MDN web docs for more details.
  

Valid

:root {
  --red: #FF0000
}

p {
  background-color: var(--red);
}

Related links

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