UNPKG

1.87 kBMarkdownView Raw
1# function-linear-gradient-no-nonstandard-direction
2
3Disallow direction values in `linear-gradient()` calls that are not valid according to the
4[standard syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Syntax).
5
6<!-- prettier-ignore -->
7```css
8.foo { background: linear-gradient(to top, #fff, #000); }
9/** ↑
10 * This (optional) first argument is the "direction" */
11```
12
13A valid and standard direction value is one of the following:
14
15- an angle
16- `to` plus a side-or-corner (`to top`, `to bottom`, `to left`, `to right`; `to top right`, `to right top`, `to bottom left`, etc.)
17
18A common mistake (matching outdated non-standard syntax) is to use just a side-or-corner without the preceding `to`.
19
20## Options
21
22### `true`
23
24The following patterns are considered violations:
25
26<!-- prettier-ignore -->
27```css
28.foo { background: linear-gradient(top, #fff, #000); }
29```
30
31<!-- prettier-ignore -->
32```css
33.foo { background: linear-gradient(bottom, #fff, #000); }
34```
35
36<!-- prettier-ignore -->
37```css
38.foo { background: linear-gradient(left, #fff, #000); }
39```
40
41<!-- prettier-ignore -->
42```css
43.foo { background: linear-gradient(45, #fff, #000); }
44```
45
46<!-- prettier-ignore -->
47```css
48.foo { background: linear-gradient(to top top, #fff, #000); }
49```
50
51The following patterns are _not_ considered violations:
52
53<!-- prettier-ignore -->
54```css
55.foo { background: linear-gradient(to top, #fff, #000); }
56```
57
58<!-- prettier-ignore -->
59```css
60.foo { background: linear-gradient(to bottom right, #fff, #000); }
61```
62
63<!-- prettier-ignore -->
64```css
65.foo { background: linear-gradient(45deg, #fff, #000); }
66```
67
68<!-- prettier-ignore -->
69```css
70.foo { background: linear-gradient(1.57rad, #fff, #000); }
71```
72
73<!-- prettier-ignore -->
74```css
75/* Direction defaults to "to bottom" */
76.foo { background: linear-gradient(#fff, #000); }
77```