mixin-dictionary

CSS-переменные, переменные и миксины LESS/SCSS из дизайн-токенов в формате DTCG или Style Dictionary, со светлой, тёмной и другими темами.

mixin-dictionary собирает из дизайн-токенов CSS-переменные, переменные LESS и SCSS и миксины: текстовые стили, медиазапросы и keyframes. Пакет работает на основе Style Dictionary и используется при сборке pbstyles.

Ресурсы: npm · GitHub · Changelog · Плейграунд.

Почему этот пакет

JSON-конфиг без кода. Один config.json, без JS/TS-скрипта сборки.
DTCG и старый формат. Пакет читает W3C Design Tokens (DTCG 2025.10) ($value, $type, составные typography и shadow) из Figma, Tokens Studio и Terrazzo, и старый формат Style Dictionary (value) с одинаковым результатом.
Темы на любом уровне DOM. Светлая, тёмная и другие темы переключаются атрибутом data-theme на <html> или на вложенном контейнере. Переменные LESS и SCSS семантических токенов ссылаются на CSS-переменные, поэтому тема меняется без пересборки.

Быстрый старт

npm install --save-dev mixin-dictionary

{
  "$schema": "./node_modules/mixin-dictionary/schema/config.schema.json",
  "platforms": ["css", "less", "scss"],
  "source": ["tokens/*.json"],
  "output": "./styles"
}

npx mixin-dictionary

Результат появится в styles/css/index.css, styles/less/index.less и styles/scss/index.scss:

@import './styles/scss/index.scss';

.title {
  @include h64;
}

@include lg {
  .sidebar {
    display: none;
  }
}

Разделы

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

Поля config.json, платформы, флаги командной строки, что попадает в каждый файл.

Токены DTCG

Новый формат: $value, $type, миксины из typography, брейкпоинтов и keyframes без поля mixin.

Старый формат

Токены Style Dictionary с полем value и миксины через поле mixin.

Темы

Светлая, тёмная и другие темы для CSS, LESS и SCSS, data-theme на любом элементе.

API и режим watch

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

Плейграунд

Соберите результат из своих токенов прямо в браузере, без установки.

Что нового в 1.6

Вход в формате DTCG 2025.10 и составные токены typography и shadow.
Миксины текстовых стилей, брейкпоинтов и анимаций собираются без поля mixin.
Любое число тем и themes.default.
Программный API, TypeScript-типы, JSON Schema конфига и --watch.
Понятные ошибки в одну строку с путём токена и именем файла.

Конфиги и токены версии 1.4 работают без изменений. Результат отличается только для путей токенов в camelCase или с _: раньше переменная и миксин получали разные имена, теперь имена совпадают. Полный список изменений и исправлений — в CHANGELOG.