Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

We offer PostCSS on CodePen, and the purpose of using it is like anywhere else: you use plugins that do potentially useful preprocessing to your CSS. We do not currently have a way for you to use whatever plugin you want for PostCSS, we only offer a select few. To use them, you have to declare you are going to use them through code. For example:

@use postcss-triangle;

.isosceles-triangle {
  triangle: pointing-right;
  width: 150px;
  height: 115px;
  background-color: red;
}

The complete list of them is in the app, in the Pen Settings area:

We just did a round of upgrades, so I figured, for the interested, we’d show off exactly what we’re offering. Here’s the actual part of the package.json file for the Node machine that processes our PostCSS:

  "dependencies": {
    "postcss": "^5.2.6",
    "postcss-use": "^2.3.0",
    "autoprefixer": "^6.5.3",
    "cssnext": "^1.8.4",
    "postcss-cssnext": "^2.9.0",
    "lost": "^7.1.1",
    "postcss-conditionals": "^2.0.3",
    "postcss-custom-media": "^5.0.1",
    "postcss-discard-comments": "^2.0.4",
    "postcss-each": "^0.9.3",
    "postcss-for": "^2.1.1",
    "postcss-media-minmax": "^2.1.2",
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^3.0.0",
    "postcss-transform-shortcut": "^2.0.0",
    "postcss-flexbox": "^1.0.2",
    "postcss-color-function": "^2.0.1",
    "postcss-triangle": "^1.0.1",
    "postcss-apply": "^0.4.0",
    "postcss-mixins": "^5.4.0",
    "postcss-extend": "^1.0.5",
    "postcss-reverse-media": "^0.1.2"
  },

And here’s a single Pen using every single one of them (very basic uses):

See the Pen All PostCSS Plugins we offer (December 2016) by Chris Coyier (@chriscoyier) on CodePen.