ds-lint

Зачем

Даже когда в проекте есть tokens.css, в компоненты всё равно пролезают случайные #3b82f6 и padding: 13px — особенно после быстрой правки или генерации кода агентом. Если передать ds-lint файл токенов, он не просто укажет строку, а сразу подскажет подходящую переменную.

Установка

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

# Or install globally
npm i -g @andrewaitken/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

Параметры

Что находит

• Цвета#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 (пропускает 0px)

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

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

Граница проверки: это быстрый текстовый сканер сырых литералов и совпадений со словарём токенов, а не полноценный парсер CSS-каскада или вычисляемых в рантайме стилей.

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

Передай файл токенов через --tokens. ds-lint предложит имя токена на замену.

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 @andrewaitken/ds-lint src/ --tokens tokens.css --strict

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

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