calc() algebra

[tomhodgins]

div {
  background: lime;
  width: calc((100px - 1em) + (-50px + 1em));
  height: calc((100px - 1em) + (-50px + 1em));
}

correct minification

div{background:lime;width:50px;height:50px}

• even without evaluating units we can still use algebra and simplify this formula down to 50px by eliminating things that cancel out

CSSnano output

div{background:lime;width:calc((100px - 1em) + (-50px + 1em));height:calc((100px - 1em) + (-50px + 1em))}

• in this situation - 1em and + 1em cancel each other out
• next calc((100px) + (-50px)) can be further simplified as calc(100px - 50px)
• this can be evaluated to 50px