Nested calcs are optimized away incorrectly by cssnano

[dgutride]

When a nested calc is used for a property value like the following:
calc(var(--pf-c-form-control--PaddingBottom) - calc(var(--pf-c-form-control--focus--BorderBottomWidth) - var(--pf-c-form-control--BorderWidth)))

Cssnano removes the inner calc leading to incorrect evaluation. This is due to bugs in a cssnano calc plugin that is included in the default set of minification plugins. My current recommendation is that we avoid nested calcs like the plague until cssnano fixes their bug (even then, if somebody pulls the scss or compiles manually, they might still have this issue).

Cssnano bug: postcss/postcss-calc#64
Gatsby developers attempted to workaround this here and decided to wait for the above fix: gatsbyjs/gatsby#9879
gatsbyjs/gatsby#9858

This is included in the default cssnano set as can be seen here: https://cssnano.co/guides/optimisations/

[HZooly]

Hey @dgutride, did you managed to find a workaround for this?

[mcoker]

@dgutride do you know if this was resolved upstream? I tested this and nested calc() functions look OK in our compiled CSS.

[stale]

This issue has been automatically marked as stale because it has not had activity in the last 60 days. It will be closed in 30 days if no further activity occurs.

[stale]

This issue has been automatically marked as stale because it has not had activity in the last 60 days. It will be closed in 30 days if no further activity occurs.