Most front-end developers have already heard about PostCSS, maybe some of them have tried to use it. It is quite a popular tool nowadays, but not yet as massively used as SASS or LESS. However, the buzz around PostCSS is increasing dynamically and benefits over other systems becoming even more and more obvious. Looks familiar, as we’ve seen this had happened with preprocessors couple of years ago.
You might be wondering, why do I need another sort of CSS system? A lot of front-end developers are already working with CSS preprocessors like SASS or Stylus, why would they need to move to something new? The answer is that you don’t really need PostCSS. BUT, it will make your life a lot easier!
However, there might be a small confusion about what is PostCSS?. Does it replace my favorite pre-processor or it forces you to forget about preprocessors and use postprocessor instead? Let’s look a bit closer and try to figure these things out.
What PostCSS is Not
PostCSS is not a preprocessor, even though many developers have already moved from SASS/LESS/STYLUS to PostCSS. However, you can use it as a preprocessor or use your favorite preprocessor in combination with PostCSS.
PostCSS is not a postprocessor. I guess it is a “post” part of a tool name (PostCSS) confuses most developers and makes them think that it has to deal with postprocessing. But the truth is that “post” here is not for determining the stage on which this tool is coming into play. It has a meaning similar to “beyond css” or “next generation css”.
What is PostCSS
PostCSS was created by Andrey Sitnik (from Evil Martians), author of autoprefixer. It is a simple tool which allows us to modify our CSS in any way we want, using chainable plugins. Each of this plugins makes one particular modification. Like autoprefixer which adds vendor prefixes to your css where it is needed.
The workflow of PostCSS is pretty simple. First it runs your valid CSS code through a CSS parser, which parses it into a CSS node tree, then it applies a chain of plugins which you defined, and in the end it stringifies modified CSS node tree back into a CSS code.
So is PostCSS a replacement for our favorite preprocessor? No it is not. However you can use it in conjunction with plugins to translate SASS/SCSS syntax into CSS. Thus you can use PostCSS with your current preprocessor or instead of preprocessor, the choice is completely yours.
As we see from above, PostCSS itself wouldn’t do as much, being really small and simple tool. But with entire plugins ecosystem, it allows you to do a lot more with your CSS than with any of existing preprocessors.
Power in Plugins
When SASS first came out, it was really cool that we could use something like compass and have all of these mixins for every single CSS3 property that exist, and it would take care of all of the vendor prefixes for you. With PostCSS and it’s packages we can forget that things like prefixes exist at all. So we can write our CSS or SCSS or whatever is our favorite syntax, as if all CSS properties are supported by browsers, and autoprefixer package for PostCSS will handle all of the prefixes for us. And autoprefixer is only one of tons of other plugins for PostCSS, so you can only imagine how far you can go by chaining different plugins within PostCSS.
PostCSS allows you to use next iterations of CSS, the syntax and features that you can’t quite use yet, but they are in development. It allows you to use those features, so your CSS will be future compatible, but it’s going to be currently compatible as well, because after it is run through PostCSS your code will contain everything you need to be working today.
And there are a lot more features in PostCSS plugins, that you can easily use in your development process today. Each plugin itself is just a plain JavaScript function, which receives a CSS node tree as and argument, transforms it and then returns the modified tree. So if you’re familiar with JavaScript you could easily write your own plugins for PostCSS.
Popular Packages
There’s a bunch of plugins can be found today on https://postcss.parts/ resource, which is a searchable catalog of PostCSS packages. And you can explore it for different kinds of goodies that you can include in your CSS system and make development process more efficient. But there are still some honorable mentions:
precss – is a tool that allows you to use Sass-like markup in your CSS files. Enjoy a familiar syntax with variables, mixins, conditionals, and other goodies.
cssnext – is a CSS transpiler that allows you to use the latest CSS syntax today. It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.
level4 – allows you to use W3C CSS Level 4 Modules Today with PostCSS. Take advantage of future techniques like variables, custom selectors, color functions, and new pseudo selectors.
rucksack – contains plugins to speed up CSS development with new features and shortcuts.
cssnano – contains plugins that optimize CSS size for use in production.
Conclusion
PostCSS is great because you can use it with your existing CSS system, or instead of your existing system. Basically it is meant to make your life easier by bringing all the goodies, that follow ‘write less, do more’ principle, to your pipeline. In fact, PostCSS could become your individual setup with your unique set of plugins, carrying out a lot much more tasks, than just a pre-processor.