# postcss-style-docs

> PostCSS plugin for dynamically adding documentation to styles

Latest version **0.0.7** (published 2022-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-style-docs
pnpm add postcss-style-docs
yarn add postcss-style-docs
bun add postcss-style-docs
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2022-05-26 |
| First published | 2022-05-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12.0.0 |
| Dependencies | 0 |
| Unpacked size | 13.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Caleb D. Williams |
| Maintainers | calebdwilliams |
| Keywords | postcss, css, postcss-plugin, postcss-style-docs |

## Links

- npm: https://www.npmjs.com/package/postcss-style-docs
- Repository: https://github.com/calebdwilliams/postcss-style-docs
- Homepage: https://github.com/calebdwilliams/postcss-style-docs#readme
- Issues: https://github.com/calebdwilliams/postcss-style-docs/issues
- npm.io page: https://npm.io/package/postcss-style-docs

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.7 (latest) — 2022-05-26
- 0.0.6 — 2022-05-11
- 0.0.5 — 2022-05-11
- 0.0.4 — 2022-05-11
- 0.0.3 — 2022-05-11
- 0.0.2 — 2022-05-11
- 0.0.1 — 2022-05-11

## README

# postcss-style-docs

[PostCSS] plugin for dynamically adding documentation to styles.

[PostCSS]: https://github.com/postcss/postcss

The `postcss-style-docs` pluin will walk through your input CSS and create a map of styles to documentation blocks as a message output.

```css
/**
 * @docs
 * This is a documentation block for the .foo class
 * it can be multiple lines
 */
.foo {
  /* Input example */
}
```

```css
.foo {
  /* Output example */
}
```

## Usage

**Step 1:** Install plugin:

```sh
npm install --save-dev postcss postcss-style-docs
```

**Step 2:** The `postcss-style-docs` plugin works best when manually calling `postcss.process` which enables users to get data out of the plugin:

```javascript
import postcss from 'postcss';
import { getDocs, styleDocsPlugin } from './lib/cjs/index';

const inputCSS = `
/**
 * @docs
 * We're doing something really fancy and our users are going
 * to love it.
 */
.something-fancy {
  color: tomato;
}

/** @docs Make it pop */
.something-fancy--pop {
  background: papayawhip;
}
`;

const { css, messages } = await postcss([
  styleDocsPlugin()
]).process(inputCSS, { from: undefined });

const docs = getDocs(messages);

console.log(docs.size); // 2
console.log(docs.get('.something-fancy')); // 'We're doing something really fancy and our users are going to love it'
console.log(docs.get('.something-fancy--pop')); // 'Make it pop'
```

[official docs]: https://github.com/postcss/postcss#usage

---
_Source: https://npm.io/package/postcss-style-docs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._