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 | Ключи результата |
|---|---|
4 | tailwind/theme.css |
3 | tailwind/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 и токен темы, которого нет в одной из тем, дают предупреждение.