API и режим watch

Сборка темы из кода через build() и generate(), TypeScript-типы и пересборка при изменении токенов.

build()

build() делает то же, что CLI: читает файлы токенов, собирает тему и записывает её в output. Принимает те же поля, что config.json, или путь к конфигу. Возвращает объект с содержимым записанных файлов.

import { build } from 'tailwind-dictionary';

const files = await build({
  version: 4,
  source: ['tokens/**/*.json'],
  output: './styles',
  themeAliases: { color: 'color' },
});

// или
await build({ config: './config.json' });

generate()

generate() не работает с файловой системой: принимает токены объектами и возвращает содержимое файлов. Подходит для своих скриптов сборки, плагинов и браузера.

import { generate } from 'tailwind-dictionary/generate';

const files = await generate({
  tokens: { color: { $type: 'color', white: { $value: '#ffffff' } } },
  themes: { dark: { color: { white: { $value: '#000000' } } } }, // необязательно
  themeAliases: { color: 'color' },
  version: 4,
});

files['tailwind/theme.css'];

В themes можно передать также default (имя темы по умолчанию) и prefix (префикс переменных v4). Предупреждения выводятся через console.warn; чтобы их перехватить, передайте logger: { warn(message) {} }.

versionКлючи результата
4tailwind/theme.css
3tailwind/theme.js, а при заданных темах ещё и tailwind/theme.css

В браузере generate() работает без полифиллов fs и path, но тянет за собой Style Dictionary: бандл получается заметным: в продакшен-сборке с минификацией около 0,8 МБ (≈ 265 КБ в gzip), без минификации около 3,6 МБ. Загружайте его лениво, через динамический import().

TypeScript

Типы входят в пакет: для build(), generate() и конфига. Отдельно ставить ничего не нужно.

import { build } from 'tailwind-dictionary';
import { generate } from 'tailwind-dictionary/generate';

Для JSON-конфига используйте JSON Schema из пакета — она даёт автодополнение и подсказки в редакторе:

{
  "$schema": "./node_modules/tailwind-dictionary/schema/config.schema.json"
}

Режим watch

npx tailwind-dictionary -c ./config.json --watch

Тема пересобирается при изменении файлов из source, themes и самого конфига. Отслеживаются только каталоги с токенами, а не весь проект.

Ошибки

Ошибки выводятся одной строкой с именем файла и путём токена, код выхода — 1:

✘ Config file not found: nope.json
✘ Token "color.text" (tokens/color.json) references {color.nope}, which is not defined
✘ No token files matched: tokens/*.json

Останавливают сборку: битая ссылка, typography без fontSize, смешение value и $value, отсутствующий или битый конфиг. Неизвестный $type и токен темы, которого нет в одной из тем, дают предупреждение.