Skip to content

noShorthandPropertyOverrides

Diagnostic Category: lint/suspicious/noShorthandPropertyOverrides

CSS

Since: v1.8.2

Sources:

Same as: stylelint/declaration-block-no-shorthand-property-overrides

Description

Disallow shorthand properties that override related longhand properties.

For details on shorthand properties, see the MDN web docs.

Examples

Invalid

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

code-block.css:1:25 lint/suspicious/noShorthandPropertyOverrides ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected shorthand property padding after padding-left
  
  > 1 │ a { padding-left: 10px; padding: 20px; }
      │                         ^^^^^^^
    2 │

Valid

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

a { transition-property: opacity; } a { transition: opacity 1s linear; }

How to configure

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