Linter для проверки React Email компонентов на совместимость с клиентами

TL;DR: email-lint — инструмент для валидации React Email компонентов против 30+ почтовых клиентов. Интегрируется в тесты или работает через CLI, проверяя поддержку CSS и HTML фич на основе данных Can I Email.

Проблема кросс-клиентской совместимости

Разработка email-шаблонов — это адский multiverse, где каждый клиент (Gmail, Outlook, Apple Mail) живёт по своим законам. React Email упрощает создание шаблонов, но не решает проблему:

// Кажется, всё работает
<Button href="#">
  Click Me
</Button>

Но после деплоя получаем:

• Outlook: кнопка превращается в синий подчёркнутый текст
• Gmail: съедает href
• Yahoo: ломает вёрстку

Как работает email-lint

Инструмент использует трёхэтапную проверку:

1. Рендер компонента через React Email
2. Анализ HTML с учётом специфики фреймворка (игнорирует служебные теги)
3. Валидация против базы Can I Email

Пример интеграции в Jest:

import { lintComponent } from '@email-lint/react-email';

test('Welcome email passes Gmail validation', async () => {
  const result = await lintComponent(<Welcome name="Jane" />, {
    preset: 'gmail',
  });
  
  expect(result.errorCount).toBe(0);
});

Реальные кейсы из практики

1. Проблема с cursor: pointer

<div style={{ cursor: 'pointer' }}>Hover me</div>

Вывод линтера:

error cursor:pointer not supported (4/4 variants) [gmail]

Решение — использовать <a> вместо div.

2. Градиенты в Outlook

<div style={{ 
  background: 'linear-gradient(...)'
}}>

Линтер предупреждает:

warning background-image not supported (2/6) [outlook]

Альтернатива — VML для Outlook:

<!--[if mso]>
<v:rect ...>
<![endif]-->

Интеграция в CI/CD

Для pre-commit проверок:

npx @email-lint/core check src/emails/welcome.tsx

Пример вывода:

welcome.html
12:5 error cursor not supported (4/4 variants) [gmail]
18:3 warning background-image not supported (2/6) [outlook]
✖ 1 error, 2 warnings

Под капотом: архитектура линтера

1. Парсер JSX: использует Babel для анализа компонентов
2. Рендер-движок: имитирует React Email окружение
3. CSS-анализатор: извлекает inline-стили
4. Правила валидации: динамически загружаются из Can I Email

Кастомные правила можно добавлять через:

// .emaillintrc
{
  "rules": {
    "outlook-gradients": "error"
  }
}

Вывод

email-lint закрывает критическую нишу в экосистеме React Email:

• Обнаруживает проблемы до деплоя
• Интегрируется в существующие пайплайны
• Учит “правильным” паттернам email-вёрстки

Для команд, серьёзно работающих с рассылками, это must-have инструмент наряду с Litmus или Email on Acid, но без SaaS-зависимости.

Попробуй сам: Cursor — AI-редактор для разработчиков.

Источник: https://www.reddit.com/r/reactjs/comments/1skmtu1/linter_that_checks_react_email_components_against/