├── modules ├── .gitignore ├── package.json ├── readme.md └── source.js ├── readme.md └── index.html /modules/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | This is the source code for [https://sneakertack.github.io/postcss-playground/](https://sneakertack.github.io/postcss-playground/). 2 | 3 | If cloning, remember to follow the instructions in the readme in `modules/`. 4 | -------------------------------------------------------------------------------- /modules/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "autoprefixer-core": "^5.1.11", 4 | "postcss": "^4.1.8", 5 | "postcss-nested": "^0.2.2", 6 | "postcss-simple-vars": "^0.2.4", 7 | "postcss-spiffing": "0.0.4" 8 | }, 9 | "scripts": { 10 | "build": "browserify source.js | uglifyjs > bundle.js" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /modules/readme.md: -------------------------------------------------------------------------------- 1 | # Workflow 2 | 3 | Uses `browserify` and `uglify-js`. Make sure they're installed. 4 | 5 | Then do `npm install` in this folder. Then, edit `source.js`. Then, run: 6 | 7 | `npm run build` (actually just `browserify source.js | uglifyjs > bundle.js`) 8 | 9 | This compiles `bundle.js`, which is loaded by `index.html`. 10 | -------------------------------------------------------------------------------- /modules/source.js: -------------------------------------------------------------------------------- 1 | // Require the requirables, then send them to a modules object on the browser. 2 | window.modules = { 3 | postcss: require('postcss'), 4 | spiffing: require('postcss-spiffing'), 5 | autoprefixer: require('autoprefixer-core'), 6 | simpleVars: require('postcss-simple-vars'), 7 | nested: require('postcss-nested') 8 | }; 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | PostCSS Playground 4 | 5 | 6 | 7 | 8 | 9 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 |
167 |
168 |

PostCSS Playground

169 | 170 |
171 | 172 | 173 | 174 |
175 | 176 |

This page lets you try your hand at building a simple PostCSS processor. Processor code goes on the right. CSS Source code goes in below-left, and it gets transformed (from left to right) into valid CSS.

177 |

PostCSS has many plugins. For this demo, the following example plugins have been made available in global scope: spiffing, autoprefixer, simpleVars, and nested.

178 |
179 |
180 | 194 | 195 | 198 | 205 |
206 |
207 | 208 |
209 |
210 | 211 | 218 | 228 | 229 |
230 | 231 |
232 | 233 | 234 |
235 | 240 |
241 | 242 | 243 | 244 | 254 | 261 | 262 | 263 |
264 | 265 |
266 | 267 |
268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 502 | 503 | 504 | --------------------------------------------------------------------------------