---
url: /reference/@cssdoc/eslint-plugin.md
---
# @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. In JSX it reads dynamic bindings
  best-effort (string/template literals in `className={…}`, arrays, and quoted object keys), the same
  forms the editor checks.

## 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

* [default](variables/default.md)