vienna.tokens

Сборщик токенов и пресетов генерирует файлы

Usage no npm install needed!

<script type="module">
  import viennaTokens from 'https://cdn.skypack.dev/vienna.tokens';
</script>

README

Сборщик токенов и пресетов

Сборщик токенов и пресетов генерирует файлы

  • tokens-raw.json (компиляция yaml)
  • tokens.json (только токены в формате ключ:значение)
  • tokens.js (только токены)
  • tokens.ts (только токены)
  • presets.json (только пресеты)
  • presets.css (только пресеты)
  • presets.js (только пресеты)
  • presets.ts (только пресеты)
  • Другие платформы (TBD)

Запуск

Для единичной сборки или деплоя выполнить

npm run build

Во время разработки можно запустить

npm run build:watch

Схема YAML

Для токенов

space: <Пространство имен>
desc: <Необязательное описание>
<Название списка токенов>:
    desc: <Необязательное описание>
    <Название токена>:
        desc: <Необязательное описание>
        value: <Значение токена>
        prop: <Название prop свойства для генерации предпросмотра>

Для пресетов

space: <Пространство имен>
imports: [<Список файлов импорта, необязателен>]
<Название пресета>:
    values: [{ value: $space.tokens.token, prop: color }]

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

Refs

space: <Пространство имен>
imports: [<Список файлов импорта, необязателен>]
<Название пресета>:
    ref: $preset.part или [$preset.part1, $preset.part2, ...]
    <css-свойство>: значение

CLI

При включенном флаге cssPresets возможно написание пресетов в виде yaml-css

npm run build --cssPresets

Другие аргументы в CLI

npm run build --cssPresets --css --watch --config preset.config.json --prefix black
  • Сгененрировать presets.css используется флаг --cssPresets с --css
  • Режим наблюдения --watch
  • Префикс названия --prefix <string>
  • Путь к файлу конфигурации --config <string>

Список разрешенных CSS атрибутов

border-. color background-. padding-. margin-. box-shadow opacity font-. cursor

Конфигурация

Конфигурация хранится в файле preset.config.json

{
    "output": "выходная директория",
    "rootFolder": "корень токенов",
    "tokensSrc": "путь до токенов",
    "presetsSrc": "путь до пресетов",
    "defaultImports": "путь до импортов по умолчанию",
    "htmlTemplateSrc": "путь до шаблона страницы предпросмотра",
    "allowedProps": ["регулярные выражения разрешенных css свойств"],
    "prefix": "Префик названия"
}