Initial Thoughts on PostCSS

Lets just use JavaScript for EVERYTHING!

Earlier today I found out about PostCSS, now my life is forever changed?

Very frequently do I complain about just how slow ruby Sass is (sometimes taking a whole 1s to compile a website's CSS... our definition of slow is just silly these days), but libsass is always behind and missing the cool kid features. This is where PostCSS comes in.

It's not meant to be a Javascript version of Sass like how libsass is a C++ version of ruby Sass, it's a completely different thing. At it's core it's just a CSS parser written in Javascript which people have written plugins for that give it Sass like features. This is the line that got me,

PostCSS can do the same work as preprocessors like Sass, Less, and Stylus. But PostCSS is modular, 4-40 times faster, and much more powerful.

4-40 Times faster... wow!

I immediately started reading the docs and playing with it. I even went so far as to making an example/tutorial and threw it up on github.

I used grunt to compile out my CSS, I tried straight from the command line and it didn't work after 2 tries so I switched to grunt as that's how I'd do it for real anyways.

Here's a snippet of my gruntfile.js

postcss: {
  options: {
    map: false,
    processors: [
      require('postcss-import')(),
      require('postcss-simple-vars')(),
      require('postcss-simple-extend')(),
      require('postcss-nested')(),
      require('postcss-media-minmax')(),
      require('postcss-merge-rules')(),
      require('postcss-discard-comments')({removeAll: true}),
      require('autoprefixer-core')({browsers: 'last 2 version'}).postcss,
      // require('csswring').postcss,
    ]
  },
  dist: {
    files: {
      'dist/styles.css': 'src/all.css'
    }
  }
}

You just add in all the plugins you want to run. Worth noting, order is important as that's the order they'll run in. One plugin said it needed to run before postcss-nested as running it after caused some issues. So far simple enough I think. I've left csswring commented out as it's a minifier and I think that isn't best practice when giving examples of what it does to the CSS when it's basically unreadable as minified.

After that you write CSS just like you would write Sass and it just sort of works. A couple things that were different were:

• on @import you must include an _ if your filename starts with one.
• cannot use file extension of .scss which caused some highlighting issues
• @extend didn't work the way I thought it would (I rarely use extends in real life though)
• comments must be in /* comment goes here */ format, // here is my comment won't get removed properly.
• postcss-merge-rules sort of worked. I think it's an issue with nesting. It worked on my h1 tags, but not on one that had nesting on it.

I'm sure I've missed a ton of things, and if you know of cool things worth trying out or you see why things didn't work right for me let me know. I'm excited to keep playing with PostCSS!