UNPKG

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