Автодополнение

Утилиты автодополнения для UnoCSS: @unocss/autocomplete. Встроены в playground и расширение VS Code.

Использование

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

Статические правила будут работать без дополнительной конфигурации.

rules: [
  ['flex', { display: 'flex' }]
]

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

Для динамических правил вы можете предоставить дополнительный объект meta к правилу и указать шаблон автодополнения.

rules: [
  [
    /^m-(\d)$/,
    ([, d]) => ({ margin: `${d / 4}rem` }),
    { autocomplete: 'm-<num>' }, // <-- это
  ],
]

Шаблон использует простой DSL для указания вариантов автодополнения. Синтаксис следующий:

• (...|...): логические группы OR с использованием | в качестве разделителя. Будет использоваться как варианты, когда некоторые группы совпадают.
• <...>: встроенные сокращения. В настоящее время поддерживаются <num>, <percent> и <directions>
• $...: вывод из темы. Например, $colors выведет все свойства объекта colors из темы.

Примеры

Пример 1

• Шаблон: (border|b)-(solid|dashed|dotted|double|hidden|none)
• Ввод: b-do
• Варианты: b-dotted, b-double

Пример 2

• Шаблон: m-<num>
• Ввод: m-
• Варианты: m-1, m-2, m-3…

Пример 3

• Шаблон: text-$colors
• Ввод: text-r
• Варианты: text-red, text-rose…

Пример 4

Для нескольких шаблонов:

• Шаблон: ['(border|b)-<num>', '(border|b)-<directions>-<num>']
• Ввод: b-
• Варианты: b-x, b-y, b-1, b-2…
• Ввод: b-x-
• Варианты: b-x-1, b-x-2…

Лицензия

• Лицензия MIT © 2021-НАСТОЯЩЕЕ ВРЕМЯ Anthony Fu