Nested calc with css variables

[kangw3n]

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?

[mcfanng]

Yes I have a similar issue.
It seems as though when using nested vars in a calc with parentheses, the parentheses get removed which results in an incorrect calculation. Here is the case I am currently having in .scss file.
Before Pack:

body {
	--header-height: 57px;
	--header-bottom-padding: 8px;
	--footer-height: 38px;
	--footer-vertical-padding: 32px;
	--body-height: calc(100vh - (var(--footer-height) + var(--footer-vertical-padding)));
	--site-wrapper-min-height: calc(var(--body-height) - (var(--header-height) + var(--header-bottom-padding)));
	--calendar-body-height: calc(
		var(--site-wrapper-min-height) -
			(var(--month-header-height) + var(--days-header-height) + var(--site-content-children-vertical-padding))
	);
	--month-header-height: 30px;
	--days-header-height: 30px;
	--site-content-children-vertical-padding: 10px;
	width: 100%;
	height: var(--body-height);
	z-index: 10;
}

After pack:

body {
	--header-height: 57px;
	--header-bottom-padding: 8px;
	--footer-height: 38px;
	--footer-vertical-padding: 32px;
	--body-height: calc(100vh - var(--footer-height) - var(--footer-vertical-padding));
	--site-wrapper-min-height: calc(var(--body-height) - (var(--header-height) + var(--header-bottom-padding)));
	--calendar-body-height: calc(
		var(--site-wrapper-min-height) -
			var(--month-header-height) + var(--days-header-height) + var(--site-content-children-vertical-padding));
	--month-header-height: 30px;
	--days-header-height: 30px;
	--site-content-children-vertical-padding: 10px;
	width: 100%;
	height: var(--body-height);
	z-index: 10;
}

If you notice that --body-height value went from calc(100vh - (var(--footer-height) + var(--footer-vertical-padding))) to calc(100vh - var(--footer-height) - var(--footer-vertical-padding)) which works just fine.
However --calendar-body-height value went from calc( var(--site-wrapper-min-height) - (var(--month-header-height) + var(--days-header-height) + var(--site-content-children-vertical-padding))) to calc( var(--site-wrapper-min-height) - var(--month-header-height) + var(--days-header-height) + var(--site-content-children-vertical-padding)) which produces an incorrect result.

It looks like Cssnano is using this and referencing the latest version.

[abstractvector]

I raised an issue on cssnano (cssnano/cssnano#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.

[dangelion]

Confirm the bug. Is there any way to solve?

[dangelion]

I solved removing postcss-calc and using this:
https://github.com/nico-jacobs/postcss-remove-nested-calc
Works like a charm. It'll be good if this library could be recognized as official postcss plugin. Or someone could be inspired from it to fix the bug in postcss-calc.