Правила

Правила определяют утилитарные классы и результирующий CSS. UnoCSS имеет множество встроенных правил и позволяет легко добавлять пользовательские правила.

Статические правила

С этим примером:

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

При обнаружении m-1 в кодовой базе пользователя будет сгенерирован следующий CSS:

.m-1 { margin: 0.25rem; }

Примечание: Синтаксис тела следует синтаксису CSS-свойств, например, font-weight вместо fontWeight. Если в имени свойства есть дефис -, его следует заключить в кавычки.

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

Динамические правила

Чтобы сделать его умнее, измените сопоставитель на RegExp, а тело - на функцию:

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

Первый аргумент функции тела - результат сопоставления RegExp, который можно деструктурировать для получения сопоставленных групп.

Например, при следующем использовании:

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

будет сгенерирован соответствующий CSS:

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

Поздравляем! Теперь у вас есть собственные мощные утилиты атомарного CSS. Наслаждайтесь!

Резервные CSS-правила

В случаях, когда вы хотите использовать новые возможности CSS с возможностью отката для поддержки старых браузеров, вы можете дополнительно вернуть двумерный массив в качестве CSS-представления для правил с одинаковыми ключами. Например:

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

Это сделает h-100dvh генерирующим:

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

Порядок

UnoCSS учитывает порядок правил, определенных в сгенерированном CSS. Последующие имеют более высокий приоритет.

При использовании динамических правил может совпадать несколько токенов. По умолчанию вывод сопоставленных в рамках одного динамического правила будет отсортирован в алфавитном порядке внутри группы.

Объединение правил

По умолчанию UnoCSS объединяет CSS-правила с одинаковым телом для минимизации размера CSS.

Например, <div class="m-2 hover:m2"> сгенерирует:

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

Вместо двух отдельных правил:

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

Специальные символы

Начиная с версии 0.61, UnoCSS поддерживает специальные символы для определения дополнительной метаинформации для сгенерированного CSS. Вы можете получить доступ к символам из второго аргумента функции сопоставления динамического правила.

Например:

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

Сгенерирует:

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

Доступные символы

• symbols.parent: Родительская обертка сгенерированного CSS-правила (например, @supports, @media и т.д.)
• symbols.selector: Функция для изменения селектора сгенерированного CSS-правила (см. пример ниже)
• symbols.layer: Строка/функция/результат сопоставления регулярного выражения, устанавливающая слой UnoCSS для сгенерированного CSS-правила
• symbols.variants: Массив обработчиков варианта, применяемых к текущему CSS-объекту
• symbols.shortcutsNoMerge: Логическое значение для отключения объединения текущего правила в сокращениях
• symbols.noMerge: Логическое значение для отключения объединения текущего правила в сокращениях
• symbols.sort: Число для перезаписи порядка сортировки текущего CSS-объекта

Многоселекторные правила

Начиная с версии 0.61, UnoCSS поддерживает многоселекторность через генераторные функции JavaScript.

Например:

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

Сгенерирует несколько CSS-правил:

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

Полностью контролируемые правила

TIP

Это расширенная функция, в большинстве ситуаций она не понадобится.

Когда вам действительно нужны сложные правила, не охваченные комбинацией Динамических правил и Вариантов, UnoCSS также предоставляет способ полного контроля над генерацией CSS.

Это позволяет возвращать строку из функции тела динамического правила, которая будет напрямую передана в сгенерированный CSS (это также означает, что вам нужно позаботиться о таких вещах, как экранирование CSS, применение варианта, построение CSS и т.д.).

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

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // отклонить несоответствующие правила
      if (name.includes('something'))
        return

      // если хотите, можете отключить варианты для этого правила
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // вернуть строку вместо объекта
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* вы можете иметь несколько правил */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* или медиа-запросы */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})