Layers

Poradie CSS bude mať vplyv na ich priority. Zatiaľ čo engine zachová poradie pravidiel, niekedy môžete chcieť zoskupiť niektoré utility a mať explicitnú kontrolu nad ich poradím.

Použitie

Na rozdiel od Tailwind CSS, ktorý ponúka tri pevné vrstvy (base, components, utilities), UnoCSS vám umožňuje definovať vrstvy podľa vašich predstáv. Ak chcete nastaviť vrstvu, môžete odovzdať metadáta ako tretiu položku vašich pravidiel:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // keď vynecháte vrstvu, bude to `default`
  ['btn', { padding: '4px' }],
]

Toto vygeneruje:

/* layer: default */
.btn { padding: 4px; }
/* layer: utilities */
.m-2 { margin: 0.5rem; }

Vrstva môže byť nastavená aj v každom prefligte:

preflights: [
  {
    layer: 'my-layer',
    getCSS: async () => (await fetch('my-style.css')).text(),
  },
]

Ordering

Poradie vrstiev môžete ovládať pomocou:

layers: {
  'components': -1,
  'default': 1,
  'utilities': 2,
  'my-layer': 3,
}

Vrstvy bez určeného poradia budú zoradené abecedne.

Ak chcete mať vlastné CSS medzi vrstvami, môžete aktualizovať vstupný modul:

// 'uno:[layer-name].css'
import 'uno:components.css'

// vrstvy, ktoré nie sú 'components' a 'utilities', sa vrátia sem
import 'uno.css'

// vaše vlastné CSS
import './my-custom.css'

// vrstva "utilities" bude mať najvyššiu prioritu
import 'uno:utilities.css'

CSS Cascade Layers

CSS Cascade Layers môžete výstupovať pomocou:

outputToCssLayers: true

Názvy CSS vrstiev môžete zmeniť pomocou:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // Predvolená vrstva bude výstupovať do CSS vrstvy "utilities".
    if (layer === 'default')
      return 'utilities'

    // Vrstva skratiek bude výstupovať do podvrstvy "shortcuts" CSS vrstvy "utilities".
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // Všetky ostatné vrstvy budú používať svoj názov ako názov CSS vrstvy.
  }
}

Vrstvy používajúce varianty

Vrstvy môžu byť vytvorené pomocou variantov.

uno-layer-<name>: sa môže použiť na vytvorenie vrstvy UnoCSS.

<p class="uno-layer-my-layer:text-xl">text</p>

/* layer: my-layer */
.uno-layer-my-layer\:text-xl{ font-size:1.25rem; line-height:1.75rem; }

layer-<name>: sa môže použiť na vytvorenie CSS @layer.

<p class="layer-my-layer:text-xl">text</p>

/* layer: default */
@layer my-layer{ .layer-my-layer\:text-xl{ font-size:1.25rem; line-height:1.75rem; } }