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’ve rejiggered the UI a bit so that finding and adding preprocessor add-ons is a bit easier. As they say, easier to GIF than to paragraph:

Brand new is the search bar and the “Add” buttons, so you can quickly filter them and one-click add them to the top of your CSS. (Only CSS has add-ons at the moment.)

When you click the “Add” button, that add-on goes to the top of your CSS. So when working with add-ons with dependencies, the quick way is to add the dependant first (e.g. neat) then the dependency next (e.g. bourbon).

Dependency is visualized like this in the add-on list:

One of the things that took us this route is that there are quite a few PostCSS plugins, and this makes them easier to get to without a visually super long list.

Speaking of which, we were about to add a few PostCSS plugins that were requested, only to find they were in pretty poor shape and ultimately didn’t add them. If we are missing any that you really want, and they are well-maintained and have some measureable popularity, hit us up and we’ll see if we can add them.

High five to Rachel who took the lead on this one.