我如何在编辑器中检查class属性的类是否在库中？

Question

What I want to achieve

I want to detect when the class name of the general CSS library and the class name declaration of my CSS file are duplicated (On the editor of PHPStorm, Atom, VSCode, etc).

Is there a way to detect in the HTML file if the class name is duplicated?

---

What I examined (but they are useless)

So I searched for CSS Lint and found CSS LINT and stylelint .

However, it seems that CSS LINT does not have a function to detect duplicate class names, and the following CSS did not issue any errors or warnings.

.duplicate_class {
  background: #ffa;
}

.duplicate_class {
  font-size: 5px; /* I want errors and warnings */
}

stylelint's no-duplicate-selectors check selectors instead of class names, thus allowing duplicate class names:

.class {
  background: #ffa;
}

body .class {
  font-size: 5px;
}

Of course, htmllint didn't have the ability to detect duplicate class names.

Answer 1

I have never come across such a plug, a tool. But it is possible to combine such classes.

Input

.module {
  color: green;
}
.another-module {
  color: blue;
}
.module {
  background: red;
}
.another-module {
  background: yellow;
}

Output

.module {
  color: green;
  background: red;
}
.another-module {
  color: blue;
  background: yellow;
}

Library is postcss and plugin postcss-combine-duplicated-selectors . Can be used from the command line.