Build System Integration

CSS Lint fits in well with any existing build or automation scripts.

Ant

It's easy to include CSS Lint as part of your Ant build system. The exact format of the task depends on which command line interface you're using.

Using Rhino

If you're using Rhino as your JavaScript engine, then make sure to download the Rhino version of CSS Lint from Git. Then, place the following target in your build.xml file:

<target name="csslint">       
    <apply executable="java" failonerror="true" parallel="true">
        <fileset dir="${src.dir}" includes="**/*.css" />
        <arg line="-jar"/>
        <arg path="${lib.dir}/js.jar"/>
        <arg path="${lib.dir}/csslint-rhino.js" />      

        <!-- your customized arguments go here -->
        <arg line="${cssfiles.clean} --warnings=box-model,floats --errors=ids,important"/>

        <srcfile/>
    </apply>
</target>

This target assumpts that src.dir is the location of your CSS files and that lib.dir is the location of both the Rhino JAR file (js.jar) as well as the csslint-rhino.js file.

Using Node.js

If you're using the Node.js version of CSS Lint, then ensure you've installed the latest version using npm. Once installed, you can use the following Ant target:

<target name="csslint">       
    <apply executable="csslint" failonerror="true" parallel="true">
        <fileset dir="${src.dir}" includes="**/*.css" />

        <!-- your customized arguments go here -->
        <arg line="${cssfiles.clean} --warnings=box-model,floats --errors=ids,important"/>

        <srcfile/>
    </apply>
</target>

Usage

Once you've created the target name, you can run from the command line via:

ant csslint

Maven

CSS Lint is included as part of the wro4j Maven plugin. You can define a Maven goal for CSS Lint using the following:

<plugins>
    <plugin>
        <groupId>ro.isdc.wro4j</groupId>
        <artifactId>wro4j-maven-plugin</artifactId>
        <version>1.4.1</version>
        <executions>
            <execution>
                <goals>
                    <goal>csslint</goal>
                </goals>
            </execution>
        </executions>
    </plugin>
</plugins>

Read more about wro4j-maven-plugin.

Gradle

It's also easy to use CSS Lint as part of your Gradle build system.

Using Rhino

If you're using Rhino as your JavaScript engine, then make sure to download the Rhino version of CSS Lint from Git. Then, place the following target in your build.gradle file:

configurations {
    // Add Rhino to your existing configurations
    rhino
}

dependencies {
    // Fetches the given version of Rhino if you don't have it already
    rhino 'org.mozilla:rhino:1.7R3'
}

task csslint(dependsOn: 'init', description: 'Runs CSS Lint via Rhino') {
    def input = fileTree(dir: "${srcDir}/css", include: "**/*.css")
    def output = file("${buildDir}/csslint.xml")
    
    // Your customized options go here
    def csslintRules = ['adjoining-classes', 'box-model', 'floats']
    def cmdLineOptions = ["--rules=${csslintRules.join(',')}", "--format=lint-xml"]
    doLast {
        ant.java(jar: configurations.rhino.asPath, fork: true, output: output) {
            arg(value: "${libDir}/csslint-rhino.js")
            cmdLineOptions.each {
                arg(value: it)
            }
            input.files.each {
                arg(value: it.canonicalPath)
            }
        }
    }
}

This task assumes that

• srcDir is the source directory having a css directory containing you're CSS files
• libDir is the location of the csslint-rhino.js file
• buildDir is the directory where you want output to go

Using Node.js

If you're using the Node.js version of CSS Lint, then ensure you've installed the latest version using npm. Once installed, you can use the following Ant target:

task csslint(type: Exec, dependsOn: 'init', description: 'Runs CSS Lint via node.js') {
    // Your customized options go here
    def cmdLineOptions = ["--rules=box-model,floats", "--format=lint-xml"]
    def cssDir = "${srcDir}/css"
    
    commandLine = ["csslint"] + cmdLineOptions + [cssDir]
    standardOutput = new BufferedOutputStream(new FileOutputStream(file("${buildDir}/csslint.xml")))
}

This task assumes that:

• srcDir is the source directory having a css directory containing you're CSS files
• buildDir is the directory where you want output to go

Usage

Once you've created the target name, you can run from the command line via:

gradle csslint

Jenkins

The latest versions of the Violations Plugin allow you to report output using:

• CSS Lint output --format=lint-xml and csslint violations configuration
• OR CSS Lint output --format=checkstyle-xml and checkstyle violations configuration

Rake

If you're using Ruby on Rails and Rake as your build system, you can use the Ruby Package for easier integration.

Grunt

If you're using Grunt v0.3.x as your build system, you can use the Grunt CSS task for easier integration.

If you're using Grunt v0.4.x as your build system, you can use the Grunt Contrib CSSLint task for easier integration.

Compass

If you're using Sass with Compass for CSS preprocessing, you can use the compass-csslint Ruby gem to easily run CSS Lint against your generated CSS.

Git

If you are using Git for source control, overcommit is a fully configurable and extendable Git hook manager that includes out-of-the-box support for running CSS Lint as a Git pre-commit hook. Just include this in your .overcommit.yml file:

PreCommit:
  CssLint:
    enabled: true