custom-property-empty-line-before

Require or disallow an empty line before custom properties.

a {
  top: 10px;
                          /* ← */
  --foo: pink;            /* ↑ */
}                         /* ↑ */
/**                          ↑
 *                   This line */

Use this rule to enforce a convention. For example, require an empty line before the first custom property, so that custom properties stand apart from other declarations.

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

This rule doesn't have any message arguments.

Options

"always"

{
  "custom-property-empty-line-before": "always"
}

The following patterns are considered problems:

a {
  top: 10px;
  --foo: pink;
  --bar: red;
}

The following patterns are not considered problems:

a {
  top: 10px;

  --foo: pink;

  --bar: red;
}

"never"

{
  "custom-property-empty-line-before": "never"
}

The following patterns are considered problems:

a {
  top: 10px;

  --foo: pink;

  --bar: red;
}

a {

  --foo: pink;
  --bar: red;
}

The following patterns are not considered problems:

a {
  top: 10px;
  --foo: pink;
  --bar: red;
}

a {
  --foo: pink;
  --bar: red;
}

Optional secondary options

except

{ "except": ["array", "of", "options"] }

"after-block"

Reverse the primary option for custom properties that follow a block.

Given:

{
  "custom-property-empty-line-before": ["never", { "except": ["after-block"] }]
}

The following patterns are not considered problems:

a {
  a {}

  --foo: red;
}

a {
  @media all {}

  --foo: red;
}

"after-comment"

Reverse the primary option for custom properties that follow a comment.

Shared-line comments do not trigger this option.

Given:

{
  "custom-property-empty-line-before": [
    "always",
    { "except": ["after-comment"] }
  ]
}

The following patterns are considered problems:

a {

  --foo: pink;
  /* comment */

  --bar: red;
}

a {

  --foo: pink; /* comment */
  --bar: red;
}

The following patterns are not considered problems:

a {

  --foo: pink;
  /* comment */
  --bar: red;
}

a {

  --foo: pink; /* comment */

  --bar: red;
}

"after-custom-property"

Reverse the primary option for custom properties that follow another custom property.

Shared-line comments do not affect this option.

Given:

{
  "custom-property-empty-line-before": [
    "always",
    { "except": ["after-custom-property"] }
  ]
}

The following patterns are considered problems:

a {

  --foo: pink;

  --bar: red;
}

a {

  --foo: pink; /* comment */

  --bar: red;
}

The following patterns are not considered problems:

a {

  --foo: pink;
  --bar: red;
}

a {

  --foo: pink; /* comment */
  --bar: red;
}

"first-nested"

Reverse the primary option for custom properties that are nested and the first child of their parent node.

Given:

{
  "custom-property-empty-line-before": [
    "always",
    { "except": ["first-nested"] }
  ]
}

The following patterns are considered problems:

a {

  --foo: pink;

  --bar: red;
}

The following patterns are not considered problems:

a {
  --foo: pink;

  --bar: red;
}

ignore

{ "ignore": ["array", "of", "options"] }

"after-comment"

Ignore custom properties that follow a comment.

Given:

{
  "custom-property-empty-line-before": [
    "always",
    { "ignore": ["after-comment"] }
  ]
}

The following patterns are not considered problems:

a {
  /* comment */
  --foo: pink;
}

"after-custom-property"

Ignore custom properties that follow another custom property.

Given:

{
  "custom-property-empty-line-before": [
    "always",
    { "ignore": ["after-custom-property"] }
  ]
}

The following patterns are not considered problems:

a {

  --foo: pink;
  --bar: red;
}

"first-nested"

Ignore custom properties that are nested and the first child of their parent node.

Given:

{
  "custom-property-empty-line-before": [
    "always",
    { "ignore": ["first-nested"] }
  ]
}

The following patterns are not considered problems:

a {
  --foo: pink;

  --bar: red;
}

"inside-single-line-block"

Ignore custom properties that are inside single-line blocks.

Given:

{
  "custom-property-empty-line-before": [
    "always",
    { "ignore": ["inside-single-line-block"] }
  ]
}

The following patterns are not considered problems:

a { --foo: pink; --bar: red; }