useNamedLayer

Summary

Rule available since: v2.5.9
Diagnostic Category: lint/nursery/useNamedLayer
This rule doesn’t have a fix.
The default severity of this rule is warning.
Sources:
- Inspired from css/use-layers

How to configure

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

Description

Disallow anonymous cascade layers.

A cascade layer created with @layer { ... } or imported with @import "..." layer has no name. Anonymous layers get their own place in the cascade order, but because they cannot be referred to by name, no later rule can add styles to them or reorder them. This makes the cascade harder to reason about and prevents reusing the layer.

Give every layer a name so it can be referenced, appended to, and ordered explicitly through a @layer statement.

Examples

Invalid

1
@layer {
2
  a {
3
    color: red;
4
  }
5
}

code-block.css:1:2 lint/nursery/useNamedLayer ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Missing cascade layer name.
  
  > 1 │ @layer {
      │  ^^^^^^^
  > 2 │   a {
  > 3 │     color: red;
  > 4 │   }
  > 5 │ }
      │ ^
    6 │ 
  
  ℹ An anonymous layer cannot be referenced, so later rules cannot append to it or reorder it.
  
  ℹ Give the layer a name, for example @layer base { … }.
  
  ℹ 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
@import "theme.css" layer;

code-block.css:1:21 lint/nursery/useNamedLayer ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Missing cascade layer name.
  
  > 1 │ @import “theme.css” layer;
      │                     ^^^^^
    2 │ 
  
  ℹ An anonymous layer cannot be referenced, so later rules cannot append to it or reorder it.
  
  ℹ Give the layer a name, for example @layer base { … }.
  
  ℹ 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
  a {
3
    color: red;
4
  }
5
}

1
@import "theme.css" layer(base);