Nested calc with css variables

thanks @evilebottnawi for redirection. #816

I’m encountering an issues while using calc() with CSS Custom variables where presets automatically remove my nested calc while custom variables is unable to resolve in build time.

Given that:

body {
  top: calc(100% - calc(10px + 10px));
}
/* will compile to*/
body {
  top: calc(100% - 20px);
}

when it comes to a css variables

body {
  top: calc(var(--pic-height) - calc(var(--width-height) + var(--border-gap)));
}
/* will compile to*/
body {
  top: calc(var(--pic-height) - var(--width-height) + var(--border-gap));
}

which is incorrect in mathematical stand points. To solve this problem, I end up by setting calc preset to false in plugin options.

Is there any possible to omit any clearing unintended nested calc while encountering css variable or if there is any better solution while dealing with variables value?

[abstractvector]

I raised an issue on cssnano (https://github.com/cssnano/cssnano/issues/628) but believe the issue lies upstream from there in this repo.

I am able to reproduce the same behavior, that the following two CSS styles produce different outputs (confirmed in Chrome 80 and Firefox 74 on Mac OS 10.15.3):

padding-bottom: calc(100% / (var(--aspect-ratio)));

Computed: padding-bottom: 276.906px (correct)

padding-bottom: calc(100% / var(--aspect-ratio));

Computed: padding-bottom: 0px (incorrect)

I’m not sure why the parentheses matter in this situation, but the empirical evidence suggests they do. I suggest therefore the parentheses should not be removed.

[ludofischer]

So the first issue is already fixed in 8.2, while the issue in https://github.com/postcss/postcss-calc/issues/91#issuecomment-605059796 is a duplicate of #113