Skip to content

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
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information