Skip to content
Biome
Docs Blog Playground

noDuplicateCustomProperties

Diagnostic Category: lint/nursery/noDuplicateCustomProperties

Since: v1.9.0

Sources:

Disallow duplicate custom properties within declaration blocks.

This rule checks the declaration blocks for duplicate custom properties.

Examples

Section titled Examples

Invalid

Section titled Invalid
a { --custom-property: pink; --custom-property: orange;  }
code-block.css:1:30 lint/nursery/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.
  
a { --custom-property: pink; background: orange; --custom-property: orange }
code-block.css:1:50 lint/nursery/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

Section titled Valid
a { --custom-property: pink; }
a { --custom-property: pink; --cUstOm-prOpErtY: orange; }
Section titled Related links