Lager

Ordningen på CSS kommer att påverka deras prioriteter. Medan motorn kommer att behålla regelordningen, kan du ibland vilja gruppera vissa verktyg för att ha explicit kontroll över deras ordning.

Användning

Till skillnad från Tailwind CSS som erbjuder tre fixerade lager (base, components, utilities), låter UnoCSS dig definiera lagren som du vill. För att ställa in lagret kan du skicka metadata som det tredje objektet i dina regler:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // när du utelämnar lagret kommer det att vara `default`
  ['btn', { padding: '4px' }],
]

Detta kommer att generera:

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

Lager kan också ställas in för varje preflight:

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

Ordning

Du kan kontrollera ordningen på lager genom:

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

Lager utan specificerad ordning kommer att sorteras alfabetiskt.

När du vill ha din anpassade CSS mellan lager kan du uppdatera din ingångsmodul:

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

// lager som inte är 'components' och 'utilities' kommer att falla tillbaka till hit
import 'uno.css'

// din egen CSS
import './my-custom.css'

// "utilities" lager kommer att ha högsta prioritet
import 'uno:utilities.css'

CSS Cascade Layers

Du kan mata ut CSS Cascade Layers genom:

outputToCssLayers: true

Du kan ändra CSS-lagernamnen med:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // Standardlagret kommer att matas ut till "utilities" CSS-lager.
    if (layer === 'default')
      return 'utilities'

    // Genvägslagret kommer att matas ut till "shortcuts" underlagret av "utilities" CSS-lager.
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // Alla andra lager kommer bara att använda sitt namn som CSS-lagernamn.
  }
}

Lager med varianter

Lager kan skapas med varianter.

uno-layer-<name>: kan användas för att skapa ett UnoCSS-lager.

<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>: kan användas för att skapa ett 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; } }