Command line interface
CSS Lint can be run on the command line so you can incorporate it into your build system. There are two CLIs currently available: one for Node.js and one for Rhino. The functionality of the CLI utilities are exactly the same, the only difference is the JavaScript engine used.
To run CSS Lint on Node.js, you must have npm installed. If npm is not installed, follow the instructions here: http://npmjs.org/
Once npm is installed, run the following
npm install -g csslint
This installs the CSS Lint CLI from the npm repository. To run CSS Lint, use the following format:
csslint [options] [file|dir]*
Such as:
csslint file1.css file2.css
To run on Rhino, first download the Rhino JAR file from http://www.mozilla.org/rhino/. The recommended minimum version number is 1.6.
Next, download the latest csslint-rhino.js file from https://github.com/CSSLint/csslint/tree/master/dist
To run CSS Lint, use the following format:
java -jar js.jar csslint-rhino.js [options] [file|dir]*
Such as:
java -jar js.jar csslint-rhino.js file1.css file2.css
It's recommended to create a shell script to wrap the CSS Lint functionality so you can use the same syntax as the Node.js CLI.
For Windows, create a file named csslint.bat and add the following to the file:
@echo off
java -jar js.jar csslint-rhino.js %*
For Linux/Mac, create a file named csslint and add the following to the file:
#!/bin/bash
java -jar js.jar csslint-rhino.js "$@"
After creating the file, you need to ensure it can be executed, so go to the command line and type:
chmod +x csslint
For all systems, you need to make sure that the shell script exists in the same directory as the Rhino JAR file and the csslint-rhino.js file, otherwise you'll need to change the files according to where those are located.
Once these steps are complete, you should be able to execute CSS Lint by using the same format as the Node.js CLI.
The command line utility has several options. You can view the options by running csslint --help.
Usage: csslint [options]* [file|dir]*
Global Options
--help Displays this information.
--format=<format> Indicate which format to use for output.
--list-rules Outputs all of the rules available.
--quiet Only output when errors are present.
--errors=<rule[,rule]+> Indicate which rules to include as errors.
--warnings=<rule[,rule]+> Indicate which rules to include as warnings.
--ignore=<rule,[,rule]+> Indicate which rules to ignore completely.
--exclude-list=<file|dir[,file|dir]+> Indicate which files/directories to exclude from being linted.
--version Outputs the current version number.
This option outputs the help menu, displaying all of the available options. When --help is entered, all other flags are ignored.
This options specifies the output format for the console. There are several formats to choose from:
-
text- the default format -
compact- a more condensed output where each warning takes only one line of output -
lint-xml- an XML format that can be consumed by other utilities -
csslint-xml- same aslint-xmlexcept the document element is<csslint> -
checkstyle-xml- a format appropriate for consumption by Checkstyle -
junit-xml- a format most ci servers can parse
For example:
csslint --format=lint-xml test.css
When specified, the given format is output to the console. If you'd like to save that output into a file, you can do so on the command line like so:
csslint --format=lint-xml test.css > results.xml
This saves the output into the results.xml file.
This option outputs each rule that is available including its ID and a short description.
Normally, CSS Lint outputs information about every file that is checked regardless of problems. This option instructs CSS Lint to only output information to the console when errors are present. Otherwise, nothing is output.
This option allows you to specify which rules to run as errors, resulting in a non-zero exit code. The rules are represented as a comma-delimited list of rule IDs, such as:
csslint --errors=box-model,ids test.css
This command runs the box-model and id rules on the file test.css. The rule IDs are found in the rules documentation. You can specify as many rules as you like using this option.
When both --warnings and --errors are omitted, all rules are executed.
This option allows you to specify which rules to run as warnings. The rules are represented as a comma-delimited list of rule IDs, such as:
csslint --warnings=box-model,ids test.css
This command runs the box-model and id rules on the file test.css. The rule IDs are found in the rules documentation. You can specify as many rules as you like using this option.
When both --warnings and --errors are omitted, all rules are executed.
This option allows you to specify which rules to turnoff. The rules are represented as a comma-delimited list of rule IDs, such as:
csslint --ignore=box-model,ids test.css
This command turns off the box-model and id rules for the file test.css. The rule IDs are found in the rules documentation. You can specify as many rules as you like using this option.
This option specifies the files and directories to ignore. You can specify more than one file or directory using a comma, such as:
--exclude-list=style.css,extras/
This option outputs the version of CSS Lint that is being used.
You can also specify any of the command line configuration options in a .csslintrc file. The CSS Lint CLI always checks the current working directory to see if there is a .csslintrc file present. If so, options are first read from the file and then read from the command line, so the command line arguments will override anything that's in the file.
{
"ignore": [
"adjoining-classes"
],
"warnings": [
],
"errors": [
]
}
If no .csslintrc file is present in the current working directory, then only the command line arguments are used.
If you want your CSS to always follow a certain set of rules, you can also embed the rule information directly in the CSS. The information is contained within a CSS comment and should be at the top of the file. Within the comment, you can specify a comma delimited list of rules and how they should apply. The rule is set to true to cause an error or false to ignore. If you want to use the default settings, and simply omit the rule completely. Here's a basic example:
/*csslint empty-rules: false, important: true*/
.button {}This code tells CSS lint to ignore the empty-rules rule and to classify the important rule as an error. All of the other rules will be applied using the information provided by the command line.
The comment formatting must must start in the manner shown (eg /*csslint ... */, no spaces between the opening comment marker) in order to be valid.