noDuplicateProperties (CSS)

Language CSS

Summary

Rule available since: v1.9.4
Diagnostic Category: lint/suspicious/noDuplicateProperties
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Same as declaration-block-no-duplicate-properties

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "suspicious": {
5
        "noDuplicateProperties": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow duplicate properties within declaration blocks.

This rule checks the declaration blocks for duplicate properties. It ignores custom properties and declarations inside @keyframes blocks.

SCSS limitations

Declarations are compared within each authored declaration block. The rule does not expand mixins or includes, so duplicates introduced only after SCSS expansion are not reported.

Examples

Invalid

1
a {
2
  color: pink;
3
  color: orange;
4
}

code-block.css:3:3 lint/suspicious/noDuplicateProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
  
    1 │ a {
    2 │   color: pink;
  > 3 │   color: orange;
      │   ^^^^^
    4 │ }
    5 │ 
  
  ℹ color is already defined here.
  
    1 │ a {
  > 2 │   color: pink;
      │   ^^^^^
    3 │   color: orange;
    4 │ }
  
  ℹ Remove or rename the duplicate property to ensure consistent styling.

Valid

1
a {
2
  color: pink;
3
  background: orange;
4
}