https://github.com/2createstudio/postcss-toc
Generate table of contents for your stylesheets
https://github.com/2createstudio/postcss-toc
Last synced: 6 months ago
JSON representation
Generate table of contents for your stylesheets
- Host: GitHub
- URL: https://github.com/2createstudio/postcss-toc
- Owner: 2createStudio
- License: mit
- Created: 2017-04-25T14:09:14.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-25T14:16:58.000Z (almost 9 years ago)
- Last Synced: 2025-01-09T16:34:58.876Z (about 1 year ago)
- Language: JavaScript
- Size: 2.93 KB
- Stars: 1
- Watchers: 8
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-toc
### Usage
```js
var fs = require('fs');
var path = require('path');
var postcss = require('postcss');
var toc = require('postcss-toc');
var css = fs.readFileSync('./css/style.css', 'utf8');
postcss([toc(opts)])
.process(css, {
from: './css/style.css',
to: './dist/style.css'
})
.then(function(result) {
fs.writeFileSync('./dist/style.css', result.css);
});
```
**Result**
```css
/* Input */
/* ------------------------------------------------------------ *\
Button
\* ------------------------------------------------------------ */
.btn { display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; border-radius: 0; color: #999; font-size: 16px; font-weight: 500; padding: 9px 10px 5px; }
.btn:hover { transform: scale(.95); color: #999; }
/* Button Border */
.btn--border { border: 1px solid #ccc; }
/* Button Medium */
.btn--medium { min-width: 170px; }
/* Button Block */
.btn-block { display: block; padding-left: 0; padding-right: 0; }
/* ------------------------------------------------------------ *\
Slider
\* ------------------------------------------------------------ */
.slider .slides { list-style: none outside none; }
/* ---------------- */
/* Output */
/*
Table of Contents
1. Button ------------------------------------
Button Border ----------------------------
Button Medium ----------------------------
Button Block -----------------------------
2. Slider ------------------------------------
*/
/* ------------------------------------------------------------ *\
Button
\* ------------------------------------------------------------ */
.btn { display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; border-radius: 0; color: #999; font-size: 16px; font-weight: 500; padding: 9px 10px 5px; }
.btn:hover { transform: scale(.95); color: #999; }
/* Button Border */
.btn--border { border: 1px solid #ccc; }
/* Button Medium */
.btn--medium { min-width: 170px; }
/* Button Block */
.btn-block { display: block; padding-left: 0; padding-right: 0; }
/* ------------------------------------------------------------ *\
Slider
\* ------------------------------------------------------------ */
.slider .slides { list-style: none outside none; }
```