Skip to main content

declaration-block-no-duplicate-properties

Disallow duplicate properties within declaration blocks.

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

This rule ignores variables ($sass, @less, --custom-property).

The fix option can automatically fix all of the problems reported by this rule.

The message secondary option can accept the arguments of this rule.

Options​

true​

The following patterns are considered problems:

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

The following patterns are not considered problems:

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

Optional secondary options​

ignore: ["consecutive-duplicates"]​

Ignore consecutive duplicated properties.

They can prove to be useful fallbacks for older browsers.

The following patterns are considered problems:

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

The following patterns are not considered problems:

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 problems:

/* 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 problems:

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

ignore: ["consecutive-duplicates-with-different-syntaxes"]​

Ignore consecutive duplicated properties with different value syntaxes (type and unit of value).

The following patterns are considered problems:

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

The following patterns are not considered problems:

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

ignore: ["consecutive-duplicates-with-same-prefixless-values"]​

Ignore consecutive duplicated properties with identical values, when ignoring their prefix.

This option is useful to deal with draft CSS values while still being future proof. E.g. using fit-content and -moz-fit-content.

The following patterns are considered problems:

/* nonconsecutive duplicates */
p {
  width: fit-content;
  height: 32px;
  width: -moz-fit-content;
}
/* properties with different prefixless values */
p {
  width: -moz-fit-content;
  width: 100%;
}

The following patterns are not considered problems:

p {
  width: -moz-fit-content;
  width: fit-content;
}

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

Ignore duplicates of specific properties.

Given:

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

The following patterns are considered problems:

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

The following patterns are not considered problems:

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