Csslint – quick command-line tutorial and how to use it for pre-deployment sanity check

Csslint can be used to check the syntax of a css file. This can be used in release/deployment scripts to check the syntax of css before doing rsync/scp. Here are some useful csslint commands.

Files used in this tutorial

.foo {
  background-color: red;
}

.foo {
  background-color red;
}

Check css syntaxt of a file

Running csslint on a correct css file

#!/bin/bash
csslint correct.css
echo "status code=$?"

csslint: No errors in correct.css.
status code=0

Running csslint on an incorrect css file

#!/bin/bash
csslint incorrect.css
echo "status code=$?"

csslint: There are 2 problems in incorrect.css.

incorrect.css
1: warning at line 1, col 1
Rule is empty.
.foo {

incorrect.css
2: error at line 2, col 20
Expected COLON at line 2, col 20.
  background-color red;
status code=1

Running csslint on files in a directory

All files in dir

$ csslint dir1

To ignore some files

$ csslint --exclude-list=./dir1/incorrect.css dir1

Using csslint in deployment script

csslint return shell status code 0 ($?) is everything is correct otherwise non 0 code. It can be used in deployment scripts to exit in case there is any css lint error.

csslint file1.css
if [ $? != 0 ] ; then
  echo "Csslint failed. existing..."
  exit
fi
## do regular deployment
...

You can sleo set -e flag in bash which causes the script to exit whenever there is an error.

## Will cause script to exit on any error
set -e
csslint file1.css
## do regular deployment
...