Continuous Integration and CSSLint

[Eric Wendelin]

Looks like someone beat me to adding CSSLint to the Jenkins Violations Plugin :)

https://github.com/jenkinsci/violations-plugin

All you need to do is add --format=lint-xml to your csslint command, output the result to an XML file and then configure Violations to look for the XML file you created.

[Eric Wendelin]

So it turns out that the author of this plugin expected the root element of the lint-xml to be "csslint" and not "lint". This prevents CSSLint from actually working without changing one or the other.

I understand both points of view for this conflict, but really I only care about making this into software that works. That said, I'd like to change the format produced by CSSLint to use "csslint" because I want this feature working for people out-of-the-box and frankly CSSLint is moving faster than Jenkins.

So my question is this: Does anyone care about my submitting this change? If you do care... is this acceptable for you?

Would like to know where the community stands on this relatively trivial thing.

[Nicholas Zakas]

Instead of changing what we already have, I'd be in favor of creating a new format called "csslint-xml" so that we have both.

-N

[Eric Wendelin]

That'll do, thanks Mr. Zakas.

Will add this weekend and submit pull req

[Tim Beadle]

I've successfully got this set up in Jenkins. What I _was_ missing, though, was the ant build task. I adapted one I found for jslint.

You'll need to set these properties to match your setup:

<property name="build.dir" value="./build" />
<property name="source.dir" value="./wwwroot" />

<target name="csslint" description="Run the CSSLint tool on CSS files">
    <fileset dir="${source.dir}" id="cssfiles.raw">
      <include name="**/*.css" />
    </fileset>
    <pathconvert pathsep=" " property="cssfiles.clean" refid="cssfiles.raw" />
    <exec executable="csslint" output="${build.dir}/csslint.xml">
      <arg line="--rules=errors --format=lint-xml ${cssfiles.clean}" />
    </exec>
  </target>

This is using the nodejs version of csslint, installed via npm (Node Package Manager) on Ubuntu Linux. It all seems to work ok, apart from what might be a bug where the Violations graph is empty - you only see the current build, not the graph of violations over time.

Also, fixing some issues and rebuilding didn't make the violations go away - I had to trash the workspace and rebuild.

I hope this is useful to someone!

Regards,

Tim

[Eric Wendelin]

@Tim:

That's a very nice example of how to use CSSLint with ant, thanks. 

I'm not sure why Jenkins is behaving poorly for you. I've had this working well since CSSLint v0.6 without any of the issues you're running into. May I ask what versions of Jenkins and Violations Plugin you're using? Also which version of CSSLint you're running?

I run CSSLint in a Gradle build in a very similar way. I run it via node on Debian Squeeze, installed via npm:

task csslint(type: Exec, dependsOn: 'init', description: 'runs csslint on all relevant CSS files') {

inputs.files fileTree(dir: "${projectDir}/css", include: "**/*.css")

outputs.file file("${buildDir}/csslint.xml")

def csslintRules = ['adjoining-classes', 'box-model', 'display-property', 'grouping',

'empty-rules', 'errors', 'floats', 'font-faces', 'font-sizes', 'gradients', 'important',

'overqualified-elements', 'regex-selectors', 'rules-count', 'vendor-prefix', 'width-100',

'zero-units']

commandLine = ["csslint", "--rules=${csslintRules.join(',')}", "--format=lint-xml", "css"]

standardOutput = new BufferedOutputStream(new FileOutputStream(file("${buildDir}/csslint.xml")))

}

@Nicolas:

Do you think it would be worthwhile to have a wiki with examples of how to use CSSLint in a build?

Cheers,

Eric

[Nicholas Zakas]

@Eric - Yes, I was just thinking that after reading through your email. Do you want to write up a little more info on your Gradle solution? If so, I can include that (I'm not familiar with Gradle, myself).

I can get started with an Ant solution.

-N

[Eric Wendelin]

@Nicolas - Sure thing, will probably get to it this weekend. Please let me know how/where to submit it.

Cheers,
Eric

[Nicholas Zakas]

Feel free to email it to me directly.

-N

[Tim Beadle]

On 15 October 2011 23:04, Eric Wendelin <emwen...@gmail.com> wrote:
> @Tim:
> That's a very nice example of how to use CSSLint with ant, thanks.

No problem! Glad it's useful.

> I'm not sure why Jenkins is behaving poorly for you. I've had this working
> well since CSSLint v0.6 without any of the issues you're running into. May I
> ask what versions of Jenkins and Violations Plugin you're using? Also which
> version of CSSLint you're running?

I'm running Jenkins 1.434 (though I'm about to update to 1.435),
Violations 0.7.10, CSSLint 0.6.1.

Cheers,

Tim

[bloo...@googlemail.com]

Hi,

i write an ant target too, but i have the problem that my output result are always overwriten and not attached. Here my ant target, i hope someone has an idea:

<target name="csslint">       

<apply executable="java" failonerror="false" output="${basedir}/build/reports/csslintresults.xml">

<fileset dir="${basedir}/src" includes="**/*.css" />

<arg line="-jar"/>

<arg path="${basedir}/build/csslint/lib/js.jar"/>

<arg path="${basedir}/build/csslint/lib/csslint-rhino.js" /> 

<arg line="--format=lint-xml"/>

<srcfile/>

</apply>

</target>