禁止重複選擇器

禁止重複選擇器。

    .foo {} .bar {} .foo {}
/** ↑               ↑
 * These duplicates */

此規則檢查兩種重複類型

• 單一選擇器與規則選擇器清單重複，例如 a, b, a {}。
• 樣式表內選擇器清單重複，例如 a, b {} a, b {}。即使選擇器順序不同或間距不同，仍會找出重複項，例如 a d, b > c {} b>c, a d {}。

在下列情況下，允許重複相同選擇器

• 在不同的選擇器清單中使用，例如 a {} a, b {}。
• 重複項確定來自不同的樣式表，例如您以 PostCSS 可以讀取來源對應的方式串接或編譯檔案，例如 postcss-import。
• 重複項在具有不同父節點的規則中，例如媒體查詢內外。

此規則解析巢狀選擇器。因此 a b {} a { & b {} } 算是有問題，因為解析的選擇器最後會重複。

message 次要選項可以接受此規則的引數。

選項

true

下列模式被視為有問題

.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 {}
}

下列模式不被視為有問題

.foo {}
@media (min-width: 10px) {
  .foo {}
}

.foo {
  .foo {}
}

.foo {}
.bar {}
.foo .bar {}
.bar .foo {}

a b {}
a {
  & b,
  & c {}
}

選用次要選項

disallowInList: true | false (預設值：false)

此選項也會禁止選擇器清單內的重複選擇器。

例如，使用 true。

下列模式被視為有問題

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