noDuplicateCustomProperties

CSS

Summary

• Rule available since: v1.9.0
• Diagnostic Category: lint/suspicious/noDuplicateCustomProperties
• This rule is recommended, which means is enabled by default.
• This rule doesn’t have a fix.
• The default severity of this rule is error.
• Sources:
  • Same as stylelint/declaration-block-no-duplicate-custom-properties

How to configure

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "noDuplicateCustomProperties": "error"
      }
    }
  }
}

Description

Disallow duplicate custom properties within declaration blocks.

This rule checks the declaration blocks for duplicate custom properties.

Examples

Invalid

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.
  

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

a { --custom-property: pink; }

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

Related links

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