Moving from SASS to PostCSS, why what and how

Because we are tired of node-sass, sorry not sorry

What is PostCSS

TLDR; PostCSS is in some way like a Javascript bundler in the sense that it’s up to you how you use it, it gets input and give you output, but in the middle, you can hook plugins to transform your data into a multitude of the possible way leaving the door open to your preferred CSS writing style, for example: are you a virtuous python-ista? then there is a plugin to handle a no-bracket indent-based syntax, you get the point there are plugins for everything, you can find tons of them on postcss.parts!

Why switching to PostCSS

What always bothered me about SASS was node-sass C++ binding, don’t get me wrong, they did a great job and it has good performance, I used it as a micro-service worker of a multi-tenant application to generate tenant’s styles and it worked great, but I don’t want to compile binding every time I pull or have to hear all the problems it generates on other people machines, what the heck, it’s only CSS at the end of the day not some sort of rocket maneuvering software!

Gracefully moving from SCSS to PostCSS

To stay on topic I’ll do the switch based on SCSS writing style, so I’ll need $variables, nested selectors, mixins, and minification, and optionally, but not mandatory, auto prefixing. Plugins run on Node.js so most of the time the same plugin you find can be used standalone without the need of PostCSS but from now I’ll use Gulp examples since I already used it and have a snippet to paste.

Initial setup

For our setup you want to install gulp, gulp-postcss, gulp-sourcemaps, postcss-import, precss, Autoprefixer and cssnano

yarn add -D gulp gulp-postcss gulp-sourcemaps postcss-import gulp-postcss autoprefixer cssnano gulp-postcss

Imports

Although import is already in CSS, postcss-import gives you some more flexibility over your imports looking into node_modules and other directories you specify, you may want to use this plugin at the top of your stack so all the transformation after this will process all your data at once as a single file.

SCSS Syntax

You can implement SCSS like syntax in two ways: cherry-picking plugins or using precss which combines Sass-like syntactical sugar — like variables, conditionals, and iterators — with emerging CSS features — like color functions, logical and custom properties, media query ranges, and image sets.

Autoprefixer

Autoprefixer is a plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.

Minification

cssnano is a modern, modular compression tool written on top of the PostCSS ecosystem, which allows us to use a lot of powerful features to compact CSS appropriately.

Final setup

After adding all plugins into the array you are good to go, of course, you can provide and extends those plugin with ad-hoc configurations which you can find in their repositories.

Conclusions

Trying something different sometimes bring a breeze of fresh air in a routine of monotonous repetitive tasks, I usually try new tooling every day but remain attached for long when I find something that fits my need since I’m not doing a lot of “visual” things I remained over SCSS for far too long, I really liked PostCSS at first sight and even more when I discovered it didn’t have to compile some nasty binding, it’s time for me to drop clogged dependencies and clean up my systems and PostCSS will do the work easily and it’s blazing fast, you should totally give it a try today!

Hi I'm yet anotherBackend Engineer! I build things, play with things and I’m curious about everything, probably even too much!