Add rules for no-color-css-vars

[langermank]

As we begin testing new CSS color variable names, I'd like to try and pair down the surface area as much as possible. There are many (~200) cases in github/github where teams are referencing color CSS variables within the sx prop and other styled-system props, and I think it makes sense to try and enforce primitives the way Primer React consumes them currently.

This test should check for the sx prop or color related styled-system props such as color or backgroundColor, and if it finds a CSS variable in the provided JSON object suggest a fix.

I hand wrote the JSON object because the names are so different, it would be impossible to infer when to camelCase. I opted to handle the most common colors and will likely need to hand edit some component specific issues I found in github/github.

I also plan to followup with another plugin that will actually allow the use of CSS variables in some cases, but it will do an autofix with the new color variable the same way we do in stylelint.

Closes https://github.com/github/primer/issues/2347

[changeset-bot]

⚠️ No Changeset found

Latest commit: 108b8b5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[siddharthkp]

How are we generating this map?

Is there a risk of this falling out of sync with primitives?

[siddharthkp]

@langermank Found it!

It was context.sourceCode.getText, pushed a few commits that handle more use cases (see tests)

[siddharthkp]

to use new features: sourceCode.getText and sourceCode.getScope

This is compatible with version in dotcom, github/github/ui/packages/eslintrc/package.json#L19

[langermank]

Thank you!!! 🎉 you're the best

[broccolinisoup]

It's looking pretty cool ✨ We will also need to add this rule to a few places for documentation:

• https://github.com/primer/eslint-plugin-primer-react/blob/main/src/configs/recommended.js
• https://github.com/primer/eslint-plugin-primer-react/blob/main/src/index.js
• https://github.com/primer/eslint-plugin-primer-react/blob/main/README.md#rules

[broccolinisoup]

So cool 🔥

[colebemis]

boxShadow doesn't support referencing variables like this. Instead, you have to pass a function like this:

boxShadow: theme => `0 0 0 2px ${theme.colors.canvas.subtle}`

Example: https://github.com/primer/react/blob/650a46d5dbf10500d4d9af508c71744665f1bd0d/src/PageLayout/PageLayout.tsx#L141

It might be tricky to update the plugin to support this, so let's check if this is a common pattern before investing the time in updating the plugin.

[langermank]

Thank you! That was a real example from dotcom I grabbed. I'll see if there's more than one, though.

[langermank]

Closing in favor of #81