noSelfNestedLayer (CSS)

Language CSS

Summary

Rule available since: v2.6.3
Diagnostic Category: lint/nursery/noSelfNestedLayer
This rule doesn’t have a fix.
The default severity of this rule is warning.

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noSelfNestedLayer": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow nesting a cascade layer inside a layer with the same name.

A layer name written inside an @layer block is relative to that block. Writing the enclosing layer’s name again doesn’t add styles to that layer: it creates a sublayer. For example, @layer base { @layer base { ... } } creates base.base, which has its own place in the cascade order. The styles still apply, so the mistake is easy to miss.

The rule also reports names that start with an enclosing layer’s name, such as @layer base.reset inside @layer base, which creates base.base.reset instead of base.reset.

In SCSS, a name that uses interpolation only matches the same interpolation, such as @layer #{$name} inside @layer #{$name}.

Examples

Invalid

1
@layer components {
2
  @layer components {
3
    .button {
4
      color: red;
5
    }
6
  }
7
}

code-block.css:2:10 lint/nursery/noSelfNestedLayer ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This layer repeats the name of an enclosing layer.
  
    1 │ @layer components {
  > 2 │   @layer components {
      │          ^^^^^^^^^^
    3 │     .button {
    4 │       color: red;
  
  ℹ The enclosing layer is declared here.
  
  > 1 │ @layer components {
      │        ^^^^^^^^^^
    2 │   @layer components {
    3 │     .button {
  
  ℹ Layer names inside a layer block are relative to it, so this creates a sublayer instead of adding to the enclosing layer. A sublayer has its own place in the cascade order.
  
  ℹ Rename the layer, or remove the nested @layer if you didn't mean to create a sublayer.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
@layer base {
2
  @layer base.reset {
3
    * {
4
      margin: 0;
5
    }
6
  }
7
}

code-block.css:2:10 lint/nursery/noSelfNestedLayer ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This layer repeats the name of an enclosing layer.
  
    1 │ @layer base {
  > 2 │   @layer base.reset {
      │          ^^^^^^^^^^
    3 │     * {
    4 │       margin: 0;
  
  ℹ The enclosing layer is declared here.
  
  > 1 │ @layer base {
      │        ^^^^
    2 │   @layer base.reset {
    3 │     * {
  
  ℹ Layer names inside a layer block are relative to it, so this creates a sublayer instead of adding to the enclosing layer. A sublayer has its own place in the cascade order.
  
  ℹ Rename the layer, or remove the nested @layer if you didn't mean to create a sublayer.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
@layer base {
2
  @layer reset {
3
    * {
4
      margin: 0;
5
    }
6
  }
7
}