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.

It’s true! PostCSS is here. It’s undeniable that this new CSS processor (they call it a “post processor”, but you can think of it in the same way you think of a preprocessor) is growing in popularity.

It’s all about the plugins

Perhaps the most important thing to know about PostCSS is that it doesn’t really do much all by itself. If you select it as a preprocessor on some existing CSS, you probably won’t notice it do anything at all. PostCSS is just the framework which enables various plugins that do the stuff.

Rather than have you select which plugins you’d like to use through the UI (perhaps you’ve noticed we’re moving away from that), we support the [postcss-use plugin], which allows you to declare which plugins you want to use right in the code itself.

It looks like this:

@use postcss-custom-media;

Our whitelisted plugins

There is quite a lot of PostCSS plugins available out there in the wild. I’m afraid we only support a subset of those here on CodePen. Here’s the list:

If there is one you really would like to use, let us know.

Usage

To use PostCSS and the plugins available for it, you open the Settings dialog in the Editor View of any Pen. You then select PostCSS from the CSS Preprocessor dropdown. If you click the “Need an add-on?” button, you’ll see a list of the plugins we support, for your copy-and-pasting pleasure.

Example

One of the plugins we support is postcss-custom-media. This allows you to write in the syntax in the current-as-of-now Editor’s Draft of the Media Queries spec.

To use this plugin, first you @use it, then go nuts:

@use postcss-custom-media;

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
  .module {
    padding: 10px;
  }
}

Here’s another example of using postcss-media-minmax:

@use postcss-media-minmax;

@media screen and (500px <= width <= 1200px) {
  .bar {
    display: block;
  }
}

Multiple plugins can be used.

postcss-cssnext

Another “plugin” we support is cssnext. They describe it as:

… a CSS transpiler that allows you to use the latest CSS syntax today. It transforms new CSS specs into more compatible CSS so you don’t need to wait for browser support.

I put “plugin” in quotes because cssnext is technically a plugin, but it’s built from a combination of a bunch of smaller plugins. Each of those has the focus of supporting one particular potential future CSS syntax. Some of those plugins we support individually, some we do not.

For instance, one plugin that cssnext supports that we otherwise don’t is postcss-custom-properties which allows you to play with future-syntax CSS variables in a limited sense. For example:

@use postcss-cssnext;

:root {
  --mainColor: red;
}
a {
  color: var(--mainColor);
}

Safe Mode

Earlier in this post, we said that PostCSS doesn’t do anything by itself. That’s true in a sense, it’s the parser on which the plugins are built. But it does a feature called “Safe Mode”. We played with having this turned on, but found that it did some kind of funky stuff. It also swallows all errors, so it’s harder to get feedback if you’ve written something incorrectly. With errors, we can output them inline on the error they happen.

We thought if we have safeMode on, and later decide to turn if off, we could break Pens. So unless a super compelling case can be made to have it on or off (or if it can be done in the code syntax itself), we’ll leave it off.

Customizing Autoprefixer

We offer Autoprefixer as a choice for prefixing CSS properties on your Pens. It’s a radio button choice, between Autoprefixer, -prefix-free, or no prefix helper at all. That’s going to stay.

But, Autoprefixer is really a PostCSS plugin. So if you want, you can turn off the setting for Autoprefixer and @use it. Doing it this way means being able to customize the browser support levels and other Autoprefixer settings. You can do that with a syntax like this:

@use autoprefixer(
  remove: false; 
  browsers: "> 1%, firefox 32"
);

main {
  /* Normally autoprefixer would remove the next statement, but we're telling it not to above. */
  -webkit-border-radius: 10px;
  border-radius: 10px;
  display: flex;
}

That same syntax can be used for any other PostCSS plugin that accepts parameters.

Enjoy!

Let us know if you find any bugs or have any other feedback.