Skip to content

noValueAtRule

Diagnostic Category: lint/nursery/noValueAtRule

CSS

Since: v1.8.0

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:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ @value at-rule is not a standard CSS feature.
  
  > 1 │ @value red: #FF0000;
      │  ^^^^^
    2 │ 
  
  ℹ You can enable @value at-rule parsing by setting the css.parser.cssModules option to true in your configuration file.

Valid

:root {
  --red: #FF0000
}

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

How to configure

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