New Rule: `no-shorthand-property-overrides`

[przemyslaw-zan]

Rule details

Disallow shorthand properties that override related longhand properties.

What type of rule is this?

Warns about a potential problem

Example code

a {
  padding-left: 10px;
  padding: 20px;
}

a {
  background-repeat: no-repeat;
  background: url(image.png); /* silently resets background-repeat to its initial value */
}

Prior Art

• https://stylelint.io/user-guide/rules/declaration-block-no-shorthand-property-overrides/

Participation

• I am willing to submit a pull request to implement this rule.

AI acknowledgment

• I did not use AI to generate this issue report.
• (If the above is not checked) I have reviewed the AI-generated content before submitting.

Additional comments

• Detection would be purely name-based, a shorthand always resets all its longhands regardless of their value, so the rule needs no value parsing, just a map which is available in @webref/css.

[DMartens]

I agree that this rule would be helpful and matches the inclusion criteria.
We would not use @webref/css directly but the data available in the sourceCode.lexer.