DEV Community

itzsrikanth
itzsrikanth

Posted on

2 2

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);
}
Enter fullscreen mode Exit fullscreen mode

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)
;
}
Enter fullscreen mode Exit fullscreen mode

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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay