Skip to main content

no-duplicate-selectors

Disallow duplicate selectors within a stylesheet.

    .foo {} .bar {} .foo {}/** โ†‘              โ†‘ * These duplicates */

This rule checks for two types of duplication:

  • Duplication of a single selector with a rule's selector list, e.g. a, b, a {}.
  • Duplication of a selector list within a stylesheet, e.g. a, b {} a, b {}. Duplicates are found even if the selectors come in different orders or have different spacing, e.g. a d, b > c {} b>c, a d {}.

The same selector is allowed to repeat in the following circumstances:

  • It is used in different selector lists, e.g. a {} a, b {}.
  • The duplicates are determined to originate in different stylesheets, e.g. you have concatenated or compiled files in a way that produces sourcemaps for PostCSS to read, e.g. postcss-import.
  • The duplicates are in rules with different parent nodes, e.g. inside and outside of a media query.

This rule resolves nested selectors. So a b {} a { & b {} } counts as a problem, because the resolved selectors end up with a duplicate.

Options#

true#

The following patterns are considered problems:

.foo,.bar,.foo {}
.foo {}.bar {}.foo {}
.foo .bar {}.bar {}.foo .bar {}
@media (min-width: 10px) {  .foo {}  .foo {}}
.foo, .bar {}.bar, .foo {}
a .foo, b + .bar {}b+.bar,a  .foo {}
a b {}a {  & b {}}

The following patterns are not considered problems:

.foo {}@media (min-width: 10px) {  .foo {}}
.foo {  .foo {}}
.foo {}.bar {}.foo .bar {}.bar .foo {}
a b {}a {  & b,  & c {}}

Optional secondary options#

disallowInList: true | false (default: false)#

This option will also disallow duplicate selectors within selector lists.

For example, with true.

The following patterns are considered problems:

input, textarea {  border: 2px;}
textarea {  border: 1px;}