PostCSS Playground

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.

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