README.md

No anonymous layers

Disallow anonymous (unnamed) @layer blocks.

@layer reset, utilities;

@layer {
/* ---^ */
  * {
    margin: 0;
  }
}

An anonymous @layer block has no name and cannot be referenced or extended later. This makes CSS harder to maintain and reason about, as the layer cannot be ordered relative to other layers or extended in other stylesheets.

Options

true

The following are considered problems:

@layer { * { margin: 0; } }

@import url(test.css) layer;

@import url(test.css) layer (min-width: 1000px);

The following patterns are not considered problems:

@layer reset { * { margin: 0; } }

@layer reset, utilities;
@layer reset { * { margin: 0; } }
@layer utilities { .u-flex { display: flex; } }

@import url(test.css) layer(mobile) supports(display: grid);

Prior art

• CSS Cascade 5 spec — @layer ordering and naming