393 lines
5.6 KiB
Markdown
393 lines
5.6 KiB
Markdown
|
|
# at-rule-empty-line-before
|
||
|
|
|
||
|
|
Require or disallow an empty line before at-rules.
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {}
|
||
|
|
/* ← */
|
||
|
|
@media {} /* ↑ */
|
||
|
|
/** ↑
|
||
|
|
* This line */
|
||
|
|
```
|
||
|
|
|
||
|
|
This rule ignores:
|
||
|
|
|
||
|
|
- at-rules that are the very first node in the source
|
||
|
|
- `@import` in Less.
|
||
|
|
|
||
|
|
The `--fix` option on the [command line](../../../docs/user-guide/cli.md#autofixing-errors) can automatically fix all of the problems reported by this rule. We recommend to enable [`indentation`](../indentation/README.md) rule for better autofixing results with this rule.
|
||
|
|
|
||
|
|
## Options
|
||
|
|
|
||
|
|
`string`: `"always"|"never"`
|
||
|
|
|
||
|
|
### `"always"`
|
||
|
|
|
||
|
|
There *must always* be an empty line before at-rules.
|
||
|
|
|
||
|
|
The following patterns are considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {} @media {}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {}
|
||
|
|
@media {}
|
||
|
|
```
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {}
|
||
|
|
|
||
|
|
@media {}
|
||
|
|
```
|
||
|
|
|
||
|
|
### `"never"`
|
||
|
|
|
||
|
|
There *must never* be an empty line before at-rules.
|
||
|
|
|
||
|
|
The following patterns are considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {}
|
||
|
|
|
||
|
|
@media {}
|
||
|
|
```
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {} @media {}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {}
|
||
|
|
@media {}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Optional secondary options
|
||
|
|
|
||
|
|
### `except: ["after-same-name", "inside-block", "blockless-after-same-name-blockless", "blockless-after-blockless", "first-nested"]`
|
||
|
|
|
||
|
|
#### `"after-same-name"`
|
||
|
|
|
||
|
|
Reverse the primary option for at-rules that follow another at-rule with the same name.
|
||
|
|
|
||
|
|
This means that you can group your at-rules by name.
|
||
|
|
|
||
|
|
For example, with `"always"`:
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
@charset "UTF-8";
|
||
|
|
|
||
|
|
@import url(x.css);
|
||
|
|
@import url(y.css);
|
||
|
|
|
||
|
|
@media (min-width: 100px) {}
|
||
|
|
@media (min-width: 200px) {}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
|
||
|
|
@extends .foo;
|
||
|
|
@extends .bar;
|
||
|
|
|
||
|
|
@include x;
|
||
|
|
@include y {}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### `"inside-block"`
|
||
|
|
|
||
|
|
Reverse the primary option for at-rules that are inside a block.
|
||
|
|
|
||
|
|
For example, with `"always"`:
|
||
|
|
|
||
|
|
The following patterns are considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
|
||
|
|
@extend foo;
|
||
|
|
color: pink;
|
||
|
|
}
|
||
|
|
|
||
|
|
b {
|
||
|
|
color: pink;
|
||
|
|
|
||
|
|
@extend foo;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
@extend foo;
|
||
|
|
color: pink;
|
||
|
|
}
|
||
|
|
|
||
|
|
b {
|
||
|
|
color: pink;
|
||
|
|
@extend foo;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### `"blockless-after-same-name-blockless"`
|
||
|
|
|
||
|
|
Reverse the primary option for blockless at-rules that follow another blockless at-rule with the same name.
|
||
|
|
|
||
|
|
This means that you can group your blockless at-rules by name.
|
||
|
|
|
||
|
|
Shared-line comments do not affect this option.
|
||
|
|
|
||
|
|
For example, with `"always"`:
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
@charset "UTF-8";
|
||
|
|
|
||
|
|
@import url(x.css);
|
||
|
|
@import url(y.css);
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
@charset "UTF-8";
|
||
|
|
|
||
|
|
@import url(x.css); /* comment */
|
||
|
|
@import url(y.css);
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
|
||
|
|
@extends .foo;
|
||
|
|
@extends .bar;
|
||
|
|
|
||
|
|
@include loop;
|
||
|
|
@include doo;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### `"blockless-after-blockless"`
|
||
|
|
|
||
|
|
Reverse the primary option for blockless at-rules that follow another blockless at-rule.
|
||
|
|
|
||
|
|
Shared-line comments do not affect this option.
|
||
|
|
|
||
|
|
For example, with `"always"`:
|
||
|
|
|
||
|
|
The following patterns are considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
@import url(x.css);
|
||
|
|
|
||
|
|
@import url(y.css);
|
||
|
|
|
||
|
|
@media print {}
|
||
|
|
```
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
@import url(x.css);
|
||
|
|
@import url(y.css);
|
||
|
|
|
||
|
|
@media print {}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
@import url(x.css); /* comment */
|
||
|
|
@import url(y.css);
|
||
|
|
|
||
|
|
@media print {}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### `"first-nested"`
|
||
|
|
|
||
|
|
Reverse the primary option for at-rules that are nested and the first child of their parent node.
|
||
|
|
|
||
|
|
For example, with `"always"`:
|
||
|
|
|
||
|
|
The following patterns are considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
|
||
|
|
@extend foo;
|
||
|
|
color: pink;
|
||
|
|
}
|
||
|
|
|
||
|
|
b {
|
||
|
|
color: pink;
|
||
|
|
@extend foo;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
@extend foo;
|
||
|
|
color: pink;
|
||
|
|
}
|
||
|
|
|
||
|
|
b {
|
||
|
|
color: pink;
|
||
|
|
|
||
|
|
@extend foo;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### `ignore: ["after-comment", "first-nested", "inside-block", "blockless-after-same-name-blockless", "blockless-after-blockless"]`
|
||
|
|
|
||
|
|
#### `"after-comment"`
|
||
|
|
|
||
|
|
Ignore at-rules that follow a comment.
|
||
|
|
|
||
|
|
Shared-line comments do not trigger this option.
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
/* comment */
|
||
|
|
@media {}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
/* comment */
|
||
|
|
|
||
|
|
@media {}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media {} /* comment */
|
||
|
|
|
||
|
|
@media {}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### `"first-nested"`
|
||
|
|
|
||
|
|
Ignore at-rules that are nested and the first child of their parent node.
|
||
|
|
|
||
|
|
For example, with `"always"`:
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
@supports {
|
||
|
|
@media {}
|
||
|
|
|
||
|
|
@media {}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### `"inside-block"`
|
||
|
|
|
||
|
|
Ignore at-rules that are inside a block.
|
||
|
|
|
||
|
|
For example, with `"always"`:
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
@extend foo;
|
||
|
|
color: pink;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
|
||
|
|
@extend foo;
|
||
|
|
color: pink;
|
||
|
|
}
|
||
|
|
|
||
|
|
b {
|
||
|
|
color: pink;
|
||
|
|
@extend foo;
|
||
|
|
}
|
||
|
|
|
||
|
|
b {
|
||
|
|
color: pink;
|
||
|
|
|
||
|
|
@extend foo;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### `"blockless-after-same-name-blockless"`
|
||
|
|
|
||
|
|
Ignore blockless at-rules that follow another blockless at-rule with the same name.
|
||
|
|
|
||
|
|
This means that you can group your blockless at-rules by name.
|
||
|
|
|
||
|
|
For example, with `"always"`:
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
|
||
|
|
@charset "UTF-8";
|
||
|
|
|
||
|
|
@import url(x.css);
|
||
|
|
@import url(y.css);
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
|
||
|
|
@extends .foo;
|
||
|
|
@extends .bar;
|
||
|
|
|
||
|
|
@include loop;
|
||
|
|
@include doo;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### `"blockless-after-blockless"`
|
||
|
|
|
||
|
|
Ignore blockless at-rules that follow another blockless at-rule.
|
||
|
|
|
||
|
|
For example, with `"always"`:
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
@import url(x.css);
|
||
|
|
|
||
|
|
@import url(y.css);
|
||
|
|
|
||
|
|
@media print {}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
@import url(x.css);
|
||
|
|
@import url(y.css);
|
||
|
|
|
||
|
|
@media print {}
|
||
|
|
```
|
||
|
|
|
||
|
|
### `ignoreAtRules: ["array", "of", "at-rules"]`
|
||
|
|
|
||
|
|
Ignore specified at-rules.
|
||
|
|
|
||
|
|
For example, with `"always"`.
|
||
|
|
|
||
|
|
Given:
|
||
|
|
|
||
|
|
```js
|
||
|
|
["import"]
|
||
|
|
```
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
@charset "UTF-8";
|
||
|
|
@import {}
|
||
|
|
```
|