noDuplicateCustomProperties (CSS)

Language CSS

Summary

Rule available since: v1.9.0
Diagnostic Category: lint/suspicious/noDuplicateCustomProperties
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-custom-properties

How to configure

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

Description

Disallow duplicate custom properties within declaration blocks.

This rule checks the declaration blocks for duplicate custom properties.

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 { --custom-property: pink; --custom-property: orange;  }

code-block.css:1:30 lint/suspicious/noDuplicateCustomProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

1
a { --custom-property: pink; background: orange; --custom-property: orange }

code-block.css:1:50 lint/suspicious/noDuplicateCustomProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

Valid

1
a { --custom-property: pink; }

1
a { --custom-property: pink; --cUstOm-prOpErtY: orange; }