Fixes #894 - added a CSS Linter

[magsout]

A start for adding a CSS linter.

I don"t lint our css file yet. Because I think we need to talk before @zoepage @miketaylr @karlcow about thoses rules.

I suggest to go to https://maximgatilin.github.io/stylelint-config/ and you tried to create your own configuration. It takes around 5 minutes (about 42 rules) to see if at first we are agree or not.

After we can discuss to enhance this rules and fix all error.

[miketaylr]

Very cool idea (also cool config builder!)

I don't have super strong feelings about most of this, but here's what I picked:

{
    "extends": "stylelint-config-standard",
    "rules": {
        "indentation": 2,
        "string-quotes": "double",
        "no-duplicate-selectors": true,
        "color-hex-case": "lower",
        "color-hex-length": "short",
        "selector-combinator-space-after": "always",
        "selector-attribute-quotes": "always",
        "selector-attribute-operator-space-before": "never",
        "selector-attribute-operator-space-after": "never",
        "selector-attribute-brackets-space-inside": "never",
        "declaration-block-trailing-semicolon": "always",
        "declaration-colon-space-before": "never",
        "declaration-colon-space-after": "always",
        "property-no-vendor-prefix": true,
        "value-no-vendor-prefix": true,
        "font-family-name-quotes": "always-unless-keyword",
        "comment-empty-line-before": "always",
        "at-rule-no-vendor-prefix": true,
        "rule-empty-line-before": "always-multi-line",
        "selector-pseudo-element-colon-notation": "double",
        "selector-pseudo-class-parentheses-space-inside": "never",
        "selector-no-vendor-prefix": true,
        "selector-no-universal": true,
        "media-feature-range-operator-space-before": "always",
        "media-feature-range-operator-space-after": "always",
        "media-feature-name-no-vendor-prefix": true,
        "media-feature-colon-space-before": "always",
        "media-feature-colon-space-after": "always"
    }
}

[zoepage]

That's a great idea! :)
I'd love to add 1-2 comments, but my kid is sick. I hope, its ok if it takes 2-3 days. :/

[magsout]

@zoepage yeah, don't worry ❤️

[zoepage]

Regarding the npm scripts:

"lint": "npm run lintJS && npm run lintCSS",
"lintJS": "eslint ./Gruntfile.js ./tests ./grunt-tasks ./webcompat/static/js/lib && grunt travis-lint",
"lintCSS": "stylelint ./webcompat/static/css/development/**/*.css",
"fix": "npm run fixJS && npm run fixCSS",
"fixJS": "eslint --fix ./Gruntfile.js ./tests ./grunt-tasks ./webcompat/static/js/lib",
"fixCSS": "stylelint ./webcompat/static/css/development/**/*.css --fix",

I'd suggest to change the naming convention here a little bit, so it should be easier to keep the overview.

"lint": "npm run lint:JS && npm run lint:CSS",
"lint:JS": "eslint ./Gruntfile.js ./tests ./grunt-tasks ./webcompat/static/js/lib && grunt travis-lint",
"lint:CSS": "stylelint ./webcompat/static/css/development/**/*.css",
"fix": "npm run fix:JS && npm run fix:CSS",
"fix:JS": "eslint --fix ./Gruntfile.js ./tests ./grunt-tasks ./webcompat/static/js/lib",
"fix:CSS": "stylelint ./webcompat/static/css/development/**/*.css --fix",

The : is treated as part of the string, which just provides little bit more structure here.

CSS style

I'd love to add selector-no-qualifying-type with an excluding option for ignoring type for input.
https://stylelint.io/user-guide/rules/selector-no-qualifying-type/

"media-feature-colon-space-before": "always", I'd appreciate false here, but not set to it. :)

Otherwise I second @miketaylr 's suggestion.

Thanks @magsout for the idea and work :)

[zoepage]

#1509 (comment)

[karlcow]

I'd love to add selector-no-qualifying-type with an excluding option for ignoring type for input.
https://stylelint.io/user-guide/rules/selector-no-qualifying-type/

if I understand the docs it means:

"selector-no-qualifying-type":  [ true, {"ignore": "attribute"} ],
"media-feature-colon-space-before": "never"

so many rules…

we could probably add

• "declaration-block-no-duplicate-properties": true
• "no-eol-whitespace": true

[zoepage]

if I understand the docs it means:

"selector-no-qualifying-type":  [ true, {"ignore": "attribute"} ],
"media-feature-colon-space-before": "never"

Yes. Thanks for making that clear @karlcow

we could probably add
"declaration-block-no-duplicate-properties": true
"no-eol-whitespace": true

I agree.

[magsout]

@zoepage

The : is treated as part of the string, which just provides little bit more structure here.

good idea, much better 👍

[magsout]

@zoepage @karlcow @miketaylr I added your suggestions.

I proposed to fix all CSS and try to see if everything is ok..

[miketaylr]

Let's go for it @magsout. Also, once that's done we should probably add a "Linting" section to https://github.com/webcompat/webcompat.com/blob/master/docs/pr-coding-guidelines.md (that can be in a follow up bug).

[magsout]

ok, ouch, done..

[magsout]

@zoepage

4 commits:

1. Add stylelint configuration
2. Updated documentation
3. lint all css-'s files
4. updated lint-staged

[zoepage]

@magsout SWEET! <3

Is there a reason for the linter not to check the prism.css in vendor? :)

[magsout]

@zoepage I think it's not our script, so we don't have to lint it, IMHO.

[zoepage]

Tests fail, but not because of any changes made. So, I'll merge :)

Good job @magsout :)