Upgrade stylelint from v13 to v16

[chrispelzer]

Fixes #634

Stylelint now includes a --fix option similar to phplinting so it is able to correct the errors without much issue

stylelint ./resources/scss/**/*.scss --fix

[coveralls]

coverage: 100.0%. remained the same
when pulling 88e6b54 on feature/stylelint-v16
into 57d8a81 on develop.

[nickdenardis]

@chrispelzer
This looks good 👍

Can we add automatic fixing to the regular make command and a second 'dry' command to allow for a preview of changes like phplint?

Perhaps:

make stylelintdry
make stylelint

[nickdenardis]

@chrispelzer
Upon further inspection, the automatic --fix doesn't seem to be working for me.

It looks like some of the CSS comments in this PR have moved from the // to the /* */ style, but not all of them.

After updating the .stylelintrc file to include
"no-invalid-double-slash-comments": true,

The errors are reported:

$ stylelint ./resources/scss/**/*.scss

resources/scss/components/_accordion.scss
  21:13  ✖  Unexpected double-slash CSS comment  no-invalid-double-slash-comments
  33:9   ✖  Unexpected double-slash CSS comment  no-invalid-double-slash-comments
  38:9   ✖  Unexpected double-slash CSS comment  no-invalid-double-slash-comments

...

✖ 46 problems (46 errors, 0 warnings)

Trying the automatic --fix produces the same warnings with no files changed:

$ stylelint ./resources/scss/**/*.scss --fix

resources/scss/components/_accordion.scss
  21:13  ✖  Unexpected double-slash CSS comment  no-invalid-double-slash-comments
  33:9   ✖  Unexpected double-slash CSS comment  no-invalid-double-slash-comments
  38:9   ✖  Unexpected double-slash CSS comment  no-invalid-double-slash-comments

...

✖ 46 problems (46 errors, 0 warnings)

Is there a specific way to denote which rules to automatically fix?

[chrispelzer]

@nickdenardis

--fix only works on certain rules, others you need to correct yourself.

If you reverse one of the changes at the commit fix: various stylelint fixes based on stylelint ./resources/scss/**/*.scss --fix

and run it, you'll see it change.

$ stylelint ./resources/scss/**/*.scss

resources/scss/components/_formy.scss
  132:29  ✖  Expected quotes around "checkbox"  selector-attribute-quotes

✖ 1 problem (1 error, 0 warnings)
  1 error potentially fixable with the "--fix" option.

As for the CSS comments, it depends on if the comment is within a property {} or if it's within the outside.
It only matters for CSS, SCSS it doesn't, more than likely we should just switch all // over to /* */ since that is valid for CSS regardless of SCSS/CSS

[breakdancingcat]

👍🏻

[nickdenardis]

@chrispelzer
Got it. Let's get both of the commands in place to match the others:

make stylelintdry
make stylelint