Disallow an invalid expression within calc
functions.
.foo {width: calc();} /** ↑ * empty expression */ .foo {width: calc(100% 80px);} /** ↑ /* missing operator */ .foo {width: calc(100% -80px);} /** ↑ /* missing operator */ .foo {width: calc(100% - - 80px);} /** ↑ /* unexpected operator */ .foo {width: calc(100% -);} /** ↑ /* unexpected operator */ .foo {width: calc(- 100%);} /** ↑ /* unexpected operator */ .foo {width: calc(100% / 0);} /** ↑ ↑ /* division by zero */ .foo {width: calc(100px + 80);} /** ↑ ↑ ↑ /* the `resolved type` is invalid */ .foo {width: calc(100% + 80);} /** ↑ ↑ ↑ /* the `resolved type` is invalid */ .foo {width: calc(100px - 80);} /** ↑ ↑ ↑ /* the `resolved type` is invalid */ .foo {width: calc(100px * 80px);} /** ↑ ↑ ↑ /* the `resolved type` is invalid */ .foo {width: calc(100 / 80%);} /** ↑ ↑ ↑ /* the `resolved type` is invalid */
calc()
must have an expression.calc()
must have an operator between the arguments.calc()
must not be division by zero.true
The following patterns are considered violations:
.foo {width: calc();}
.foo {width: calc(100% 80px);}
.foo {width: calc(100% - - 80px);}
.foo {width: calc(100% / 0);}
.foo {width: calc(100px + 80);}
The following patterns are not considered violations:
.foo {width: calc(100% - 80px);}
.foo {width: calc(100% - var(--bar));}
.foo {width: calc(var(--bar) - var(--baz));}