Migrate from Sass to PostCss

tldr; Don’t replace your Sass. PostCss works great on top of it.

PostCss has been on my mind ever since it came out. The project I work on is in Sass and I’ve always thought about how great it would be to switch over to PostCss. I thought that there would be huge benefits to the project build time, and more freedom in writing css. It was worth a try.

My first task was to identify what needed to be converted. Sass handles a lot for us. I’ve never realized how much that was.

Here are some packages I needed to import:

postcss-import (I used postcss-smart-import)
postcss-strip-inline-comments (for those that write comments)
postcss-mixins (I used postcss-sassy-mixins)
postcss-functions
postcss-for
postcss-each
postcss-conditionals
postcss-advanced-variables
postcss-simple-vars
postcss-nested
postcss-units
autoprefixer

Loops, mixins and functions have different syntax in Post. So you will need to modify that a little.

You can also use precss, which handles a lot of that for you. Precss didn’t work for me, so I couldn’t use it.

Make sure you configure your postcss-import correctly before you do anything else. It was a huge pain point in my migration. I’m using webpack, so along with setting up webpack, make sure you have a postcss.config.js.

Here was my postcss.config.js

module.exports = (ctx) => ({
plugins: [
require('postcss-smart-import')({
addDependencyTo: ctx.webpack,
path: ['(path)/styles']
}),
require('postcss-strip-inline-comments')(),
require('postcss-functions')({
glob: ['(path)/styles/functions/*.js']
}),
require('postcss-sassy-mixins')(),
require('postcss-for')(),
require('postcss-each')(),
require('postcss-conditionals')(),
require('postcss-advanced-variables')(),
require('postcss-simple-vars')(),
require('postcss-nested')(),
require('postcss-units')(),
require('autoprefixer')()
]
})

The whole migration process took me about 1–2 days. There was very little documentation around setting up the config and I spent a lot of time reading through github issues.

After I finished with the migration, I did a few tests on my build time. I didn’t see any improvements, sometimes it was slower, sometimes it was faster... Apparently node-sass is really fast.

So for all that work, I was only left with one benifit which was more freedom with my css. But I can also have it with my current system, the combination of both Sass and PostCss running together. So I decided to scrap all that work and keep what I currently have.

So here’s what I learned. PostCss doesn’t have to be a replacement for Sass. They work fine together. PostCss is also great for extending what you currently have.

Like what you read? Give Clarence N a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.