Style Linting Rules - StyleLint.io

[Gazook89]

#2834 added the StyleLint.io package to the repo, so that we could start linting/formatting our CSS in a single common way. The rules are set in the config file, .stylelintrc.json.

The docs for StyleLint can be found here.

The scripts associated with the css linter:

• npx stylelint 'themes/V3/5ePHB/style.less' to lint a specific file
• npx stylelint 'themes/V3/5ePHB/style.less' --fix to auto-fix it
• npm run stylelint:dry to lint all .LESS files
• npm run stylelint to auto-fix all files

[Gazook89]

My initial thoughts:

1. "stylistic/string-quotes": "double", --- this should be set to single to align with the rest of our linting.
2. "stylistic/selector-attribute-operator-space-before": "always", --- set to never. Selectors are more easily parsed when each space distinguishes them; adding random spaces within a single attribute selector confounds that parsing.
3. "stylistic/selector-attribute-operator-space-after": "always", --- same as above. Additional note, the docs note that this rule will be deprecated.
4. "function-url-quotes": "always", --- Should consider adding the empty option, documented here
5. "function-url-scheme-disallowed-list": ["data"], --- perhaps add http (non-secure) addresses? Only work with https.

I think that's all that I would change (or just reconsider) right away. I didn't look at the docs at all beyond just double checking what some of these rules mean, so maybe there are additional rules or options that could be added, but will save that for later.

[Gazook89]

Rules we should consider adding:

• Everything in the "Errors" section of the StyleLint docs, except no-descending-specificity, can be turned on. Most of them look like they'll cause an error anyway, so might as well include them in our linter.

(I just spent too much time reading all of those above-mentioned rules, and now going to take a break to do something else before continuing on the "Conventions" section).

[Gazook89]

I just did the auto-fix on the phb theme, and one of the remaining errors stood out to me:

It considers this nested rule "a single property declaration" and so it should be on one line. Except it's nested, so by definition isn't a single line.