I didn’t intend to write something about this, I’m not a CSS guy and sometimes I really hate it, but it happens that I have to write some of it for my components and/or for clients’ front-end and my preprocessor of choice over the years has always been LESS and then SASS when it died out, mainly because of nesting but also variables and mixins.
The other day I was building a component and since I may have to do it several times in the months ahead I thought to start a boilerplate from the ground and get the chance to finally make the switch!
What is PostCSS
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.
yarn add -D gulp gulp-postcss gulp-sourcemaps postcss-import gulp-postcss autoprefixer cssnano gulp-postcss
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.
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.
But if you want to go cherry-picking some interesting ones serve the same purpose:
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.
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.
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!
If you want to give a look at different bundlers I’ve added a very basic boilerplate using Rollup.js which I’ll use for standalone components, feel free to give some feedback!