Transitioning to using PostCSS plugins

We've seen that adapting code to use nesting is a simple principle, but the real art is getting the balance right, many developers fall into the trap of nesting everything in their code when using the technique for the first time.

With this in mind, let's explore how we can convert our code to using PostCSS. We'll start by installing the postcss-nesting plugin, which will perform most of the work for us:

1. Fire up a Node.js command prompt, then change the working directory to our project area.
2. At the command prompt, enter the following command, then press Enter:

   npm install --save-dev postcss-nesting
   

3. Node.js will go away and install the plugin—it is ready for use when we see something akin to this screenshot:
   
4. With the plugin installed, we need to configure PostCSS to use it—open up a copy of gulpfile.js from the project area, ready for editing.
5. We need to make a few changes—the first is to assign a variable that references the plugin. Add the highlighted line in immediately below the last variable statement:

   var cssnano = require('cssnano');
   var nesting = require('postcss-nesting');

6. The autoprefixer task needs to be altered—this time around, we will start with compiling our nested code and adding the appropriate vendor prefixes. Alter the first line of this task, as indicated:

   gulp.task('autoprefixer', function() {
           return gulp.src('src/*.css')

7. Next, add in the nesting configuration call:

        .pipe(postcss([ autoprefixer, nesting({ /* options */ }) ]))

8. SASS normally compresses any code on compilation by default—as we're no longer using it, we need to provide an alternative. For this, we will reuse the cssnano plugin from Chapter 2, Creating Variables and Mixins. Go ahead and add this at line 20:

   .pipe(postcss([ cssnano() ]))

9. The lint-styles task should then run once the vendor prefixes have been added; to make this happen, add the constraint as shown:

   gulp.task("lint-styles", ['autoprefixer'], function() {

10. We no longer have any need for the sass task, so go ahead and remove it in its entirety, and from the default task entry—we should be left with this:

    gulp.task('default', ['lint-styles', 'autoprefixer', 'rename']);

11. Last, but by no means least, go ahead and switch the order of the rename task. Instead of running it immediately after the autoprefixer task, we'll run it once the lint-styles task has been completed:

    gulp.task('rename', ['lint-styles'], function () {

At this stage, our gulp task file is now ready for use. We can begin to convert our style sheet to use PostCSS nesting as a replacement for SASS. Let's make a start on converting it, as part of the next exercise.

Note

If you get stuck, there is a completed version of gulpfile.js in the code download that accompanies this book—simply extract a copy and place it in the root of our project area to use it.

Converting our demo to PostCSS

Altering our code to use PostCSS is very simple. Even if it requires a few changes, the format does not change significantly when compared to processors such as SASS; let's take a look at what is involved:

1. We'll begin by opening a copy of style.scss from the Tutorial6A folder in the code download that accompanies this book—save it to the src folder of our project area. Rename it to style.css.
2. On line 19, add @nest immediately before &:, as indicated—this is required to allow the postcss-nesting plugin to correctly compile each nesting statement:

   @nest &:before, &:after {

3. On line 53, add @nest & immediately before h2, as shown:

   @nest & h2 {

4. On line 61, add @nest immediately before &., as shown:

   @nest &.page1 {

   Repeat step 4 for lines 65, 69 and 73.

5. On line 119, add @nest immediately before &., as shown:

   @nest &.invisible {

6. On line 123, add @nest immediately before ul, as shown:

   @nest & ul {

7. On line 125, add @nest immediately before & li, as shown:

   @nest & li {

8. On line 136, add @nest immediately before &., as shown:

   @nest &:after {

   Repeat the same process for lines 150 and 155.

9. On lines 179, add @nest immediately before &., as shown:

   @nest &.up {

   Repeat the same process for lines 183 and 187, then save the file.

Our style sheet is now converted; to prove it works, we need to run it through PostCSS, so let's do that now as part of the next exercise.

Compiling our code

With the changes made to our code, we need to compile it—let's go ahead and do that now, using the same process we saw back in Chapter 2, Creating Variables and Mixins:

1. Fire up a Node.js command prompt session, or use the one from earlier if you still have it open, and change the working folder to the project area.
2. At the prompt, enter this command, then press Enter:

   gulp
   

3. If all is well, we should see something akin to this screenshot:
   
4. A quick peek in the dest folder of our project area should reveal the relevant compiled CSS and source map files, produced by PostCSS.
5. At this point, we need to extract a copy of the Tutorial7 folder from the code download that accompanies this book—save this to our project area.
6. Copy the contents of the dest folder from our project area to the css folder under Tutorial7—if all is well, our demo should continue to work, but without the dependency of SASS.

   Note

   Note, make sure you expand the demo to the full width of the screen to view it properly!

Try previewing the results in a browser—if all is well, we should see the same results appear as before, but this time using PostCSS, and without the dependency on SASS. We can now apply the same techniques to any project, safe in the knowledge that using the postcss-nesting plugin will allow us to compile to valid CSS code—or will it?