Add postcss linting for SCSS based on Primer Stylelint Config

[tricinel]

Using grunt lint, we are now linting the SCSS code using postcss and a SCSS postcss processor. The linter configuration is based on Github's Primer Stylelint Config, available: https://github.com/primer/stylelint-config-primer

fixes #26

[matejlatin]

Nice, I'll try it out later, before I merge. I noticed you didn't add the linting task to the watch task, like most of them are. Does it make more sense to keep it as a separate task or include it in the watch task so it would run every time a change is made?

[tricinel]

The reason why I didn't put it in the watch is because it currently generates a lot of warnings, so I'd be polluting the terminal with output. But yes, we should definitely add it to the watch after a cleanup - I wasn't sure which config to use for the style linter.

[matejlatin]

What do you mean by "cleanup"?

[tricinel]

Cleanup on the config's side. If you go ahead and do npm install then run grunt lint, you'll see a bunch of warnings because the code doesn't "completely" pass the lint. By completely I mean, it doesn't give out errors, just warnings, of the type, e.g. "Expected double quotes" or "Expected quotes around url argument".

Of course, I didn't want to modify your code without approval, so I thought it better if you made the decision to either remove the lint rule that throws the warning or conform to the linter.

[matejlatin]

Cool, let me check it out later. I'm leaning towards conforming to linter and yeah... cleaning it up :)

[tricinel]

Cool, any help, let me know :)

[matejlatin]

Sorry but I'm having trouble getting this to work. What modules do I need to install? I installed grunt-postcss but get an error: Cannot find module 'postcss-scss'... I must be missing something basic...

[ghost]

npm installshould install all the dependencies!

[tricinel]

Was just about to say that, thanks @jameskolce. They're all listed in package.json: https://github.com/tricinel/Gutenberg/blob/master/package.json#L37

[matejlatin]

Ahh yes of course... silly me :) works now, thanks guys.

[matejlatin]

Hey guys, I'm still doing the clean up whenever I have time. Meanwhile... what do we do about the "unexpected at-rule extend", "unexpected type selector (selector-no-type)"? There seems to be quite a lot of these...

[tricinel]

Hi @matejlatin, I'll look at those today/tomorrow if that's ok.

[matejlatin]

Hm, I'm working on a new branch for the clean up... should I commit the latest changes and we all work on that branch?

[tricinel]

Sure, sounds like the good way to go :)

[matejlatin]

Published, it's the "lint-clean-up" branch...

[tricinel]

@matejlatin pulled and ran lint, got quite a few warnings, but actually just one at-rule-blacklist error (on helpers/_grid.scss for that "@extend").

I just wanted to make sure you're getting the same output...If so, I can go through those rules and propose the changes. It may be that we can just decide to ignore a specific rule (in which case we override it in .stylelintrc so that it doesn't throw a warning any more).

Here's the output I get...

`Running "postcss:scsslint" (postcss) task

src/style/helpers/_grid.scss 24:3 ⚠ Unexpected at-rule "extend" (at-rule-blacklist) [stylelint]

src/style/layout/_aside.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/layout/_base.scss 4:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 5:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 9:5 ⚠ Expected "width" to come before "margin" (declaration-block-properties-order) [stylelint] 16:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 19:34 ⚠ Expected double quotes (string-quotes) [stylelint] 20:3 ⚠ Expected "font-family" to come before "font-size" (declaration-block-properties-order) [stylelint] 22:3 ⚠ Unexpected browser feature "text-size-adjust" is not supported by IE 11, Edge 13,14, Firefox 48,49, Chrome 52,53, Safari 10,9.1, Chrome for Android 51 (no-unsupported-browser-features) [stylelint] 22:3 ⚠ Unexpected vendor-prefix "-ms-text-size-adjust" (property-no-vendor-prefix) [stylelint] 23:3 ⚠ Unexpected browser feature "text-size-adjust" is not supported by IE 11, Edge 13,14, Firefox 48,49, Chrome 52,53, Safari 10,9.1, Chrome for Android 51 (no-unsupported-browser-features) [stylelint] 23:3 ⚠ Unexpected vendor-prefix "-webkit-text-size-adjust" (property-no-vendor-prefix) [stylelint] 26:34 ⚠ Expected double quotes (string-quotes) [stylelint] 49:5 ⚠ Expected "margin-right" to come before "margin-left" (declaration-block-properties-order) [stylelint] 60:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/layout/_footer.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 4:3 ⚠ Unexpected type selector (selector-no-type) [stylelint] 6:5 ⚠ Expected "width" to come before "margin" (declaration-block-properties-order) [stylelint]

src/style/layout/_header.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/layout/_main.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/layout/_section.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/modules/_anchor.scss 9:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 11:3 ⚠ Expected "color" to come before "background" (declaration-block-properties-order) [stylelint] 12:3 ⚠ Unexpected value "all 0.3s" for property "transition" (declaration-property-value-blacklist) [stylelint]

src/style/modules/_article.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 4:3 ⚠ Expected "width" to come before "margin" (declaration-block-properties-order) [stylelint]

src/style/modules/_audio.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/modules/_canvas.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/modules/_code.scss 2:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 7:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 8:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 9:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 10:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 14:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/modules/_details.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 5:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/modules/_figure.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 4:3 ⚠ Expected "display" to come before "color" (declaration-block-properties-order) [stylelint] 7:3 ⚠ Expected "margin-bottom" to come before "font-style" (declaration-block-properties-order) [stylelint] 22:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 26:1 ⚠ Unexpected qualifying type selector (selector-no-qualifying-type) [stylelint] 26:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 27:1 ⚠ Unexpected qualifying type selector (selector-no-qualifying-type) [stylelint] 27:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 42:6 ⚠ Expected newline after "}" (block-closing-brace-newline-after) [stylelint] 48:3 ⚠ Unexpected type selector (selector-no-type) [stylelint] 66:5 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/modules/_form.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 1:7 ⚠ Unexpected empty block (block-no-empty) [stylelint]

src/style/modules/_heading.scss 45:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 45:6 ⚠ Unexpected type selector (selector-no-type) [stylelint] 59:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 59:6 ⚠ Unexpected type selector (selector-no-type) [stylelint] 60:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 60:6 ⚠ Unexpected type selector (selector-no-type) [stylelint] 61:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 61:6 ⚠ Unexpected type selector (selector-no-type) [stylelint] 75:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 75:6 ⚠ Unexpected type selector (selector-no-type) [stylelint] 89:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 96:3 ⚠ Unexpected type selector (selector-no-type) [stylelint] 97:3 ⚠ Unexpected type selector (selector-no-type) [stylelint] 98:3 ⚠ Unexpected type selector (selector-no-type) [stylelint] 99:3 ⚠ Unexpected type selector (selector-no-type) [stylelint] 100:3 ⚠ Unexpected type selector (selector-no-type) [stylelint] 101:3 ⚠ Unexpected type selector (selector-no-type) [stylelint] 106:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/modules/_horizontal-rule.scss 11:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 17:3 ⚠ Expected "color" to come before "border" (declaration-block-properties-order) [stylelint] 18:3 ⚠ Expected "display" to come before "color" (declaration-block-properties-order) [stylelint] 39:5 ⚠ Expected "background-image" to come before "background-size" (declaration-block-properties-order) [stylelint] 58:7 ⚠ Expected "background-image" to come before "background-size" (declaration-block-properties-order) [stylelint] 68:7 ⚠ Expected "letter-spacing" to come before "content" (declaration-block-properties-order) [stylelint]

src/style/modules/_image.scss 2:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 4:3 ⚠ Expected "max-width" to come before "border" (declaration-block-properties-order) [stylelint] 5:3 ⚠ Expected "display" to come before "max-width" (declaration-block-properties-order) [stylelint] 10:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/modules/_list.scss 2:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 3:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 5:3 ⚠ Unexpected empty line before nested rule (rule-nested-empty-line-before) [stylelint] 5:3 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/modules/_navigation.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/modules/_progress.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/modules/_quote.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 3:3 ⚠ Expected "padding-left" to come before "font-style" (declaration-block-properties-order) [stylelint] 12:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 18:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 18:8 ⚠ Unexpected type selector (selector-no-type) [stylelint] 31:3 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/modules/_table.scss 2:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 4:3 ⚠ Expected "border-spacing" to come before "border-collapse" (declaration-block-properties-order) [stylelint] 7:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 8:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/modules/_template.scss 2:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

src/style/modules/_text.scss 2:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 6:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 11:1 ⚠ Unexpected qualifying type selector (selector-no-qualifying-type) [stylelint] 11:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 16:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 17:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 22:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 27:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 28:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 30:3 ⚠ Expected "position" to come before "line-height" (declaration-block-properties-order) [stylelint] 35:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 37:3 ⚠ Expected "color" to come before "background" (declaration-block-properties-order) [stylelint] 40:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 57:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 58:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 61:3 ⚠ Expected "position" to come before "line-height" (declaration-block-properties-order) [stylelint] 65:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 69:1 ⚠ Unexpected type selector (selector-no-type) [stylelint] 78:3 ⚠ Unexpected empty line before nested rule (rule-nested-empty-line-before) [stylelint] 78:3 ⚠ Unexpected type selector (selector-no-type) [stylelint] 78:7 ⚠ Unexpected type selector (selector-no-type) [stylelint] 85:17 ⚠ Unexpected type selector (selector-no-type) [stylelint] 86:18 ⚠ Unexpected type selector (selector-no-type) [stylelint] 98:24 ⚠ Unexpected type selector (selector-no-type) [stylelint] 116:5 ⚠ Unexpected type selector (selector-no-type) [stylelint] 116:9 ⚠ Unexpected type selector (selector-no-type) [stylelint] 117:19 ⚠ Unexpected type selector (selector-no-type) [stylelint] 118:20 ⚠ Unexpected type selector (selector-no-type) [stylelint] 127:1 ⚠ Selector should be written in lowercase with hyphens (selector-class-pattern) [stylelint] 131:1 ⚠ Selector should be written in lowercase with hyphens (selector-class-pattern) [stylelint] 135:1 ⚠ Selector should be written in lowercase with hyphens (selector-class-pattern) [stylelint] 142:3 ⚠ Expected "text-transform" to come before "letter-spacing" (declaration-block-properties-order) [stylelint]

src/style/modules/_video.scss 1:1 ⚠ Unexpected type selector (selector-no-type) [stylelint]

33 stylesheets processed, no files written.

Done, without errors.`