PostCSS Docs

PostCSS plugin for doc comments.

/**
 * More complex doc
 *
 * @var {Color} --foo-color The value used as "color"
 */
.foo {
  color: var(--foo-color, currentColor);
}

After processing the above css source the result AST will contain additional information extracted from the parsed comments. Parsing is not part of the implementation of this package! Parsing is done using comment-parser. Both, the targeted Rule node as well as the Comment node will contain a doc field after the processing is done.

{
  "description": "More complex doc",
  "text": "/** ... */",
  // postcss ChildNode, can be null
  "target": { ... },
  "tags": [
    {
      "tag": "var",
      "description": "The value used as \"color\"",
      "name": "--foo-color",
      "type": "Color",
      "optional": false
      ...
    }
  ],
  // from comment-parser
  "source": [ ... ],
  // from comment-parser
  "problems": [ ... ]
}

Useful Links

• comment-parser Result API
• postcss API

Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-docs

Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to the official docs.

Step 3: Add the plugin to your config

module.exports = {
  plugins: [
+   require('postcss-docs')
  ]
}