カスタム・プロパティーを使い倒すには、どうしてもcalc()したり、そのcalc()した値を使ってまたcalc()したりする。Sassで複数の変数を使って計算した結果を変数にするのと同じだ。しかしカスタム・プロパティーをサポートしたはずのEdge 15ではcalc()が値のカスタム・プロパティーを使ってcalc()を使ったカスタム・プロパティーがうまく解決されない。
Demo: calc() in calc() in custom properties
デモでは--fooを定義し、それを参照したcalc()で--barを定義している。更に--bazではcalc()を使って--barを参照している。そのため--bazはcalc(1rem * 2 * 2)と解釈されるはずだが、Edge 15ではそうならない。Firefox 53.0.3、Chrome 58、Mobile Safari 10.3.2では問題ない。
仕様では循環参照は不正になるが、そうでないなら問題なく解決されるはずだ。calc()でcalc()を含むカスタム・プロパティーを扱う場合も特例はないように読める。Edge 15の挙動はバグだろう。EdgeHTML issue trackerに報告しておいた。
カスタム・プロパティーは計算結果を使って更に計算するケースで大いに役立つはずだ。このバグが修正されないとちょっと便利なDRYくらいにしか役に立たない。そこそこ役に立つという意味でもある。