Internal: Add CSS variables CI checks

[christianvuerings]

Improves safety of our CSS variables.

We introduced a split CSS bundle for legacy and future CSS in #963 but this resulted in potential breakages:

await duplicateVariablesDifferentValues();
await noVarInLegacyCSS();

Duplicate Variables with Different Values

We already saw this issue in #971 where the font-size variables for Text and Heading got overridden resulting in heading sizes to be the same as text sizes

Test: change a color that appears multiple times in 1 location:

--gestalt-colorGray100: #efefef;

to

--gestalt-colorGray100: #efefed;

CSS Variables in legacy CSS

This will break in IE11 since the compiled CSS will still contain the var(). We can only use :root for now so it does get replaced in the legacy build.

Test: Add this to any file CSS file

.textFieldTemp {
  --gestalt-colorGrad: #111;

  color: var(--gestalt-colorGrad);
}

[netlify]

Deploy preview for gestalt ready!

Built with commit 45718b2

https://deploy-preview-1041--gestalt.netlify.app