An Introduction to PostCSS

Most developers who spend their time working with CSS are familiar with preprocessors such Less, Sass, and Stylus. These tools have become a vital part of the web development ecosystem. Writing styles for a website without using features like nesting, variables, or mixins now seems cumbersome and awkward. Although each of them is a great and extremely useful product, let's take a step back and consider if using preprocessors in such a way is indeed the best approach.

I see a couple of problems with tradition preprocessors:

• They are not extendable. Whichever preprocessor you choose, you are limited to the set of features that it provides. If you need anything on top of that, you’ll need to add it as a separate step in your build process. If you feel like writing your own extension, you’re on your own.
• You can’t leave anything out. Some of the features preprocessors provide such as Sass’s @extend may be detrimental to you, and you might want to leave them out completely. Unfortunately, while you can avoid using them, you can’t remove that part of the tool to minimize code.
• They push out CSS standards. You might say that each of the preprocessors has become a standard of its own. Regrettably, they don’t aim at being compatible with the W3C standards, which means that they cannot be used as polyfills for early testing of the newer W3C standards.

This is where PostCSS comes in.

[author_more]

What is PostCSS?

PostCSS is not a preprocessor per se; it doesn’t transform CSS. As a matter of fact, it doesn’t do much by itself at all. What it does is provide a CSS parser and a framework for creating plugins that can analyse, lint, handle assets, optimise, create fallbacks, and otherwise transform parsed CSS. PostCSS parses CSS into an abstract syntax tree (AST), passes it through a series of plugins, and then concatenates back into a string. If you’re familiar with JavaScript tooling, then you can think of PostCSS as Babel for CSS.

There are currently more than 200 plugins for PostCSS, many of which are listed on the PostCSS GitHub page, while others can be found on the useful PostCSS directory postcss.parts. PostCSS can be integrated in most the build tools including Gulp, Grunt, webpack or npm.

So how does PostCSS tackle the problems we listed earlier?

• Each plugin is installed separately. This means you choose which ones you need and in what order they should be applied. Usually, plugins can be additionally configured using some set of options.
• You can write your own plugins. Each PostCSS plugin receives parsed CSS as an input parameter, analyses or modifies it, and returns it in the same manner. This means that plugins don’t need to handle parsing CSS and converting it back into a string. So the ability to build your own plugins is not as difficult as you might think.
• PostCSS can be used to polyfill real W3C features. There are a lot of plugins that aim to implement features from new W3C specifications. This will enable you to write code that respects standards and is likely to be compatible with future versions of CSS.

Using PostCSS

Theory is great, but let's move on to some juicy practice. Let’s install PostCSS and see what it can actually do. We won’t go into much detail about setting up proper project builds, since that’s a topic that deserves an article of its own. Instead we’ll run PostCSS directly from the command line. You can find more info on using PostCSS with your favourite build tool on its Github page.

Installing PostCSS

PostCSS is installed via node and npm, so make sure you have those installed before you start. To install PostCSS globally on your system run:

[code language="bash"]
npm install -g postcss-cli
[/code]

You can make sure it’s working by running:

[code language="bash"]
postcss --help
[/code]

This will give you a list of parameters that the CLI accepts. You can also find these in the postcss-cli documenation.

Running PostCSS

Now that we have PostCSS installed, let’s give it something to work with. Create a styles.css file in your project folder and add some CSS. For example, define a flexbox container:

Continue reading %An Introduction to PostCSS%

by Pavels Jelisejevs via SitePoint