Livelli

L'ordine del CSS influenzerà le loro priorità. Mentre il motore mantiene l'ordine delle regole, a volte potresti voler raggruppare alcune utility per avere un controllo esplicito del loro ordine.

Utilizzo

A differenza di Tailwind CSS che offre tre livelli fissi (base, components, utilities), UnoCSS ti permette di definire i livelli come vuoi. Per impostare il livello, puoi passare i metadati come terzo elemento delle tue regole:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // quando ometti il livello, sarà `default`
  ['btn', { padding: '4px' }],
]

Questo genererà:

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

Il livello può anche essere impostato su ogni preflight:

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

Ordinamento

Puoi controllare l'ordine dei livelli con:

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

I livelli senza ordine specificato verranno ordinati alfabeticamente.

Quando vuoi avere il tuo CSS personalizzato tra i livelli, puoi aggiornare il tuo modulo di ingresso:

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

// i livelli che non sono 'components' e 'utilities' cadranno qui
import 'uno.css'

// il tuo CSS personalizzato
import './my-custom.css'

// il livello "utilities" avrà la priorità più alta
import 'uno:utilities.css'

CSS Cascade Layers

Puoi emettere CSS Cascade Layers con:

outputToCssLayers: true

Puoi cambiare i nomi dei CSS Layer con:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // Il livello predefinito verrà emesso al livello CSS "utilities".
    if (layer === 'default')
      return 'utilities'

    // Il livello shortcuts verrà emesso al sottolivello "shortcuts" del livello CSS "utilities".
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // Tutti gli altri livelli useranno semplicemente il loro nome come nome del livello CSS.
  }
}

Livelli usando varianti

I livelli possono essere creati usando varianti.

uno-layer-<name>: può essere usato per creare un livello 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>: può essere usato per creare un 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; } }