Skip to main content

at-rule-empty-line-before

Require or disallow an empty line before at-rules.

a {}
/* ← */
@media {} /* ↑ */
/** ↑
* This line */

This rule ignores:

  • at-rules that are the very first node in the source
  • @import in Less.

The fix option can automatically fix all of the problems reported by this rule.

Options

string: "always"|"never"

"always"

There must always be an empty line before at-rules.

The following patterns are considered problems:

a {} @media {}
a {}
@media {}

The following patterns are not considered problems:

a {}

@media {}

"never"

There must never be an empty line before at-rules.

The following patterns are considered problems:

a {}

@media {}

The following patterns are not considered problems:

a {} @media {}
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 problems:

@charset "UTF-8";

@import url(x.css);
@import url(y.css);

@media (min-width: 100px) {}
@media (min-width: 200px) {}
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 problems:

a {

@extend foo;
color: pink;
}

b {
color: pink;

@extend foo;
}

The following patterns are not considered problems:

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 problems:

@charset "UTF-8";

@import url(x.css);
@import url(y.css);
@charset "UTF-8";

@import url(x.css); /* comment */
@import url(y.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 problems:

@import url(x.css);

@import url(y.css);

@media print {}

The following patterns are not considered problems:

@import url(x.css);
@import url(y.css);

@media print {}
@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 problems:

a {

@extend foo;
color: pink;
}

b {
color: pink;
@extend foo;
}

The following patterns are not considered problems:

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 problems:

/* comment */
@media {}
/* comment */

@media {}
@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 problems:

@supports {
@media {}

@media {}
}

"inside-block"

Ignore at-rules that are inside a block.

For example, with "always":

The following patterns are not considered problems:

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 problems:


@charset "UTF-8";

@import url(x.css);
@import url(y.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 problems:

@import url(x.css);

@import url(y.css);

@media print {}
@import url(x.css);
@import url(y.css);

@media print {}

ignoreAtRules: ["array", "of", "at-rules"]

Ignore specified at-rules.

For example, with "always".

Given:

["import"]

The following patterns are not considered problems:

@charset "UTF-8";
@import {}