At the heart of writing any custom syntax is the ability to parse content—it doesn't matter whether this is CSS, JavaScript, or something else; we clearly need to understand what we're working with, before we can make changes! At a basic level, these are the steps we must take to transform our CSS when working with PostCSS:

We begin with our source CSS (which comes with or without a source map), which we parse only once, but then put through any number of specified plugins (the example shows two, but we can easily use more). We then convert the output to a string using a stringifier; at this point, we can view the contents on screen or save them to disk.

Let's for a moment take a look at parsing some example code. For this next example, we will use a single CSS rule and parse it using the postcss-value-parser plugin (from https://github.com/TrySound/postcss-value-parser); the reason for this will become clear shortly: