Couches

L'ordre du CSS affectera leurs priorités. Bien que le moteur conserve l'ordre des règles, il se peut que vous souhaitiez parfois regrouper certains utilitaires pour avoir un contrôle explicite sur leur ordre.

Utilisation

Contrairement à Tailwind CSS qui propose trois couches fixes (base, components, utilities), UnoCSS vous permet de définir les couches comme vous le souhaitez. Pour définir la couche, vous pouvez passer les métadonnées comme troisième élément de vos règles :

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // si vous omettez la couche, ce sera `default`
  ['btn', { padding: '4px' }],
]

Cela générera :

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

La couche peut aussi être définie sur chaque preflight :

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

Ordre

Vous pouvez contrôler l'ordre des couches ainsi :

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

Les couches sans ordre spécifié seront triées par ordre alphabétique.

Lorsque vous souhaitez avoir votre propre CSS entre les couches, vous pouvez mettre à jour votre module d'entrée :

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

// les couches qui ne sont pas 'components' et 'utilities' iront ici par défaut
import 'uno.css'

// votre propre CSS
import './my-custom.css'

// la couche "utilities" aura la priorité la plus élevée
import 'uno:utilities.css'

Couches CSS Cascade

Vous pouvez générer des CSS Cascade Layers avec :

outputToCssLayers: true

Vous pouvez changer les noms des couches CSS avec :

outputToCssLayers: {
  cssLayerName: (layer) => {
    // La couche par défaut sera sortie dans la couche CSS "utilities".
    if (layer === 'default')
      return 'utilities'

    // La couche shortcuts sera sortie dans la sous-couche "shortcuts" de la couche CSS "utilities".
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // Toutes les autres couches utiliseront simplement leur nom comme nom de couche CSS.
  }
}

Couches via les variantes

Les couches peuvent être créées à l'aide de variantes.

uno-layer-<name>: peut être utilisé pour créer une couche 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>: peut être utilisé pour créer une 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; } }