Run npm install && npm start
to see.
working.html
usespsg-theme-1column
and creates correct style guide.broken.html
uses default theme (psg-theme-default
) and creates styleguide but doesn't add markdown.
node_modules/ |
v5.6.0 |
{ | |
"use": [ | |
"postcss-style-guide" | |
], | |
"input": "src.css", | |
"output": "dist.css", | |
"local-plugins": true, | |
"postcss-style-guide" : { | |
"dest": "broken.html" | |
} | |
} |
{ | |
"name": "postcss-style-guide-20160215", | |
"description": "postcss-style-guide-20160215", | |
"author": "Paul Love <[email protected]>", | |
"engines": { | |
"node": ">=5.6.0" | |
}, | |
"scripts": { | |
"broken": "postcss --config broken.json", | |
"working": "postcss --config working.json", | |
"start": "npm run broken && npm run working" | |
}, | |
"devDependencies": { | |
"postcss-cli": "2.3.3", | |
"postcss-style-guide": "0.13.0", | |
"psg-theme-1column": "0.4.0" | |
} | |
} |
/* | |
@styleguide | |
@title Button | |
Use the button classes on and `<a>`, `<button>`, `<input>` elements. | |
<button class="button button--large button--red">Red Button</button> | |
<button class="button button--large button--red">Red Button</button> | |
<button class="button button--large button--blue">Red Button</button> | |
<button class="button button--large button--blue">Red Button</button> | |
*/ | |
.button { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
border-radius: 6px; | |
cursor: pointer; | |
} | |
.button--large { | |
width: 140px; | |
height: 40px; | |
font-size: 14px; | |
} | |
.button--red { | |
color: #fff; | |
background-color: red; | |
} | |
.button--blue { | |
color: #fff; | |
background-color: blue; | |
} |
{ | |
"use": [ | |
"postcss-style-guide" | |
], | |
"input": "src.css", | |
"output": "dist.css", | |
"local-plugins": true, | |
"postcss-style-guide" : { | |
"dest": "working.html", | |
"theme": "1column" | |
} | |
} |