UNPKG

2.41 kBMarkdownView Raw
1# unit-blacklist
2
3Specify a blacklist of disallowed units.
4
5<!-- prettier-ignore -->
6```css
7a { width: 100px; }
8/** ↑
9 * These units */
10```
11
12## Options
13
14`array|string`: `["array", "of", "units"]|"unit"`
15
16Given:
17
18```
19["px", "em", "deg"]
20```
21
22The following patterns are considered violations:
23
24<!-- prettier-ignore -->
25```css
26a { width: 100px; }
27```
28
29<!-- prettier-ignore -->
30```css
31a { font-size: 10em; }
32```
33
34<!-- prettier-ignore -->
35```css
36a { transform: rotate(30deg); }
37```
38
39The following patterns are _not_ considered violations:
40
41<!-- prettier-ignore -->
42```css
43a { font-size: 1.2rem; }
44```
45
46<!-- prettier-ignore -->
47```css
48a { line-height: 1.2; }
49```
50
51<!-- prettier-ignore -->
52```css
53a { height: 100vmin; }
54```
55
56<!-- prettier-ignore -->
57```css
58a { animation: animation-name 5s ease; }
59```
60
61## Optional secondary options
62
63### `ignoreProperties: { unit: ["property", "/regex/", /regex/] }`
64
65Ignore units in the values of declarations with the specified properties.
66
67For example, with `["px", "vmin"]`.
68
69Given:
70
71```
72{
73 "px": [ "font-size", "/^border/" ],
74 "vmin": [ "width" ]
75}
76```
77
78The following patterns are _not_ considered violations:
79
80<!-- prettier-ignore -->
81```css
82a { font-size: 13px; }
83```
84
85<!-- prettier-ignore -->
86```css
87a { border-bottom-width: 6px; }
88```
89
90<!-- prettier-ignore -->
91```css
92a { width: 100vmin; }
93```
94
95The following patterns are considered violations:
96
97<!-- prettier-ignore -->
98```css
99a { line-height: 12px; }
100```
101
102<!-- prettier-ignore -->
103```css
104a { -moz-border-radius-topright: 40px; }
105```
106
107<!-- prettier-ignore -->
108```css
109a { height: 100vmin; }
110```
111
112### `ignoreMediaFeatureNames: { unit: ["property", "/regex/", /regex/] }`
113
114Ignore units for specific feature names.
115
116For example, with `["px", "dpi"]`.
117
118Given:
119
120```
121{
122 "px": [ "min-width", "/height$/" ],
123 "dpi": [ "resolution" ]
124}
125```
126
127The following patterns are _not_ considered violations:
128
129<!-- prettier-ignore -->
130```css
131@media (min-width: 960px) {}
132```
133
134<!-- prettier-ignore -->
135```css
136@media (max-height: 280px) {}
137```
138
139<!-- prettier-ignore -->
140```css
141@media not (resolution: 300dpi) {}
142```
143
144The following patterns are considered violations:
145
146<!-- prettier-ignore -->
147```css
148@media screen and (max-device-width: 500px) {}
149```
150
151<!-- prettier-ignore -->
152```css
153@media all and (min-width: 500px) and (max-width: 200px) {}
154```
155
156<!-- prettier-ignore -->
157```css
158@media print and (max-resolution: 100dpi) {}
159```