PostCSS: Architecture overview

I am a big fan of PostCSS and this is my attempt to understand this package to become an active contributor. I am planning to write a series involving architecture, code walk-through for this amazing package and its top plugins.

Before diving into very low level details, reading this architecture is a must. Almost all of the low level detailed info are available in API page with multiple theoretical example, generated from static typing jsDoc. The intention of this series is to provide them in digestible and pragmatic way. For that many references from PostCSS plugins will be drawn. This will get extended by diving deep into the codebase as well. As mentioned in the arch doc, the AST conversion is split into. two parts: tokenization and parsing for performance reasons. Lets get started with the basics:

Everything is a Node here. The statement is too generic but what it means is the CSS is converted into a tree structure. Which means that many tokens in stylesheet are converted into Node to form the hierarchical structure. To illustrate this, lets take an example:

.active {
  transform: scale(1.1);
}

Here, this stylesheet is stored as a series of characters. They are read character by character and converted into tokens. The tokens are then parsed by the parser and converted into the AST structure, which sets the stage for all the plugins to work their magic. So, this is a 2-stage process.

Lets understand the above code structure after tokenization:

.active
{
transform
:
scale(1.1)
;
}

It is converted into 7 tokens. These tokens are consumed by Parser using nextToken() in Tokenizer.