Extending our processor further

Over the last few pages, we've explored a number of ways to improve our existing processor, as well as a few ideas for extending functionality. Although we can always keep to PostCSS plugins, we run the risk of limiting the "art of the possible", or what is available for us to use.

Sometimes, we might want to go a little further afield—creating a processor isn't just about the nitty-gritty of compiling code, but also about our working environment and the processes required to support it (at least in part). To prove this, we're going to explore installing the postcss-stats plugin as an example of how we can extend both our plugin and working environment.

This plugin helps provide useful statistics about each project as it is compiled—it's based on the CSS Stats system, and is available online at http://www.cssstats.com.

Note

Throughout the demo, you may see a few issues with deprecated warnings—at the time of writing, the plugin needs a little polishing/updating. Don't worry though: the plugin will still work fine for the purposes of our demo.

The source for this plugin is available on GitHub at https://github.com/cssstats/postcss-cssstats, and can be installed using the usual route. Let's dive in and take a look:

We'll start by firing up a Node.js command prompt session, then changing the working directory to the root of our project area.
We need to install the plugin, so in the prompt, enter this command and press Enter:
```
npm install postcss-cssstats --save-dev 
```

Keep this open—we will need it later in the exercise.

Next, we need to update our gulpfile.js and package.json files—go ahead and extract copies of both files from the T54 - using cssstats folder in the code download that accompanies this book. Save both files to the root of our project area:

With our files in place, we can now test that it works—go ahead and save a copy of style.css from the same folder into the src folder of our project area.
Revert to the Node.js command prompt we had open earlier—in the prompt, enter gulp, and press Enter.
PostCSS will compile our code—if all is well, we should see files appear in the now familiar dest folder…and we should also see something akin to this screenshot:

If I were a betting man (I'm not, but assume I am for this)—I would bet even odds that you're probably thinking "What on earth does all of that text mean?" Well, let me shed some light on what it all means.

In a nutshell, we've installed what is effectively a reporting system—this details a bunch of statistics about our code. It contains details about all kinds of information, including the number of selectors, colors, the level of CSS specificity, declarations, and so on. It's an easy way to get information about our code, as a means of documenting it for later use. The reason it is so easy to get the information lies in how it is configured—take a look at the gulpfile.js file; we will add a call to the plugin at the top:

var reporter = require('postcss-reporter');

We can then modify the styles single task, by adding this line near the end:

    .pipe(postcss([ cssstats( function(stats) {
      console.log(stats);
    })
  ]))
  .pipe(gulp.dest('dest/'));
})

The trouble is, whilst it might be easy to get the information, it's not so easy to store it! We can absolutely improve on it; instead of getting the information via our processor, we can go directly to the source. Let's explore how to make this happen:

We'll start by firing up a Node.js command prompt, then changing the working folder to the root of our project area.
At the prompt, go ahead and enter npm install gulp-stylestats --save-dev, then press Enter.
We now need to edit the gulpfile.js and package.json files we used in the previous exercise, so open the gulpfile.js file in a text editor, and add these lines immediately below the closing bracket of the sourcemap task:
```
gulp.task('stylestats', ['minifyCSS'], function () {
  gulp.src('dest/*.css')
    .pipe(stylestats({
      type: 'json',
      outfile: true
    }))
    .pipe(gulp.dest('dest/'));
});
```

Next, we need to update the default task—alter it as indicated:

gulp.task('default', ['styles', 'lint', 'rename',
 'minifyCSS', 'sourcemap', 'stylestats']);

Revert to the Node.js command prompt, then enter gulp and press Enter—assuming we still have the same style.css file in the src folder, we should see this appear in the dest folder at the root of our project area:
Whilst we clearly need to alter the parameters of our Gulp file to prevent it producing minified JSON files, we can at least see the result of the (uncompressed) JSON file. Go ahead and open it up—it will look something like this:

Although we're still only seeing code, we can now parse the content at will; we could, for instance, use jQuery to explore the contents and render it on screen using an appropriate style and format. I am sure you will agree though that this is a much easier way to view (and store) the information! The plugin needs minimal configuration to get started. We can use it to view any standard CSS file, once it has been through the compilation process.

Tip

There are a number of options we can use with the gulp-stylestats plugin—for details, take a look at https://github.com/t32k/stylestats.

Right, we now have a completed processor; hopefully, this will also include a style guide that is running, using one of the plugins we've just discussed in the previous exercise. It's time we moved on—there is one task we should complete, though, before we embark on the next stage of our journey. It's time we put our processor to the test…

Previous Chapter

Adding reload capabilities

Next Chapter

Testing the final pre-processor

Table of Contents for Mastering PostCSS for Web Design

Extending our processor further

Note

Tip

Table of Contents for
Mastering PostCSS for Web Design