Cast your mind back to Chapter 10, Building a Custom Processor, for a moment.

The key theme of that chapter was bringing together a number of plugins we covered throughout the preceding chapters, to create what would become our processor. So far, all of the plugins used were based around pure PostCSS, so they wouldn't be able to compile raw SASS code.

We took a brief look at the CSStyle library, as a possible means of getting around this—it's a great library for producing clean code using BEM principles, but it requires that code is written using a specific format. Ordinarily, there is nothing wrong with this at all—every developer's utopia should be to produce clean, efficient code, right?

Yet there is just one small problem, reality! It wouldn't be practical to rewrite a large, complex e-commerce site to use CSStyle without an enormous amount of work; it would require a lengthy transition period to effect such a change. It's not impossible, but using BEM-style notation is better done from ground up, or at least in defined chunks, if your site has multiple style sheets in use.

So if using CSStyle isn't a practical solution for our needs, how can we make that change? There is a more practical solution available to us—it may take longer, but the disruption should be reduced, and allow us to make smaller changes to our code in a more manageable transition process:

The latter step in this process should be iterative, at least until everything has been converted, and allows us to remove any dependency on existing processors. We've used a fair number of Gulp task files to date, so we should be reasonably familiar with the basic use of one by now—here's what a task file might look like, if we were using SASS and Gulp:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');
 
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
 
gulp.task('css', function () {
  var processors = [ autoprefixer, cssnano ];
  return gulp.src('./src/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});

In this example, we're using the Gulp plugins for SASS and PostCSS—SASS code is compiled first, before vendor prefixes are added by PostCSS, and the code is minified into the final article.

The benefits of this process, though, mean that we can control the rate of conversion—we are not forced to have to convert everything in one go, and can be selective about what is converted at each point in the process. There will still be a dependency on an external library, but this is temporary; we can remove that dependency when everything has been converted to using PostCSS.