# css-table-of-contents

> Create a table of contents from your comments

Latest version **1.0.5** (published 2020-04-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install css-table-of-contents
pnpm add css-table-of-contents
yarn add css-table-of-contents
bun add css-table-of-contents
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2020-04-13 |
| First published | 2020-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ziga-miklic |
| Maintainers | zigamiklic |
| Keywords | TOC, Table of contents, Comments list, CSS |

## Links

- npm: https://www.npmjs.com/package/css-table-of-contents
- Repository: https://github.com/ziga-miklic/csstoc
- Issues: https://github.com/ziga-miklic/css-table-of-contents/issues
- npm.io page: https://npm.io/package/css-table-of-contents

## Dependencies (1)

- [css](https://npm.io/package/css.md) ^2.2.1

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

- 1.0.5 (latest) — 2020-04-13
- 1.0.4 — 2020-04-08
- 1.0.3 — 2020-04-08
- 1.0.2 — 2020-04-08
- 1.0.1 — 2020-04-07
- 1.0.0 — 2020-04-07

## README

# CSS Table Of Contents

Create a table of contents from your comments using markdown-like comments (`## Heading 2`).

## Options

| Option        | Type               | Defaut value          | Description                                                                                              |
| ------------- | ------------------ | --------------------- | -------------------------------------------------------------------------------------------------------- |
| code          | string             | /                     | Required. CSS code to parse.                                                                             |
| title         | string             | `'Table of contents'` | Title of the TOC that displays at the top of the list.                                                   |
| isOnly        | bool               | `false`               | If `false`, returns both the TOC and the original code. If `true`, returns only TOC.                     |
| indentSize    | number             | `2`                   | Number of spaces added for each level.                                                                   |
| indentStart   | number             | `3`                   | First indented heading. For example 3 means the first indent will be added before h3 (`###`) list items. |
| isShowNumbers | bool               | `false`               | Show list numbering.                                                                                     |
| isGap         | bool               | `true`                | Show empty line before h1 (`#`) items.                                                                   |
| prefix        | function or string | `formatPrefix()`      | Text that is added before the TOC list. The first function parameter is `title`.                         |
| linePrefix    | string             | `* `                  | Text added before each line.                                                                             |
| suffix        | string             | `'\n*/\n\n\n'`        | Text that is added after the TOC list, if `isOnly` is `false`.                                           |
| suffixOnly    | string             | `'\n*/'`              | Text that is added after the TOC list, if `isOnly` is `true`.                                            |
| h1 - h5       | function           | `h1()` - `h5()`       | Function with formatting for each heading type. The first parameter is the unchanged line text.          |

## Examples

All the examples below will use the same CSS code from which the table of contents will be generated:

```css
/* app.css */

/* # Components */

/* ## Card */

.card { }

/* ### Card default */

.card--default { }

/* ### Card compact */

.card--compact { }

/* # Helpers */

/* ## Margins */

.m-t-1 { }
.m-r-1 { }

/* ## Paddings */

.p-t-1 { }
.p-r-1 { }

/* # Widgets */

/* ## Mini cart */

.mini-cart { }

/* ## Tags */

.tags { }
```

The above CSS illustrates how to add comments before your rules.

### Basic Example

### 
```js
const toc = require('css-table-of-contents');
const fs = require('fs');

const code = fs.readFileSync('./app.css').toString();

toc({
  code,
  isOnly: true,
});
```

### Result

```
/*
* Table of contents
*
*
* COMPONENTS
* Card
*   Card compact
*/
```

### Numeric Example

This examples shows a numeric list without indentation.

```js
const toc = require('css-table-of-contents');
const fs = require('fs');

const code = fs.readFileSync('./app.css').toString();

toc({
  code,
  isShowNumbers: true,
  indentSize: 0,
  isOnly: true,
});
```

### Result

```
/*
* Table of contents
*
*
* 1. COMPONENTS
* 1.1. Card
* 1.1.1. Card default
* 1.1.2. Card compact
*
* 2. HELPERS
* 2.1. Margins
* 2.2. Paddings
*
* 3. WIDGETS
* 3.1. Mini cart
* 3.2. Tags
*/
```

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