[tooling] Add new PostCSS plugin

[heyMP]

Description of the requested feature

There are two PostCSS plugins that I think we should concider adding to our toolchain:

• postcss-calc
• postcss-css-variables

postcss-calc

This is a really impressive tool that does build time process of CSS calc() functions to create IE11 fallbacks. To my understanding, currently any CSS value that uses calc() will not have a valid IE11 fallback generated. This plugin would fix that issue.

Example

:root {
  --main-font-size: 16px;
}
h1 {
  font-size: calc(var(--main-font-size) * 2);
  height: calc(100px - 2em);
  margin-bottom: calc(
      var(--main-font-size)
      * 1.5
    )
}

Would compile to

:root {
  --main-font-size: 16px;
}
h1 {
  font-size: 32px;
  font-size: calc(var(--main-font-size) * 2);
  height: calc(100px - 2em);
  margin-bottom: 24px;
  margin-bottom: calc(
      var(--main-font-size)
      * 1.5
    );
}

postcss-css-variables

We are currently using the PostCSS core plugin postcss-custom-properties in our toolchain so why would we replace it with something else? The postcss-css-variables takes the same approach to generating fallbacks for var() statements, however, it allows you to locally scope your variables to your element. Meaning, if you have defined a variable inside of a BEM component

.pfe-foo {
  --x--gap: var(--pfe-foo--gap, 10px);
  display: grid;
  gap: var(--x--gap);
}

Compiles to

.pfe-foo {
  --x--gap: var(--pfe-foo--gap, 10px);
  display: grid;
  gap: 10px;
  gap: var(--x--gap);
}

It would be able to correctly find the local instance of --pfe-foo-gap and generate a fallback for it.

postcss-custom-properties requires you to add all variables to the :root selector.

:root {
--pfe-foo--gap: 10px;
}
.pfe-foo {
  --x--gap: var(--pfe-foo--gap);
  display: grid;
  gap: var(--x--gap);
}