[css-layer] What is the priority in this case?

[joekingTheThird3]

• please tag the issue title with the spec's shortname, like [css-foo]
  (this is the name from the spec URL, without a level number unless the issue is specific to that level).
  If you're proposing a new feature that doesn't obviously fit in an existing spec, skip this part — don't make something up.

• please be specific (in the title and issue) about what you want to change:
  “make it better” means different things to different people!

• please link to the spec section you're talking about, or at least the spec

<!-- layer statement   - we have an unused layer, but 2 following layers are used  (lgreen, lblue)-->

<!-- it looks like the @layer lred at rule is the winner but it is declared earliest , shouldn't the last win? lblue should win? -->

@layer l, lgreen, lblue;

.box{

width:100px;
height: 100px;
border: solid 1px #f00;

}
@layer lred{
.top{
background: red;
}

}

@layer lgreen{
.top{
background: green;
}

}

@layer lblue{
.top{
background: blue;
}

}

<!-- html -->
<div class="box top">
</div>

Why is the box red? firefox 103 and google chrome.

[Loirooriol]

lred is actually declared last, since @layer l, lgreen, lblue; declares these first.

See https://drafts.csswg.org/css-cascade-5/#layer-ordering

Cascade layers are sorted by the order in which they first are declared