CSSのcalcの乗算除算の罠

CSSにはcalcといってプロパティ値に入れる数値をCSS側だけで計算できる仕組みがある。

.apple{
    width: calc( 100vw - 50px );
}

このcalcは四則演算は使えるのだが、実は乗算と除算では気を付けないといけないことがある。
それは乗算と除算では単位付きの計算で制限がある。

上にあるように乗算では片方のみが単位付きを認められていて、
除算では左側(分子)のみが単位付きなのが認められている。

(正確に言うともう片方がnumeric型でなければいけない。)

.bad-apple{
    /* 　設定されない */
    width: calc( 10px * 10px );
    height: calc( 100px / 10px );
}
.orange{
    /* 　設定される */
    width: calc( 10px * 10 );
    height: calc( 100px / 10 );
}

まあ$px*px$が${px}^2$ だったり$px/px$は無単位だから単位が変わるというのもわかるが、
だったら$px/px$を単なる無単位量なnumeric型にしてくれたらよかったのだが…。

を見ると具体的な単位などが見ることができる。また型の決定方法もここに書いてある。