Entity view (Content)

Using PostCSS in Drupal 8 Theming Workflow

By azvonkov
Aug. 11, 2016

What is PostCSS

PostCSS is a method to use JavaScript for CSS processing. It can be set up as a workflow tool (post/pre) processor that will transform and act as a CSS language extender. PostCSS's API can be used with a vast ecosystem of plugins (200+). You might not be aware, but you are most likely already using PostCSS when using the Autoprefixer in your Sass workflow.

PostCSS isn’t necessarily a replacement for Sass or LESS. You can still use your favorite preprocessor and use PostCSS plugins alongside your established workflow, although using them together might complicate things rather than simplify them.

Why PostCSS

The main benefit of Post CSS is that it is modularly. At its core PostCSS uses single responsibility principle - do one thing and do it well. Because PostCSS is very modular you are free to choose what you really need to use in your project's workflow. Modular approach means more lightweight and therefore faster processing.

Another advantage of PostCSS is its speed. It might not be as noticeable in compiling of a smaller project, but it is still a much faster set up.


PostCSS:   40 ms
libsass:   77 ms  (1.9 times slower)
Rework:    87 ms  (2.2 times slower)
Less:      159 ms (4.0 times slower)
Stylus:    224 ms (5.7 times slower)
Stylecow:  232 ms (5.9 times slower)
Ruby Sass: 872 ms (22.0 times slower)

https://github.com/postcss/benchmark

PostCSS plugins that can be used in a Drupal 8 theming workflow today

Below is a small selection of PostCSS plugins that you can incorporate into your Drupal 8 theming workflow today.

For more options check out these plugins and postcss.parts for over 200+ currently available plugins.

 

Stylelint

Working on large teams and large codebases requires good coding standards. Everyone likes clean code and consistency. Stylelint is a PostCSS plugin that can help enforce clean, consistent css rules.

Example Stylelint Config:


var stylelintConfig = {
    "rules": {
        "block-no-empty": true,
        "indentation": 2,
        "color-no-invalid-hex": true
         ...
         ...

    }
};

There are over 100 Styleint rules to choose from. See configuration options here

An example of the Styleint set up with Gulp:


var postcss = require('gulp-postcss');
var reporter = require('postcss-reporter');
var stylelint = require('stylelint');
var scss = require("postcss-scss");

gulp.task('lint:css', function() {
    return gulp.src('src/**/*.scss')
        .pipe(postcss(
            [
                stylelint({ /* options */ }),
                reporter({ clearMessages: true })
            ],
            {
                syntax: scss
            }
        ));
});

Using Future Syntaxes With CSSNext PostCSS Plugin

With CSSNext you can use tomorrow’s CSS syntax, today and you don’t need to wait for browser support. Here is an example of using CSSNext with postcss-cssnext plugin.


// CSS Input

:root { 
  --red: #d33;
}
a { 
  &:hover {
    color: color(var(--red) a(54%));
  }
}


// CSS Output

a:hover { 
  color: #dd3333;
  color: rgba(221, 51, 51, 0.54);
}

Some Additional PostCSS Plugins That Might be Useful in Your Project Set Up

  • Cssnano modular CSS minifier
  • Style Guide PostCSS plugin to generate a style guide automatically
  • Postcss pxtorem Convert pixel units to rem (root em) units using PostCSS

Again, because of PostCSS modularity you have a choice to only use parts / plugins that you really need. Additionally, because PostCSS acts as an API you can create your own custom plugins. These can be very specific to your workflow and project needs. Check out this PostCSS plugin boilerplate to get started.

Incorporating PostCSS into your Drupal 8 Theming Workflow

Incorporating PostCSS into your workflow is not necessarily Drupal specific but can be easily achieved in a Drupal 8 theme. In one of my previous posts I have a Demo of a Drupal 8 Theme created with LibSass & Gulp. Incorporating PostCSS plugins here would be a matter of fetching a few additional node packages and updating the gulp file.

Here are a few thing you would need to get started with PostCSS

  • Node.js / NPM
  • Gulp / Grunt / Webpack or whatever task runner you prefer
  • Add PostCSS packages with npm install package_name --save-dev

An example Gulp pipeline would look like this:


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))
});

Additional Resources

In Conclusion

PostCSS is a very a powerful and fast tool that can be customized to suite your project needs. It can either replace your preprocessor setup or used alongside with it. With a large ecosystem of plugins (200+) it is very modular and extendable.

Post Tags: