UNPKG

1.94 kBMarkdownView Raw
1# function-calc-no-invalid
2
3Disallow an invalid expression within `calc` functions.
4
5```css
6.foo {width: calc();}
7/** ↑
8 * empty expression */
9.foo {width: calc(100% 80px);}
10/** ↑
11/* missing operator */
12.foo {width: calc(100% -80px);}
13/** ↑
14/* missing operator */
15.foo {width: calc(100% - - 80px);}
16/** ↑
17/* unexpected operator */
18.foo {width: calc(100% -);}
19/** ↑
20/* unexpected operator */
21.foo {width: calc(- 100%);}
22/** ↑
23/* unexpected operator */
24.foo {width: calc(100% / 0);}
25/** ↑ ↑
26/* division by zero */
27.foo {width: calc(100px + 80);}
28/** ↑ ↑ ↑
29/* the `resolved type` is invalid */
30.foo {width: calc(100% + 80);}
31/** ↑ ↑ ↑
32/* the `resolved type` is invalid */
33.foo {width: calc(100px - 80);}
34/** ↑ ↑ ↑
35/* the `resolved type` is invalid */
36.foo {width: calc(100px * 80px);}
37/** ↑ ↑ ↑
38/* the `resolved type` is invalid */
39.foo {width: calc(100 / 80%);}
40/** ↑ ↑ ↑
41/* the `resolved type` is invalid */
42```
43
44- `calc()` must have an expression.
45- `calc()` must have an operator between the arguments.
46- `calc()` must not be division by zero.
47- [The resolved type](https://www.w3.org/TR/css-values-3/#calc-type-checking) must be valid for where the expression is placed.
48
49## Options
50
51### `true`
52
53The following patterns are considered violations:
54
55```css
56.foo {width: calc();}
57```
58
59```css
60.foo {width: calc(100% 80px);}
61```
62
63```css
64.foo {width: calc(100% - - 80px);}
65```
66
67```css
68.foo {width: calc(100% / 0);}
69```
70
71```css
72.foo {width: calc(100px + 80);}
73```
74
75The following patterns are *not* considered violations:
76
77```css
78.foo {width: calc(100% - 80px);}
79```
80
81```css
82.foo {width: calc(100% - var(--bar));}
83```
84
85```css
86.foo {width: calc(var(--bar) - var(--baz));}
87```