The conversion of calc() does not take into account the valid range of the property value

[yisibl]

Input

.foo {
  width: calc(5px - 10px);
}

Output(minify: true)

.foo {
  width: -5px;
}

Expected

.foo {
  width: 0;
}

Or

.foo {
  width: calc(5px - 10px);
}

Specs

https://drafts.csswg.org/css-values-4/#example-ec14dee2

Since widths smaller than 0px are not allowed, these three declarations are equivalent:

width: calc(5px - 10px);
width: calc(-5px);
width: 0px;

Note however that width: -5px is not equivalent to width: calc(-5px)! Out-of-range values outside calc() are syntactically invalid, and cause the entire declaration to be dropped.

❌ It is very unsafe to do unfolding calculations for calc(), we should add an option to turn it off.

[evanw]

Lightning CSS also has this bug (https://github.com/parcel-bundler/lightningcss/issues/1000) as does cssnano (https://cssnano.github.io/cssnano/playground/). I'm curious how other tools will deal with this problem.