CSS Layers plugin
https://unocss.dev/config/layers#layers-using-variants
Would be nice to have this, it helps a lot to override component styles when building SPA.
Exmample in UnoCSS:
ul-2:(bg-blue-500 c-white-000)
and setup:
let v_layers = new Array(10).fill(null).reduce((p, _, i) => ({ ...p, [`v${i + 1}`]: i + 1 }), {})
defineConfig({
layers: v_layers,
outputToCssLayers: true, // requried for uno-layer variant
sortLayers(layers) {
layers.sort((l1, l2) => {
if (l1[0] === "v" && l2[0] === "v") {
return parseInt(l1.slice(1)) - parseInt(l2.slice(1))
}
return 0
})
return layers
},
variants: [
{
name: 'uno-layer',
match(matcher, ctx) {
let variant = variantGetParameter('ul-', matcher, ctx.generator.config.separators)
if (!variant) return
let [match, rest] = variant
let layer = "v" + (h.bracket(match) ?? match)
if (layer) return { matcher: rest, layer }
},
}
],
// ...
})
Edited by MrFoxPro