UNPKG

5.68 kBMarkdownView Raw
1# indentation
2
3Specify indentation.
4
5<!-- prettier-ignore -->
6```css
7 |@media print {
8 | a {
9 | ↑ background-position: top left,
10 | ↑ ↑ top right;
11 | ↑}↑ ↑
12 |}↑ ↑ ↑
13/** ↑ ↑ ↑
14 * The indentation at these three points */
15```
16
17The [`fix` option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.
18
19## Options
20
21`int|"tab"`, where `int` is the number of spaces
22
23### `2`
24
25Always indent at-rules, rules, comments, declarations, inside parentheses and multi-line values by 2 spaces.
26
27The following patterns are considered violations:
28
29<!-- prettier-ignore -->
30```css
31@media print {
32a {
33background-position: top left,
34top right;
35}
36}
37```
38
39<!-- prettier-ignore -->
40```css
41@media print {
42a {
43 background-position: top left,
44 top right;
45 }
46}
47```
48
49<!-- prettier-ignore -->
50```css
51@media print {
52 a {
53 background-position: top left,
54 top right;
55 }
56}
57```
58
59<!-- prettier-ignore -->
60```css
61@media print {
62 a,
63 b {
64 background-position: top left,
65 top right;
66 }
67}
68```
69
70<!-- prettier-ignore -->
71```css
72a {
73/* blergh */
74 color: pink;
75}
76 /* blergh */
77```
78
79<!-- prettier-ignore -->
80```css
81@media print,
82(-webkit-min-device-pixel-ratio: 1.25),
83(min-resolution: 120dpi) {}
84```
85
86<!-- prettier-ignore -->
87```css
88a {
89 color: rgb(
90 255,
91 255,
92 255
93 );
94 top: 0;
95}
96```
97
98The following patterns are _not_ considered violations:
99
100<!-- prettier-ignore -->
101```css
102@media print {
103 a {
104 background-position: top left,
105 top right;
106 }
107}
108```
109
110<!-- prettier-ignore -->
111```css
112@media print {
113 a,
114 b {
115 background-position: top left,
116 top right;
117 }
118}
119```
120
121<!-- prettier-ignore -->
122```css
123a {
124 /* blergh */
125 color: pink;
126}
127/* blergh */
128```
129
130<!-- prettier-ignore -->
131```css
132@media print,
133 (-webkit-min-device-pixel-ratio: 1.25),
134 (min-resolution: 120dpi) {}
135```
136
137<!-- prettier-ignore -->
138```css
139a {
140 color: rgb(
141 255,
142 255,
143 255
144 );
145 top: 0;
146}
147```
148
149## Optional secondary options
150
151### `baseIndentLevel: int|"auto"`
152
153By default, the indent level of the CSS code block in non-CSS-like files is determined by the shortest indent of non-empty line. The setting `baseIndentLevel` allows you to define a relative indent level based on CSS code block opening or closing line.
154
155For example, with `[ 2, { baseIndentLevel: 1 } ]`, CSS should be indented 1 levels higher than `<style>` tag:
156
157```html
158<!DOCTYPE html>
159<html lang="en">
160 <head>
161 <style>
162 a {
163 display: block;
164 }
165 </style>
166 </head>
167</html>
168```
169
170### `indentInsideParens: "twice"|"once-at-root-twice-in-block"`
171
172By default, _one extra_ indentation (of your specified type) is expected after newlines inside parentheses, and the closing parenthesis is expected to have no extra indentation.
173
174If you would like to change the quantity of extra indentation inside parentheses, use this option.
175
176`"twice"` means you expect two extra indentations (of your specified type) after newlines inside parentheses, and expect the closing parenthesis to have one extra indentation. For example:
177
178<!-- prettier-ignore -->
179```css
180a {
181 color: rgb(
182 255,
183 255,
184 255
185 );
186 top: 0;
187}
188```
189
190`"once-at-root-twice-in-block"` means two things: You want the behavior of `"once"`, as documented above, when the parenthetical expression is part of a node that is an immediate descendent of the root — i.e. not inside a block. And you want the behavior of `"twice"`, as documented above, when the parenthetical expression is part of a node that is inside a block. For example:
191
192<!-- prettier-ignore -->
193```css
194@import (
195 "foo.css"
196);
197
198a {
199 color: rgb(
200 255,
201 255,
202 255
203 );
204 top: 0;
205}
206```
207
208### `indentClosingBrace: true|false`
209
210If `true`, the closing brace of a block (rule or at-rule) will be expected at the same indentation level as the block's inner nodes.
211
212For example, with `indentClosingBrace: true`.
213
214The following patterns are considered violations:
215
216<!-- prettier-ignore -->
217```css
218a {
219 color: pink;
220}
221```
222
223<!-- prettier-ignore -->
224```css
225@media print {
226 a {
227 color: pink;
228 }
229}
230```
231
232The following patterns are _not_ considered violations:
233
234<!-- prettier-ignore -->
235```css
236a {
237 color: pink;
238 }
239```
240
241<!-- prettier-ignore -->
242```css
243@media print {
244 a {
245 color: pink;
246 }
247 }
248```
249
250### `except: ["block", "param", "value"]`
251
252Do _not_ indent for these things.
253
254For example, with `2`.
255
256The following patterns are considered violations:
257
258<!-- prettier-ignore -->
259```css
260@media print,
261 (-webkit-min-device-pixel-ratio: 1.25),
262 (min-resolution: 120dpi) {
263 a {
264 background-position: top left,
265 top right;
266 }
267}
268```
269
270The following patterns are _not_ considered violations:
271
272<!-- prettier-ignore -->
273```css
274@media print,
275(-webkit-min-device-pixel-ratio: 1.25),
276(min-resolution: 120dpi) {
277a {
278background-position: top left,
279top right;
280}
281}
282```
283
284### `ignore: ["inside-parens", "param", "value"]`
285
286#### `"inside-parens"`
287
288Ignore the indentation inside parentheses.
289
290For example, with `2`.
291
292The following patterns are _not_ considered violations:
293
294<!-- prettier-ignore -->
295```css
296a {
297 color: rgb(
298255,
299 255,
300 255
301 );
302 top: 0;
303}
304```
305
306#### `"param"`
307
308Ignore the indentation of at-rule params.
309
310For example, with `2`.
311
312The following patterns are _not_ considered violations:
313
314<!-- prettier-ignore -->
315```css
316@media print,
317 (-webkit-min-device-pixel-ratio: 1.25),
318 (min-resolution: 120dpi) {
319}
320```
321
322#### `"value"`
323
324Ignore the indentation of values.
325
326For example, with `2`.
327
328The following patterns are _not_ considered violations:
329
330<!-- prettier-ignore -->
331```css
332a {
333 background-position: top left,
334top right,
335 bottom left,
336 bottom right;
337}
338```