New Rule: no-unlayered-styles

[mayank99]

Rule details

Flag any CSS rules that are outside a @layer block.

What type of rule is this?

Warns about a potential problem

Example code

p {
  color: red;
}

@media (width > 500px) {
  .box {
    padding: 12px;
  }
}

Participation

• I am willing to submit a pull request to implement this rule.

Additional comments

When working with cascade layers, unlayered styles are usually a mistake. It is easy to forget to wrap the styles in @layer, which is exactly the kind of thing a linter should help with.

This rule probably should be opt-in, because cascade layers aren't being widely used yet.