Run npm install && npm start to see.
working.htmlusespsg-theme-1columnand creates correct style guide.broken.htmluses 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 <paul@anglepoised.com>", | |
| "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" | |
| } | |
| } |