1 | # unit-no-unknown
|
2 |
|
3 | Disallow unknown units.
|
4 |
|
5 |
|
6 | ```css
|
7 | a { width: 100pixels; }
|
8 | /** ↑
|
9 | * These units */
|
10 | ```
|
11 |
|
12 | This rule considers units defined in the CSS Specifications, up to and including Editor's Drafts, to be known.
|
13 |
|
14 | ## Options
|
15 |
|
16 | ### `true`
|
17 |
|
18 | The following patterns are considered violations:
|
19 |
|
20 |
|
21 | ```css
|
22 | a {
|
23 | width: 10pixels;
|
24 | }
|
25 | ```
|
26 |
|
27 |
|
28 | ```css
|
29 | a {
|
30 | width: calc(10px + 10pixels);
|
31 | }
|
32 | ```
|
33 |
|
34 | The following patterns are _not_ considered violations:
|
35 |
|
36 |
|
37 | ```css
|
38 | a {
|
39 | width: 10px;
|
40 | }
|
41 | ```
|
42 |
|
43 |
|
44 | ```css
|
45 | a {
|
46 | width: 10Px;
|
47 | }
|
48 | ```
|
49 |
|
50 |
|
51 | ```css
|
52 | a {
|
53 | width: 10pX;
|
54 | }
|
55 | ```
|
56 |
|
57 |
|
58 | ```css
|
59 | a {
|
60 | width: calc(10px + 10px);
|
61 | }
|
62 | ```
|
63 |
|
64 | ## Optional secondary options
|
65 |
|
66 | ### `ignoreUnits: ["/regex/", /regex/, "string"]`
|
67 |
|
68 | Given:
|
69 |
|
70 | ```
|
71 | ["/^my-/", "custom"]
|
72 | ```
|
73 |
|
74 | The following patterns are _not_ considered violations:
|
75 |
|
76 |
|
77 | ```css
|
78 | width: 10custom;
|
79 | a {
|
80 | }
|
81 | ```
|
82 |
|
83 |
|
84 | ```css
|
85 | a {
|
86 | width: 10my-unit;
|
87 | }
|
88 | ```
|
89 |
|
90 |
|
91 | ```css
|
92 | a {
|
93 | width: 10my-other-unit;
|
94 | }
|
95 | ```
|
96 |
|
97 | ### `ignoreFunctions: ["/regex/", /regex/, "string"]`
|
98 |
|
99 | Given:
|
100 |
|
101 | ```
|
102 | ["image-set", "/^my-/", "/^YOUR-/i"]
|
103 | ```
|
104 |
|
105 | The following patterns are _not_ considered violations:
|
106 |
|
107 |
|
108 | ```css
|
109 | a {
|
110 | background-image: image-set(
|
111 | '/images/some-image-1x.jpg' 1x,
|
112 | '/images/some-image-2x.jpg' 2x,
|
113 | '/images/some-image-3x.jpg' 3x
|
114 | );
|
115 | }
|
116 | ```
|
117 |
|
118 |
|
119 | ```css
|
120 | a {
|
121 | background-image: my-image-set(
|
122 | '/images/some-image-1x.jpg' 1x,
|
123 | '/images/some-image-2x.jpg' 2x,
|
124 | '/images/some-image-3x.jpg' 3x
|
125 | );
|
126 | }
|
127 | ```
|
128 |
|
129 |
|
130 | ```css
|
131 | a {
|
132 | background-image: YoUr-image-set(
|
133 | '/images/some-image-1x.jpg' 1x,
|
134 | '/images/some-image-2x.jpg' 2x,
|
135 | '/images/some-image-3x.jpg' 3x
|
136 | );
|
137 | }
|
138 | ```
|