Styling Drupal 8 Themes With PostCSS Plugins

Front-end developers and engineers are familiar with Less, Sass, or Stylus for their CSS processing needs. CSS as a language is iterative and constantly changing. CSS 3 brought with it a host of changes and interactions previously only possible with JavaScript.

There's a new tool out there to help with CSS magic and it's called PostCSS. Simply put, it's a tool for transforming styles using JavaScript. But it's much more than that. Its modular structure enables front-end developers to create complex workflows. PostCSS is not meant to replace Less or Sass. It can either work alongside those pre-processors or work independently too. You can look at PostCSS as a more powerful Sass.

Some of the Major Benefits of Using POSTCSS are:

1. It is modular and hence, more lightweight.

2. It uses a single responsibility principle at its core, which means you can choose what you actually want to use in your project workflow.

3. It enables faster processing.

4. The compilation of projects, both small and large is speedy.

There are more than 200 PostCSS plugins available for web application development in Drupal. Let’s take a look at the examples outlined below to incorporate a PostCSS plugin into your Drupal 8 theming workflow.

#1 – Stylelint PostCSS Plugin:

While working with large development teams and codebases, you need to first establish good coding standards. Coding standards help in maintaining clean and consistent code. And Stylelint is a PostCSS plugin that enforces a clean and consistent CSS rules.

Stylelint Configurations:

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

Stylelint has over  you can choose from. Here we have covered an example of setting up Stylelint using 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
            }
        ));
});

#2 – CSSNext PostCSS Plugin:

CSSNext is another PostCSS plugin you can use with CSS syntax. With this plugin, you need not wait for the browser support. Below is an example of using CSSNext plugin in Drupal 8:

// 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 of the additional PostCSS plugins you can use in your workflow include CSSnano modular CSS minifier, Style Guide, and PostCSS pxtorem. As mentioned earlier, you can use these plugins or its parts you really need in your workflow.

Using PostCSS Within Your Drupal 8 Theming Workflow

There are a few things you require to get started with PostCSS:

• Node.js or NPM

• Grunt, Gulp, Webpack or whatever task runner you prefer

• Add PostCSS packages using npm install package_name --save-dev

Incorporating PostCSS into your workflow does not necessarily need to be Drupal specific. It is easily accessible in Drupal 8 theme. The only thing that matters is that you need to fetch some additional Node packages and update your Gulp file.

PostCSS is a powerful tool you can easily customize to suit your project requirements. It is modular, extendable and fast. It has a large ecosystem of plugins, you can use to either replace the preprocessor setup or use it alongside. Have you incorporated any PostCSS plugin within your Drupal 8 theming project? Let us know in the comments below.