Support for the `@layer` rule
Author: rylydouCreated Nov 8, 2023Updated Sep 22, 2025
To reproduce:
@layer reset, preflights, layout, atom // This doesn't work: compile error at `,`
// These work fine because of how stylus handles unknown @-rules
@layer reset
@import 'reset'
@layer preflights
@import 'vars'
@import 'common'
@layer layout
@import 'layout'
@layer atom
@import 'atom'Current behavior:
Cannot compile @layer reset, preflights, layout, atom because of an unexpected character.
Can be worked around by using a css literal:
@css {
@layer reset, preflights, layout, atom;
}Expected behavior:
It should be able to compile like in this example.
Environment information:
stylusversion:0.61.0nodejsversion:v18.18.2
Sorry it's a super nitpiky issue because the workaround is super simple. I just thought it should be supported thanks to how much of a lifesaver css layers are by ignoring all specificity.
Source: stylus/stylus