Regels

Regels definiëren utility classes en de resulterende CSS. UnoCSS heeft veel ingebouwde regels maar maakt het ook gemakkelijk om aangepaste regels toe te voegen.

Statische regels

Met dit voorbeeld:

rules: [
  ['m-1', { margin: '0.25rem' }],
]

De volgende CSS wordt gegenereerd wanneer m-1 wordt gedetecteerd in de codebase van gebruikers:

.m-1 { margin: 0.25rem; }

Opmerking: De body syntax volgt CSS property syntax, bijv. font-weight in plaats van fontWeight. Als er een koppelteken - in de property naam is, moet het worden gequoteerd.

rules: [
  ['font-bold', { 'font-weight': 700 }],
]

Dynamische regels

Om het slimmer te maken, verander je de matcher naar een RegExp en de body naar een functie:

rules: [
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
]

Het eerste argument van de body functie is het RegExp match resultaat dat kan worden gedestructured om de matched groups te krijgen.

Bijvoorbeeld, met het volgende gebruik:

<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    Mijn Knop
  </button>
</div>

wordt de bijbehorende CSS gegenereerd:

.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }

Gefeliciteerd! Nu heb je je eigen krachtige atomaire CSS utilities. Geniet ervan!

CSS Regels Fallback

In gevallen waarin je CSS regels fallback wilt gebruiken om nieuwe CSS functies te gebruiken terwijl je ook kunt fallbacken om oude browsers te ondersteunen, kun je optioneel een 2D-array retourneren als de CSS representatie voor regels met dezelfde sleutels. Bijvoorbeeld:

rules: [
  [/^h-(\d+)dvh$/, ([_, d]) => {
    return [
      ['height', `${d}vh`],
      ['height', `${d}dvh`],
    ]
  }],
]

Wat ervoor zal zorgen dat h-100dvh genereert:

.h-100dvh { height: 100vh; height: 100dvh; }

Volgorde

UnoCSS respecteert de volgorde van de regels die je hebt gedefinieerd in de gegenereerde CSS. Latere hebben hogere prioriteit.

Bij het gebruik van dynamische regels, kan het meerdere tokens matchen. Standaard wordt de output van die gematcht onder een enkele dynamische regel alfabetisch gesorteerd binnen de groep.

Regels samenvoegen

Standaard zal UnoCSS CSS regels met dezelfde body samenvoegen om de CSS grootte te minimaliseren.

Bijvoorbeeld, <div class="m-2 hover:m2"> zal genereren:

.hover\:m2:hover,
.m-2 {
  margin: 0.5rem;
}

In plaats van twee aparte regels:

.hover\:m2:hover {
  margin: 0.5rem;
}
.m-2 {
  margin: 0.5rem;
}

Speciale symbolen

Sinds v0.61 ondersteunt UnoCSS speciale symbolen om aanvullende meta informatie te definiëren voor je gegenereerde CSS. Je kunt symbolen bereiken vanuit het tweede argument van de dynamische rule matcher functie.

Bijvoorbeeld:

rules: [
  [/^grid$/, ([, d], { symbols }) => {
    return {
      [symbols.parent]: '@supports (display: grid)',
      display: 'grid',
    }
  }],
]

Zal genereren:

@supports (display: grid) {
  .grid {
    display: grid;
  }
}

Beschikbare symbolen

• symbols.parent: De parent wrapper van de gegenereerde CSS regel (bijv. @supports, @media, etc.)
• symbols.selector: Een functie om de selector van de gegenereerde CSS regel te wijzigen (zie het voorbeeld hieronder)
• symbols.layer: Een string/functie/regex match die de UnoCSS laag van de gegenereerde CSS regel instelt
• symbols.variants: Een array van variant handler die worden toegepast op het huidige CSS object
• symbols.shortcutsNoMerge: Een boolean om het samenvoegen van de huidige regel in shortcuts uit te schakelen
• symbols.noMerge: Een boolean om het samenvoegen van de huidige regel in shortcuts uit te schakelen
• symbols.sort: Een nummer om de sorteervolgorde van het huidige CSS object te overschrijven

Multi-selector regels

Sinds v0.61 ondersteunt UnoCSS multi-selector via JavaScript Generator functions.

Bijvoorbeeld:

rules: [
  [/^button-(.*)$/, function* ([, color], { symbols }) {
    yield {
      background: color
    }
    yield {
      [symbols.selector]: selector => `${selector}:hover`,
      // https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
      background: `color-mix(in srgb, ${color} 90%, black)`
    }
  }],
]

Zal meerdere CSS regels genereren:

.button-red {
  background: red;
}
.button-red:hover {
  background: color-mix(in srgb, red 90%, black);
}

Volledig gecontroleerde regels

TIP

Dit is een geavanceerde functie, in de meeste situaties is het niet nodig.

Wanneer je echt geavanceerde regels nodig hebt die niet worden gedekt door de combinatie van Dynamische Regels en Varianten, biedt UnoCSS ook een manier om je volledige controle te geven om de CSS te genereren.

Het stelt je in staat om een string te retourneren van de dynamische rule's body functie die direct zal worden doorgegeven aan de gegenereerde CSS (dit betekent ook dat je zaken moet afhandelen zoals CSS escaping, variant toepassing, CSS constructie, enzovoort).

import { defineConfig, toEscapedSelector as e } from 'unocss'

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // weggooien van niet-overeenkomende regels
      if (name.includes('something'))
        return

      // als je wilt, kun je de variants voor deze regel uitschakelen
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // retourneer een string in plaats van een object
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* je kunt meerdere regels hebben */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* of media queries */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})