Skip to content

@cssdoc/eslint-plugin

@cssdoc/eslint-plugin — ESLint rules for CSS documentation.

  • cssdoc/valid-doc-comments (on the @eslint/css language) checks the stylesheet's own doc-comment hygiene via @cssdoc/lint-core.
  • cssdoc/valid-class-usage (on JS/JSX and HTML) checks that the classes consumers apply — including chained modifiers like class="btn -color-secondary" — match the documented CSS surface, via @cssdoc/providers. Point it at your CSS with the css option.

Example

js
// eslint.config.js
import cssdoc from "@cssdoc/eslint-plugin";
import html from "@html-eslint/parser";

export default [
  ...cssdoc.configs.recommended, // .css doc hygiene
  {
    files: ["**/*.jsx", "**/*.tsx"],
    languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } },
    plugins: { cssdoc },
    rules: { "cssdoc/valid-class-usage": ["warn", { css: ["dist/components.css"] }] },
  },
  {
    files: ["**/*.html"],
    languageOptions: { parser: html },
    plugins: { cssdoc },
    rules: { "cssdoc/valid-class-usage": ["warn", { css: ["dist/components.css"] }] },
  },
];

Variables

Released under the MIT License