Brackets are removed within CSS calc statements

[CedricReichenbach]

Brackets within calc() statements in CSS should not be touched by the compiler, but are currently removed.

Example source code:

.foo {
  width: calc(2 * (3px + 4px));
}

Expected output:

.foo {
  width: calc(2 * (3px + 4px)); /* -> 14px */
}

Actual output:

.foo {
  width: calc(2 * 3px + 4px); /* -> 10px */
}

This is especially painful because it leads to subtle, hard to detect errors in layouts.

[saivan]

I'm having the same problem, this behaviour isn't sensible.

[daPhantom]

Can confirm this.

This

.logo {
    margin-left: calc(((100vw - 104px) / 2) - 40px);
}

results in this broken CSS snippet within the compiled CSS

.logo {
    margin-left: calc(100vw - 104px/ 2- 40px);
}

Please fix this behavior since it is really misleading when working with SASS.