POSTCSS

PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations.

The development of CSS, like all languages, is an iterative process. With every major release, we get new features and syntaxes that help us write our styles.

CSS Level 3 introduced features that enable us to design interactions that previously were possible only with JavaScript. With every new day, tools emerge to make styling easier and more flexible. One of the relatively recent tools introduced for styling is PostCSS. PostCSS aims to reinvent CSS with an ecosystem of custom plugins and tools.

Working with the same principles of preprocessors such as Sass and LESS, it transforms extended syntaxes and features into modern, browser-friendly CSS.

To provide helpful debugging, source maps are generated, and an abstract syntax tree (AST) exists to help us understand where and how code is being transformed.

Because PostCSS uses the Node.js framework, the abilities of the language and tools can be easily modified and customized as needed. Other tools such as Sass and LESS limit the abilities of the system to the methods available when the compiler was written.

BENEFITS

PostCSS moves all of the code needed to create functions, utilities and mixins out of our production style sheets and wraps them as plugins. Now, for each project, we can pick and choose the tools needed by including plugins in our task runner.

Maintaining a library of Sass or LESS snippets can be an overwhelming task and can leave a project bloated. Many projects have unused mixins and functions, included as “just in case” code. PostCSS enables easily installable, plug-and-play modules, making the development process more flexible for the unique needs of a project.

Because PostCSS is written in JavaScript, we can use task runners like Gulp and Grunt to transform the CSS in our projects. The tutorial below demonstrates how to incorporate PostCSS in your workflow via either Gulp or Grunt. Using one tool over the other is not crucial and is simply a matter of personal preference or what’s best for the project.

Note: A complete version of both the Gulp and Grunt versions of the tool is available on GitHub. Feel free to use it as a starter template and to expand on it as needed.

SETTING UP POSTCSS WITH GULP

In your project’s Gulpfile.js, we need to require our installed PostCSS module and then use it within a task. Be sure to update the paths to your development files and the directory where the transformed output will go.

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

       gulp.task('styles', function () {
       return gulp.src('path/to/dev/style.css')
      .pipe(postcss([]))
      .pipe(gulp.dest(path/to/prod))
      });
      

To install the PostCSS module in your project, run the following command in the terminal: npm i grunt-postcss -D.

Once the plugin is installed on your system, enable it within the Gruntfile and create a task, as below. Be sure to update the cwd and dest values to reflect the structure of your app.

        module.exports = function(grunt) {
        grunt.initConfig({
       pkg: grunt.file.readJSON('package.json'),
       styles: {
          options: {
           processors: []
        },
         dist: {
         files: [{
         expand: true,
         cwd: 'dev/',
         src: ['**/*.css'],
         dest: 'prod/'
    }]
  }
}
     });

     // Load post-css.
      grunt.loadNpmTasks('grunt-postcss');

     };
     

POSTCSS PLUGIN INSTALLATION EXAMPLE

          npm i postcss-focus -D
          

The modified code for Grunt, with our newly created processorArray arrays, is below:

      var processorArray = [
require('postcss-plugin')()
      ];

    // Snipped for brevity
     styles: {
  options: {
    processors: processorArray
  },
  dist: {
    src: 'path/to/dev/style.css',
    dest: 'path/to/prod/style.css'
  }
}

Plugins

Once we have installed a plugin and our build tool is prepared to compile our code, we can use PostCSS and the plugin features. The first thing to do is create a file with a .css extension in the directory where we store our development code.

“Wait! A CSS file?” Yup, a CSS file. Because PostCSS transforms our CSS, we don’t need to use a specialized syntax — just traditional CSS. If you are familiar with preprocessors, then it might feel unnatural to leave the .sass, .scss, .styl or .less files behind and return to .css. But, in fact, it’s not converting — it’s transforming.

To process our styles with our newly installed PostCSS plugins, we can run our task runners with grunt styles and gulp styles, respectively. Our development CSS file will be processed through the PostCSS plugin and the plugins provided, and then it will be outputted to our specified production directory.

Below are a few plugins of note that might be of benefit as you get started with PostCSS. Included are instructions on installing and using the plugin.

Here is the development CSS:

   section {
   position: absolute 10px * *;
    }

      .topNav {
       position: fixed 0 * * 0;
     }

       .modal {
        position: fixed 40% 25%;
       }

     section {
     position: absolute;
     top: 10px;
     }

     .topNav {
       position: fixed;
       top: 0;
       left: 0;
        }

      .modal {
       position: fixed;
       top: 40%;
        right: 25%;
        bottom: 40%;
        left: 25%;
        }