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:

Yikes! What does that all mean? Don't worry, it looks worse than it really is; this is an example of an AST, which we discussed earlier in this chapter. This gives us in-depth information on the contents of our CSS, such as the values, types of values, and where they appear in the tree.

The great thing, though, is that once we have all of this content, then we are free to query and manipulate the content at will. Once we have manipulated the content, we then need to convert it to string format, so it can be displayed on screen in a more intelligent format, or saved to disk.

For this demo, we used the postcss-value-parser plugin to create our AST; we can also try using the postcss-safe- parser plugin (from https://github.com/postcss/postcss-safe-parser), or the postcss-selector-parser plugin (from https://github.com/postcss/postcss-selector-parser), to achieve similar effects.

And the reason why we only used one line of CSS code in our demo? Well, parsing CSS code can get very complex. The example shown in our demo is relatively straightforward; just imagine what it will be like with 2,000+ lines of code!

Let's develop this theme further, and use it to replace some example RGBA values with equivalent HEX-based colors. We can easily do this through the use of the postc ss-unrgba plugin (from https://github.com/jonathantneal/postcss-unrgba), but it weighs in at almost 60 lines; our Gulp file is 43 lines, and a lot of that is comments!

Replacing RGBA colors

Our next example is a relatively straightforward search and replace; it is a perfect example of how it isn't always necessary to use plugins, and that we can parse our code directly to achieve the same effect. Let's make a start:

1. We'll start by extracting a copy of the T61 – changing colors folder from the downloaded code that accompanies this book; save the folder to the root of our project area.
2. Copy the gulpfile.js and package.json files from the T61 – changing colors folder to the root of our project area.
3. Copy the src folder from the T61 – changing colors folder to the root of our project area.
4. Next, fire up a NodeJS command prompt session then change the working folder to the root of our project area.
5. We now need to install an additional plugin, color-convert (available from https://github.com/qix-/color-convert), which we will use to change the color once we've sucked out the details from within the AST. For this, go ahead and fire up a NodeJS command prompt, then change the working folder to the root of our project area.
6. At the prompt, enter npm install color-convert --save-dev and press Enter.
7. When the plugin has finished installing, go ahead and enter gulp, then press Enter. If all is well, we should see the, by now, familiar transformed style sheet appear in our destination folder:
   

At this point, our style sheet has been transformed. If we preview the results in a text editor, we can confirm that HEX-equivalent values have indeed replaced the original RGBA colors, as shown in the following screenshot:

Not convinced? Take a look at the same rule within the source file; here it shows the original RGBA value:

See how easy that was? There is one thing note; if we take a look at the Gulp file, it might at first glance look like we still have a few plugins in use. The key here is that three of these are part of Node (fs, path, and util), so we haven't had to install any new ones, over and above the value-parser and color-convert examples.