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 just spent some time making sure we were up-to-date on all the preprocessors we offer here on CodePen. Here’s the complete list.

  • Sass 3.4.21 to 3.4.22
    • Susy from 2.2.2 to 2.2.12
    • Bourbon from 4.2.2 to 4.2.7
    • Neat from 1.7.2 to 1.8.0
    • Breakpoint from 2.5.0 to 2.7.1
    • Toolkit from 2.10.2 to 3.0.7

  • Slim from 3.0.3 to 3.0.7

  • Stylus from 0.53.0 to 0.54.5
    • Jeet from 6.1.2 to 7.1.0
    • Nib from 1.1.0 to 1.1.2

  • Less from 2.5.0 to 2.7.1
    • LessHat from 3.0.2 to 4.1.0

  • PostCSS from 5.0.15 to 5.2.6
    • Removed postcss-write-svg (Couldn’t get to work)
    • Removed postcss-transform-shortcut (Error about Block-scoped declarations)
    • Replaced cssnext with postcss-cssnext 2.9.0
    • lost from 6.2.2 to 7.1.1
    • postcss-conditionals from 2.0.0 to 2.0.3
    • postcss-custom-media from 5.0.0 to 5.0.1
    • postcss-discard-comments from 2.0.0 to 2.0.4
    • postcss-each from 0.7.0 to 0.9.3
    • postcss-use from 2.0.0 to 2.3.0
    • Added postcss-flexbox 1.0.2
    • Added postcss-color-function 2.0.1
    • Added postcss-triangle 1.0.1
    • Added postcss-apply 0.4.0
    • Added postcss-mixins 5.4.0
    • Added postcss-extend 1.0.5
    • Added postcss-reverse-media 0.1.2
  • Autoprefixer from 6.0.3 to 6.5.3

  • TypeScript from 1.8.10 to 2.1.4

  • LiveScript from 1.4.0 to 1.5.0

  • CoffeeScript from 1.10.0 to 1.12.1

  • Babel from 5.0.0 to 6.18.2
    • Updated dependency packages, see config below.

If something isn’t on the list above, it means we were already running the most recent version of it.

A Page Just For Versions

We keep a page just for listing the current versions of things.

That page also links to a request form in which you can hit us up directly if there is something out of date you’d like to see upgraded sooner than later. Feel free to use that form for requests for new things as well.

Our General Philosophy

We run the latest stable version of all preprocessors. Even with breaking changes.

We know that can be painful sometimes. It would be cool to have a system one day where you can specify and lock versions of things like this (that’s why we moved to having explicit URLs for all JavaScript libraries). Unfortunately, we don’t right now and can’t absolutely promise we will.

Breaking Changes

Jade → Pug

One the recent changes with likely the most breaking changes was the transition from Jade to Pug. We did that because the official name of the project has changed. We have received tons and tons of requests to move to Pug, and wanted to make that move ourselves. It has arrived. It’s a slight break from our philosophy in that Pug is technically still in beta, but it’s been that way for a long time and feels pretty stable.

Forbes Lindesay has documented the breaking changes from Jade > Pug 2. The Pug website also has a migration guide.

Bryan Stoner also has a brand new post Learn Pug.js with Pugs to check out! The only difference between when he wrote it and now is that our UI says “Pug” instead of “Jade” in all the right places.

Babel Config

We’re no longer compiling with es2015-loose, just es2015. Our complete options are:

  "presets": ["es2015", "stage-0", "react"],
  "plugins": ["transform-decorators-legacy", "transform-object-rest-spread"]

This shouldn’t cause much grief. Even if the Babel compiles a bit differently it should run the same.

Jeet 7

Jeet 7 claims to break a lot of things from Jeet 6.

Others we’re watching

  • We’d really love to start offering LibSass/node-sass, but it’s probably a bit too breaky to switch everyone over to it, even though they’re calling 3.4.0 as feature-complete with Ruby Sass as they are going to get. If we make this switch, it’ll likely be only a new default and opt-in for older Pens.

  • Sass 3.5 is coming.

  • Haml 5.0 is coming.
    • Haml is another one we’d really like to switch to a Node version of, but it looks like the two most popular versions of that (haml-js and haml.js) aren’t feature complete or actively developed.