noDuplicateCustomProperties
Summary
Section titled “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:
Description
Section titled “Description”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/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.
a { --custom-property: pink; }a { --custom-property: pink; --cUstOm-prOpErtY: orange; }How to configure
Section titled “How to configure”{ "linter": { "rules": { "suspicious": { "noDuplicateCustomProperties": "error" } } }}