Skip to main content

function-calc-no-invalid

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.
  • The resolved type must be valid for where the expression is placed.

Options#

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));}