Search code examples
cssgruntjscsslintjs-beautify

CSS - linter vs. beautifier inconsistency

I am using grunt-jsbeautifier to pretty-print a .css file, and grunt-contrib-csslint to check the .css file for problems. Unfortunately the beautifier seems to produce CSS which violates a linter rule.

If I have this CSS:

.half_circle_style a:nth-child(2) {}

...then grunt-contrib-csslint reports "Done, without errors".

If I run the CSS through grunt-jsbeautifier, a space gets added before nth-child:

.half_circle_style a: nth-child(2) {}

... which causes grunt-contrib-csslint to report:

[L1:C23]
>> Expected LBRACE at line 1, col 23. This rule looks for recoverable syntax errors. (errors)
[L1:C23]
>> Unexpected token 'nth-child(' at line 1, col 23. This rule looks for recoverable syntax errors. (errors)
[L1:C33]
>> Unexpected token '2' at line 1, col 33. This rule looks for recoverable syntax errors. (errors)
[L1:C34]
>> Unexpected token ')' at line 1, col 34. This rule looks for recoverable syntax errors. (errors)
[L1:C36]
>> Unexpected token '{' at line 1, col 36. This rule looks for recoverable syntax errors. (errors)
[L1:C37]
>> Unexpected token '}' at line 1, col 37. This rule looks for recoverable syntax errors. (errors)

I'm not a CSS expert, so I'm looking for an expert opinion, please - is grunt-jsbeautifier pretty printing badly, or is grunt-contrib-csslint being overly-strict?

Solution

  • In this instance I don't believe grunt-contrib-csslint is being overly strict.

    .half_circle_style a:nth-child(2) {}

    is valid CSS syntax, whereas

    .half_circle_style a: nth-child(2) {}

    (with a space before nth-child) is not valid CSS syntax.

    Could the issue be because you are running your CSS through a JavaScript beautifying engine as opposed to a CSS one? Maybe you could try running your code through http://cssbeautify.com/