Reguły

Reguły definiują klasy narzędzi i wynikowy CSS. UnoCSS ma wiele wbudowanych reguł, ale pozwala również łatwo dodawać niestandardowe reguły.

Reguły statyczne

Z tym przykładem:

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

Następujący CSS zostanie wygenerowany, gdy m-1 zostanie wykryty w kodzie użytkownika:

.m-1 { margin: 0.25rem; }

Uwaga: Składnia ciała podąża za składnią właściwości CSS, np. font-weight zamiast fontWeight. Jeśli w nazwie właściwości jest myślnik -, powinien być cytowany.

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

Reguły dynamiczne

Aby uczynić to mądrzejszym, zmień matcher na RegExp, a ciało na funkcję:

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

Pierwszy argument funkcji body to wynik dopasowania RegExp, który można destrukturyzować, aby uzyskać dopasowane grupy.

Na przykład, z następującym użyciem:

<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    My Button
  </button>
</div>

odpowiedni CSS zostanie wygenerowany:

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

Gratulacje! Teraz masz własne potężne narzędzia atomic CSS. Ciesz się!

Fallback reguł CSS

W przypadkach, gdy możesz chcieć wykorzystać fallback reguł CSS, aby używać nowych funkcji CSS, jednocześnie mając możliwość fallbacku dla starych przeglądarek, możesz opcjonalnie zwrócić tablicę 2D jako reprezentację CSS dla reguł z tymi samymi kluczami. Na przykład:

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

Co sprawi, że h-100dvh wygeneruje:

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

Kolejność

UnoCSS respektuje kolejność zdefiniowanych reguł w generowanym CSS. Późniejsze mają wyższy priorytet.

Podczas używania reguł dynamicznych, może pasować wiele tokenów. Domyślnie, wyniki tych dopasowań w ramach pojedynczej reguły dynamicznej będą sortowane alfabetycznie w grupie.

Łączenie reguł

Domyślnie, UnoCSS łączy reguły CSS z tym samym ciałem, aby zminimalizować rozmiar CSS.

Na przykład, <div class="m-2 hover:m2"> wygeneruje:

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

Zamiast dwóch oddzielnych reguł:

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

Specjalne symbole

Od wersji v0.61, UnoCSS obsługuje specjalne symbole do definiowania dodatkowych meta informacji dla generowanego CSS. Możesz uzyskać dostęp do symbolów z drugiego argumentu funkcji matchera reguły dynamicznej.

Na przykład:

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

Wygeneruje:

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

Dostępne symbole

• symbols.parent: Wrapper nadrzędny wygenerowanej reguły CSS (np. @supports, @media itp.)
• symbols.selector: Funkcja do modyfikowania selektora wygenerowanej reguły CSS (zobacz przykład poniżej)
• symbols.layer: Ciąg/funkcja/dopasowanie regex, który ustawia warstwę UnoCSS wygenerowanej reguły CSS
• symbols.variants: Tablica obsługi wariantów, które są stosowane do bieżącego obiektu CSS
• symbols.shortcutsNoMerge: Wartość logiczna, aby wyłączyć łączenie bieżącej reguły w skrótach
• symbols.noMerge: Wartość logiczna, aby wyłączyć łączenie bieżącej reguły w skrótach
• symbols.sort: Liczba do nadpisywania kolejności sortowania bieżącego obiektu CSS

Reguły z wieloma selektorami

Od wersji v0.61, UnoCSS obsługuje wiele selektorów poprzez funkcje generatora JavaScript.

Na przykład:

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)`
    }
  }],
]

Wygeneruje wiele reguł CSS:

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

W pełni kontrolowane reguły

TIP

To jest zaawansowana funkcja, w większości sytuacji nie jest potrzebna.

When you really need some advanced rules that aren't covered by the combination of Dynamic Rules and Variants, UnoCSS also provides a way to give you full control to generate the CSS.

It allows you to return a string from the dynamic rule's body function which will be directly passed to the generated CSS (this also means you need to take care of things like CSS escaping, variant applying, CSS constructing, and so on).

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

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

      // if you want, you can disable the variants for this rule
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // return a string instead of an object
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* you can have multiple rules */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* or media queries */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})