Layer

We can use or target layer . For Example.


<button class="@base-all-unset" >Label</button>


@layer base{
     .\@base-all-unset{all:unset}
}

We can also group for specific layer. For Example.


<button class="b-0 color-fff bgc-blue @theme-[c-gray,border-radius-4px,bgc-skyBlue]" >Label</button>


<div class="@base-[data-state=open][display-flex,left-0]" >...</div>

we can use multiple queries in a single class name by using ’@[query-prefix,query-prefix]-acss’.


<button class="@[base,xs][b-0,color-fff,bgc-blue]--as-btn --hover-[c-gray,border-radius-4px,bgc-skyBlue]--as-btn btn" >Label</button>


<div class="@[xs,base][data-state=open][display-flex,left-0]--as-active active" >...</div>

aliascss will respect the order of query while generating css.

Creating Custom Layer

we can also create custom layer by using media properties of aliascss.config.js file.

aliascss.config.js


const config={
   ...
   media:{
       prefix:{
           '@customLayer':'@layer customLayer',
       }
   }
   ...
}
export default config;