declaration-block-no-duplicate-properties.md

Pattern: Duplicate property in declaration block

Issue: -

Description

Disallow duplicate properties within declaration blocks. This rule ignores variables ($sass, @less, --custom-property).

Examples

The following patterns are considered violations:

a { color: pink; color: orange; }
/** ↑            ↑
 * These duplicated properties */

a { color: pink; background: orange; color: orange }

The following patterns are not considered violations:

a { color: pink; }

a { color: pink; background: orange; }

Configuration

ignore: ["consecutive-duplicates"]

Ignore consecutive duplicated properties.

They can prove to be useful fallbacks for older browsers.

The following patterns are considered violations:

p {
  font-size: 16px;
  font-weight: 400;
  font-size: 1rem;
}

The following patterns are not considered violations:

p {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
}

ignore: ["consecutive-duplicates-with-different-values"]

Ignore consecutive duplicated properties with different values.

Including duplicate properties (fallbacks) is useful to deal with older browsers support for CSS properties. E.g. using 'px' units when 'rem' isn't available.

The following patterns are considered violations:

/* properties with the same value */
p {
  font-size: 16px;  
  font-size: 16px;
  font-weight: 400;
}

/* nonconsecutive duplicates */
p {
  font-size: 16px;
  font-weight: 400;
  font-size: 1rem;
}

The following patterns are not considered violations:

p {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
}

ignoreProperties: ["/regex/", "non-regex"]

Ignore duplicates of specific properties.

Given:

["color", "/background\-/"]

The following patterns are considered violations:

a { color: pink; background: orange; background: white; }

a { background: orange; color: pink; background: white; }

The following patterns are not considered violations:

a { color: pink; color: orange; background-color: orange; background-color: white; }

a { color: pink; background-color: orange; color: orange; background-color: white; }

Further Reading

• stylelint - declaration-block-no-duplicate-properties