🪟 🔧 Add stylelint plugin & no-color-variables-in-rgba rule

[josephkmh]

What

Recently we merged a PR that makes using our SASS color variables incompatible with the rgba() function. Unfortunately there is nothing blocking a developer from using this syntax, it just silently fails. This PR introduces a stylelint plugin & rule, no-color-variables-in-rgba, which checks our source (S)CSS files for incompatible usage.

For example, if you write some CSS like this:

@use "scss/colors";

.myClass {
  background-color: rgba(colors.$blue, 50%);

Our pre-commit hook, which runs stylelint, will fail with this error message:

Considerations

The rule checks using a regex /rgba\([^)]*colors\.\$/ that looks specifically for rgba(colors.$ to detect if the rule is violated. If we change the name of our scss/colors import for whatever reason, this could break.

[josephkmh]

If we want to add more stylelint plugins later, we can put them in here

[josephkmh]

Tested that this works on CI during the frontend build step as well: https://github.com/airbytehq/airbyte/actions/runs/3895729403/jobs/6651434662#step:8:1853

[timroes]

Tested locally, code LGTM. Just left a comment about potential change in wording, but non blocking for me.