Task: resolve stylelint errors across wp-calypso

[noahtallen]

In #66909, @manzoorwanijk helped us utilize @wordpress/stylelint-config/scss for many of our style lint rules. While we caught and resolved a few problems noticed while reviewing, other warnings have been introduced (or already existed) in Calypso.

Our goal should be 0 stylelint warnings across calypso. You can view all issues in the repo with yarn lint:css. Note: I'm working on speeding this up somewhat -- it's not currently ignoring any files.

To resolve issues, we need to:

1. Run auto-fix on the entire repo.
2. Determine if we really need the rule or if the rule should be tweaked or removed. I think there are two criteria: first, we should match WordPress CSS style guidelines. Second, we should encourage "best practices." Otherwise, we can remove or tweak the rule to make it less restrictive. I think "best practices" are mostly covered by the WordPress guidelines, so we can mostly just stick with that. (see #67468)
3. Correct valid style issues, or if the usage is fine for the code, ignore the specific rule for that line.

Tasks:

• [x] Update rules (#67468)
• [x] For every unscoped stylelint-disable, scope it to a specific rule. Unfortunately, there is no way to enforce this going forward, but --fix does not work correctly if rules are unscoped. (E.g. if you write /* stylelint-disable-line */, the entire file cannot be autofixed. Autofix only works for the rest of the file if the line is scoped to a rule.) (#67477)
• [x] Autofix the repo, adding the commit to .git-blame-ignore-revs (https://github.com/Automattic/wp-calypso/pull/67568, https://github.com/Automattic/wp-calypso/pull/67585)
• [ ] Add stylelint to our lint check in TeamCity
• [ ] Once all style issues are fixed, forbid merging PRs which break stylelint rules
• [x] Update the CSS coding guidelines: https://wpcalypso.wordpress.com/devdocs/docs/coding-guidelines/css.md (https://github.com/Automattic/wp-calypso/pull/67650)
• Fix existing rules one by one:
• • [ ] color-named @brookewp
• • [ ] CssSyntaxError
• • [ ] declaration-block-no-duplicate-properties
• • [x] declaration-block-no-shorthand-property-overrides @manzoorwanijk
• • [ ] declaration-property-unit-allowed-list @manzoorwanijk
• • [x] font-family-no-missing-generic-family-keyword @manzoorwanijk
• • [x] function-parentheses-space-inside @manzoorwanijk
• • [ ] function-url-quotes
• • [x] indentation @manzoorwanijk
• • [x] no-duplicate-at-import-rules @manzoorwanijk
• • [ ] no-duplicate-selectors
• • [x] no-empty-source @manzoorwanijk
• • [ ] no-eol-whitespace @brookewp
• • [x] no-irregular-whitespace @manzoorwanijk
• • [x] property-no-unknown @manzoorwanijk
• • [x] scales/radii @manzoorwanijk
• • [x] scss/at-import-no-partial-leading-underscore @manzoorwanijk
• • [x] selector-pseudo-class-parentheses-space-inside @manzoorwanijk
• • [ ] selector-type-no-unknown @brookewp
• • [x] string-quotes @manzoorwanijk
• • [x] unit-allowed-list @manzoorwanijk

[manzoorwanijk]

💡 Tips regarding "Fix existing rules one by one"

Run yarn lint:css in VS Code terminal and you can directly open the affected files using Option + Click

And then if you need to disable warnings for some lints, Problems section of VS Code is really helpful.

[noahtallen]

This project is complete! yarn lint:css returns no errors on trunk, and it should run per-PR to prevent more rule violations from being merged.