spaceAfterClosingBrace causing issues in IE10 when using calc() in padding.

[soluml]

Ran into an issue with IE10 and the spaceAfterClosingBrace prop. I've got a declaration like this:
padding: 0 $half-gutter calc(100vh - .75rem) $half-gutter!important;

The output after CSS Min is this:
.nano{padding:0 .625rem calc(100vh - .75rem).625rem!important}

This seems to work fine in IE11+ and other browsers I've tested, but IE 10 disregards the property because there's no space between calc() and .625rem!important.

Honestly, not sure what the correct behavior here should be? Disabling that feature works, but then you lose optimizations (albeit micro) in other browsers. Seems like maybe the best behavior would be to retain spaces after closing braces after calc() within props? That or giving an IE10 option in the compatibility flag?

[jakubpawlowicz]

That's interesting, I haven't realized up until now calc has such issues in IE<11. Would you be able to check that the same when there's a number after closing brace, e.g calc(100vh - .75rem)0.625rem?

Currently the default compatibility level is IE>9 so for the time being we should rather not remove the space after calc().

Once we have more compat switches in place we'll definitely bump the default compatibility to sth like 'two last versions'.

[soluml]

Just tested in dev tools, 0 0.625rem calc(100vh - .75rem)0.625rem, doesn't work either.

[jakubpawlowicz]

👍 thanks! Fix is coming.

[soluml]

Awesome, appreciate it!

[jakubpawlowicz]

Fixed in 3.2.4.