chacadwa.com

Technical blog and writings by Micah Webner.

Setting up stylelint for Drupal on CentOS

screenshot demonstrating the output of stylelint

stylelint is a great tool for reviewing CSS files to find errors and enforce conventions in your styles. This post provides a quick guide to and using stylelint on CentOS Linux.

In order to make sure you have the latest versions of everything, I recommend installing both Node.js and stylelint as an unprivileged user into your home directory.

Installation

Install Node.js by downloading the latest Linux binaries from https://nodejs.org/en/download/ and unpacking into your ${HOME}/src directory.

Update PATH in your .bash_profile and log out and back in to register the changes.

PATH="${HOME}/bin:${HOME}/src/node-v12.18.3-linux-x64/bin:${PATH}" export PATH

Install stylelint and its dependencies globally using npm install:

npm install -g --save-dev stylelint stylelint-config-standard stylelint-order

Create a .stylelintrc file and place it in your home directory, or in your Drupal project. (Wherever you run stylelint, it will walk up the tree until it finds this file, or you can specify a path with the --config option.)

HFC's .stylelintrc file was created specifically to follow Drupal CSS formatting guidelines.

Usage example

Using stylelint is pretty easy. Simply run the command and specify the files to check. (There are lots of complication options, but the basics will get you started.)

The following screenshot shows a scan I ran on one of our older Drupal 7 themes.

Screenshot of a stylelint scan showing fixes needed.

Running stylelint with the --fix options was able to fix most of the errors encountered.

Screenshot of a stylelint running an automatic fix.

After running this fix, stylelint shows the remaining errors. I fixed most of these manually, but some of the warnings in normalize.css were for old browser hacks, and I didn't have time to mess with those right now. If you'd like to see an example of the changes this produced, you can view the details of the commit here.

Topics: