ds-lint — Андрей Антошкин

Сканирует код и находит захардкоженные цвета, отступы, размеры шрифта и радиусы, которые должны быть токенами.

Проблема

Система протекает, когда рядом с токенами компонент всё ещё пишет сырой цвет или отступ. ds-lint находит такие значения и, если рядом есть файл токенов, предлагает имя из системы.

Установка

# Run directly (no install)
npx ds-lint src/

# Or install globally
npm i -g ds-lint

Запуск

# Basic scan
ds-lint src/

# With token definitions (enables suggestions)
ds-lint src/ --tokens tokens.css

# Markdown report for PR
ds-lint src/ --format markdown --out report.md

# Strict mode for CI
ds-lint src/ --tokens tokens.css --strict

Параметры

Флаг	По умолчанию	Описание
[path]	.	Папка или файл для проверки
--tokens <file>	—	Источник токенов (.css, .json или .md)
--format <type>	terminal	terminal \| markdown \| json
--out <file>	—	Записать отчёт в файл
--strict	false	Код 1, если нашлись нарушения
--version		Показать версию
--help		Показать справку

Что находит

Цвета#hex, rgb(), rgba(), hsl(), hsla() и именованные цвета CSS (red, blue и другие)
Отступыpadding, margin, gap, top/right/bottom/left, width/height в px/rem
Размеры шрифтаfont-size, line-height, letter-spacing в px/rem
Радиусborder-radius в px/rem (ноль пропускает)

Смотрит: .js .jsx .ts .tsx .css .scss .vue .svelte

Пропускает: node_modules, dist, build, .next, .git и объявления CSS-переменных

Откуда токены

Передай файл токенов через --tokens, чтобы получить подсказки замены:

CSS-переменные

:root {
  --color-primary: #3b82f6;
  --space-4: 16px;
  --text-sm: 14px;
  --radius-md: 8px;
}

JSON-токены (формат DTCG)

{
  "color": {
    "primary": { "$value": "#3b82f6" }
  },
  "space": {
    "sm": { "$value": "8px" },
    "md": { "$value": "16px" }
  }
}

Markdown-таблицы

Понимает вывод figma-to-design-md — таблицы токенов разбираются сами.

Пример отчёта

src/components/Button.tsx
L14:5 #3b82f6 → var(--color-primary) (Color)
L22:3 16px → var(--space-4) (Spacing)
L31:3 14px → var(--text-sm) (Font Size)
L45:3 8px → var(--radius-md) (Radius)

src/pages/Home.css
L8:5 #ff0000 (Color)
L12:3 24px (Spacing)

─────────────────────────────────
Total: 6 hardcoded values in 2 files
Colors: 2 Spacing: 2 Fonts: 1 Radius: 1
Fixable (token match found): 4 of 6

Игнор в коде

Комментарий строкой выше пропускает конкретные значения:

/* ds-lint-ignore */
.special-case { color: #ff0000; }

// ds-lint-disable
const borderColor = "#333";

CI

# GitHub Actions
- name: Check design tokens
  run: npx ds-lint src/ --tokens tokens.css --strict

# Generate PR report
- name: DS Lint Report
  run: npx ds-lint src/ --tokens tokens.css --format markdown --out ds-lint.md

--strict завершается с кодом 1, если нарушения есть, и роняет шаг CI.

Цепочка

ds-lint — ворота в коде, до того как модель увидит систему:

figma-to-design-md extracts the spec
ds-lint blocks raw values ← you are here
ds-context packs what the model may see
ds-eval scores the generated UI

Код