How it Works

Alright, let’s take the example of Autoprefixer, probably the most famous PostCSS plugin. Minding your own business, you decide to align these cat facts paragraphs, side by side. Something seems off, and you notice that they don’t have the same height. It’s expected, but it would be nice to arrange them in a way so border positions wouldn’t seem silly.

One dirty but effective approach is the following:

I shiver just by looking at it. But thanks to Flexbox we have a great tool in our hands to solve such problems. As expected though, for a Flexbox solution to work in all modern browsers, we have to use some prefixes

Now, what we should do is include the whole -Moz and -WebKit spam. While it might be alright for a small app, in more ambitious ones, we should search for alternatives.

In SASS you would create a mixin and have it include the prefixes needed. A simple include doesn’t seem much, but it’s still sub-optimal. What if in the following months, a prefix or two isn’t needed for the last X Chrome versions? Consider the box shadow case. Firefox & Chrome don’t need prefixes for shadows, but your SASS mixin would add them anyway.

The ideal case is to omit any prefix. Autoprefixer will parse the CSS code and will add itself only the necessary ones. The sole thing you have to do is to point out which browser versions you support. Consulting the caniuse database, Autoprefixer will take care of the rest.

How is that possible? Earlier I said that PostCSS does nothing without plugins. I lied. It certainly does one thing, which is to transform your CSS code to Abstract Syntax Tree (AST). A JSON-like data presentation, which every plugin will parse and modify. When everything is said and done, the output is stringified and ready for production.

You might wish to play around this example to get a better grasp of the whole AST transformation.