Variants

Varianty vám umožňujú aplikovať niektoré variácie na vaše existujúce pravidlá, ako napríklad variant hover: z Tailwind CSS.

Príklad

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // odrezať prefix `hover:` a odovzdať ďalším variantom a pravidlám
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher riadi, kedy je variant povolený. Ak je návratová hodnota reťazec, bude použitá ako selektor na zhodu s pravidlami.
• selector poskytuje možnosť prispôsobiť generovaný CSS selektor.

Under the hood

Poďme sa pozrieť na to, čo sa deje pri zhode pre hover:m-2:

• hover:m-2 sa extrahuje z používateľských použití
• hover:m-2 sa odosiela všetkým variantom na zhodu
• hover:m-2 je zhodný naším variantom a vracia m-2
• výsledok m-2 sa použije na ďalšie kolo zhody variantov
• ak nie je zhodný žiadny iný variant, m-2 sa potom použije na zhodu s pravidlami
• naše prvé pravidlo sa zhoduje a generuje .m-2 { margin: 0.5rem; }
• nakoniec aplikujeme transformáciu našich variantov na vygenerované CSS. V tomto prípade sme pridali :hover na začiatok hooku selector

Výsledkom bude vygenerované nasledujúce CSS:

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

S týmto môžeme mať m-2 aplikované iba vtedy, keď používatelia prejdú kurzorom nad prvkom.

Going further

Systém variantov je veľmi výkonný a nie je možné ho plne pokryť v tejto príručke, môžete si pozrieť implementáciu predvoleného presetu a zistiť viac pokročilých použití.