[Bug]: Calc with css custom properties and brackets

[HendrikWismans]

Describe the bug

Bracket are removed from calc. And plus changed to minus.

.cssnano-input {
  height: calc(100% - (var(--height1) + var(--height2)));
}

.cssnano-output{height:calc(100% - var(--height1) - var(--height2))}

Here is a codepen to see the difference: https://codepen.io/hendrik___/full/YzJdRXm

Expected behaviour

.cssnano-input {
  height: calc(100% - (var(--height1) + var(--height2)));
}

.cssnano-expectedoutput{height:calc(100% - (var(--height1) + var(--height2)))}

Steps to reproduce

1. https://cssnano.co/playground/
2. input:

.cssnano-input {
  height: calc(100% - (var(--height1) + var(--height2)));
}

settings: default or advanced

Version

6.0.1

Preset

default

Environment

-

Package details

-

Additional context

No response

[ludofischer]

Isn't this behaviour correct? Subtracting the sum should be the same as subtracting first one term, then the other. For example,

4 - (1 + 2) = 4 - 3 = 4 - 1 - 2

Doe something change visually after minification?

[ludofischer]

Or maybe it breaks because the custom properties contain arithmetic expressions (like --height1: 4em + 5em;) so we should not transform when the expression contains a custom property.

[alexander-akait]

Yeah, it is tricky, maybe we can replace it on (value_of_variable) and try to compress again

[ludofischer]

Yeah, it is tricky, maybe we can replace it on (value_of_variable) and try to compress again

How could we access the value of the variable? I don't think any of the plugins track that. I think we must skip the transform. There's even a test for that: https://github.com/postcss/postcss-calc/blob/102ba44759794bdf16ac2fa9ef2d1baed7156a45/test/index.js#L200 But the tests themselves contradict each other, because later on they assert that that values containing custom properties must be transformed: https://github.com/postcss/postcss-calc/blob/102ba44759794bdf16ac2fa9ef2d1baed7156a45/test/index.js#L106 There's a function that tries to check for custom properties, but it seems like it lets too many cases through: https://github.com/postcss/postcss-calc/blob/102ba44759794bdf16ac2fa9ef2d1baed7156a45/src/lib/reducer.js#L322

[alexander-akait]

Yeah, in theory we can rewrite it on recursive call and do deep check, anyway I think plugin itself should not do modifications when var exists, or we can rewrite it on a simple thing like /var(/i 😄