useLayeredStyles (CSS)

Language CSS

Summary

Rule available since: v2.5.13
Diagnostic Category: lint/nursery/useLayeredStyles
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
        "useLayeredStyles": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce style rules to be defined within a cascade layer.

This rule reports style rules that are not contained within a cascade layer (@layer). Rules outside of a cascade layer (excluding !important) always take precedence over layered rules, making the cascade more difficult to predict and override.

Examples

Invalid

1
.my-style {
2
  color: red;
3
}

code-block.css:1:1 lint/nursery/useLayeredStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This style rule is defined outside of a cascade layer.
  
  > 1 │ .my-style {
      │ ^^^^^^^^^^^
  > 2 │   color: red;
  > 3 │ }
      │ ^
    4 │ 
  
  ℹ Style rules outside a cascade layer always take precedence over layered styles, which makes the cascade harder to predict and override.
  
  ℹ Wrap the style rule in a @layer block to control its place in the cascade.
  
  ℹ 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
@media (min-width: 600px) {
2
  .my-style {
3
    color: red;
4
  }
5
}

code-block.css:2:3 lint/nursery/useLayeredStyles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This style rule is defined outside of a cascade layer.
  
    1 │ @media (min-width: 600px) {
  > 2 │   .my-style {
      │   ^^^^^^^^^^^
  > 3 │     color: red;
  > 4 │   }
      │   ^
    5 │ }
    6 │ 
  
  ℹ Style rules outside a cascade layer always take precedence over layered styles, which makes the cascade harder to predict and override.
  
  ℹ Wrap the style rule in a @layer block to control its place in the cascade.
  
  ℹ 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 "foo.css";

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

  ⚠ This import is defined outside of a cascade layer.
  
  > 1 │ @import "foo.css";
      │  ^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Imported styles without a cascade layer always take precedence over layered styles, which makes the cascade harder to predict and override.
  
  ℹ Add the layer keyword after the import to control its place in the cascade.
  
  ℹ 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 {
2
  .my-style {
3
    color: red;
4
  }
5
}

1
@layer base {
2
  .my-style {
3
    color: red;
4
  }
5
}

1
@layer base {
2
  @media (min-width: 600px) {
3
    .my-style {
4
      color: red;
5
    }
6
  }
7
}

1
@import "foo.css" layer;

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

Options

`requireImportLayers`

Whether @import rules must specify a cascade layer.

When set to false, @import rules without a layer keyword are allowed.

Default: true

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useLayeredStyles": {
6
          "level": "on",
7
          "options": {
8
            "requireImportLayers": false
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

1
@import "foo.css";