Adds code quality automation tools for CSS

[kyleramirez]

Issue

Parent issue: Install Linters for Formatting, Code Quality, CSS, and Accessibility

Summary

In order to meet the CSS requirements, this work will address the following:

• Implement stylelint for all CSS and adjacent syntax
• Implement recess-order, a plugin for stylelint which enforces a CSS rule order developed by the Twitter Bootstrap team.
• Implement pre-commit hooks via husky, a Git pre-commit / pre-push automator, and lint-staged, a highly configurable tool for setting up linting automation.

Once we have the ability to add this lint config, we can add additional linting automation, including Prettier, which is also in scope for #2.

Caveats / Concerns

• Code contributors may have different opinions about the pre-commit or pre-push steps, as it will try to enforce an extra step to the commit process. This work will ensure the default --no-verify Git commit or push flag, which can skip all linting steps in cases where that is desirable
• Code contributors may need to be educated on the exact process for linting, and/or discuss if it's something that makes sense from a team perspective.
  • By default, this change will lint only files staged for commit.
  • Linting errors can be categorized in two ways:
  • Errors automatically fixable by the linter, e.g. CSS rule ordering
  • Errors NOT automatically fixable by the linter
  • If the linter is automatically able to fix all linting errors, it will stage those fixes for commit along with the original commit, and commit them in the same action as the original code
  • If the linter is NOT automatically able to fix all linting errors, the commit will be aborted, and error messages will be shown
• Once this work is implemented, it may be necessary to do a full-repo lint for all files to ensure they are all starting from the same point. An alternative to this could be to configure the linter to ignore certain groups of files until the team is ready to make corrections by hand.

Acceptance criteria

This change will enable the following:

• As a code contributor, by installing the listed dependencies, I am able to run my changed files against without any extra configuration needed
• As a code contributor, I am able to trigger the full linting steps at any time using a yarn command
• As a code contributor, I am able to add additional pre-commit or pre-push linting steps using this set of tools

[kyleramirez]

@noi5e I have completed this work, but it looks like I'm not able to push a new branch to this repo. Are you able to add write access for me?

[noi5e]

@noi5e I have completed this work, but it looks like I'm not able to push a new branch to this repo. Are you able to add write access for me?

Yeah, definitely, I think I added your professional GitHub account, let me swap out the access for @kyleramirez

And thank you for this, this all sounds great, and great to have your help!