Integrate constyble CSS linter

[bartveneman]

Refs #930.

This PR adds a basic config for Constyble, a CSS Complexity Linter. Linting with this config makes sure only a predefined set of box-shadows, font-families etc. exist in the final CSS that ships to the browser. The Primer docs mention 4 unique box-shadows, but Constyble found 25 unique ones.

1 × #c9ff00 0 0 3px
1 × -2px -2px 0 rgba(255,255,255,0.8)
2 × 0 0 0 0.2em rgba(3,102,214,0.3)
1 × 0 0 0 0.2em rgba(3,102,214,0.4)
1 × 0 0 0 0.2em rgba(6,121,252,0.4)
1 × 0 0 0 0.2em rgba(40,167,69,0.3)
1 × 0 0 0 0.2em rgba(52,208,88,0.4)
1 × 0 0 0 0.2em rgba(121,184,255,0.4)
1 × 0 0 0 0.2em rgba(203,36,49,0.4)
1 × 0 0 0 1px #e1e4e8
1 × 0 0 18px rgba(0,0,0,0.4)
1 × 0 1px 0 #e1e4e8
1 × 0 1px 0 #eaecef
1 × 0 1px 1px rgba(27,31,35,0.1)
3 × 0 1px 5px rgba(27,31,35,0.15)
3 × 0 1px 15px rgba(27,31,35,0.15)
1 × 0 10px 50px rgba(27,31,35,0.07)
1 × 2px 0 0 #0366d6 inset
1 × inset 0 -1px 0 #959da5
1 × inset 0 -1px 0 #e1e4e8
1 × inset 0 -1px 0 rgba(27,31,35,0.12)
1 × inset 0 0 0 1px #d1d5da,0 1px 5px rgba(27,31,35,0.15)
4 × inset 0 0.15em 0.3em rgba(27,31,35,0.15)
1 × inset 0 1px 2px rgba(27,31,35,0.075)
2 × inset 0 1px 2px rgba(27,31,35,0.075),0 0 0 0.2em rgba(3,102,214,0.3)

It could be enhanced with rules for Primer's font-sizes, more complexity rules and filesize rules.

NB: this config is based on what I found based on running dist/primer.css through Wallace-CLI. I'm fully aware that I have very little context about what could be useful for Primer, so feel free to add, correct and modify where needed.

/cc @primer/ds-core

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://primer-css-git-fork-bartveneman-integrate-constyble.primer.now.sh

[simurai]

Looks interesting. 👀 You can increase the counter, but you've to explain yourself. 😅

I'll let @shawnbot take a closer look.

[shawnbot]

Thanks for this, @bartveneman! I'm super interested to take a look, but I have a couple of other things on my plate that I need to finish before I can get to it. ✌️

[bartveneman]

No worries, I just want to propose a possibly helpful tool. No rush ☺️

[bartveneman]

I'd be happy to help move this PR along. I know the priority is probably pretty low, but this is still on my mind. ❤️

[simurai]

@bartveneman I'd be happy to help move this PR along.

Thanks.. 🙇 We're currently working on a "refresh" of some of the components: #1025. Does it make sense to wait until that merged into master? Using box-shadow increased. We probably should also refactor some of them first. 😅

Also, just FYI. @shawnbot no longer works on Primer CSS. 😞 Not sure if someone else from @primer/ds-core is interested in taking a look?

[github-actions]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.