Недавно столкнулся с задачей по верстке HTML-писем. Как известно, многие почтовые клиенты, в том числе и Gmail игнорируют css-классы и содержимое тега style, не говоря уже о подключении внешних CSS-файлов. Поэтому обычной практикой при верстке HTML-писем является использование inline-стилей. Если делать это самостоятельно, то шаблон письма очень быстро превращается в кашу, поддерживать и расширять которую очень сложно. В связи с чем rails-разработчики используют различные плагины, которые позволяют «встроить» css-класс в аттрибут style.

Пишем обычный html в теле письма:

<div class="test">hello world</div>

и говорим плагину, сделай inline-стили, используя следующую css-ку:

div.test { font-size: 12px; color: red; }

после чего на выходе получаем такой код:

<div class="test" style="font-size: 12px; color: red;">hello world</div>

Таким образом, с одной стороны мы имеем читаемые, расширяемые и легко поддерживаемые шаблоны html-писем, а с другой — наши шаблоны нормально перевариваются различными почтовыми клиентами.
После того как я узнал о прекрасном плагине awesome_email мне казалось что никаких проблем возникнуть не может, ведь принцип использования прост как валенок: указывает из каких css-ок брать стили и говорим — «заинлайнь их». Но не тут то было, письма стали приходить не в том виде, в котором должны были. Чтобы понять природу ошибки рассмотрим принцип работы awesome_email (который, как оказалось, совсем не awesome). Сначала с помощью плагина css_parser разибирается на составляющие указанная css-ка, потом с помощью nokogiri распарсивается html-документ, ну и наконец, в цикле по селектору каждого css-правила получаются html-элементы и для каждого из них в конец style дописывается содержимое правила. Вот к чему это может привести:

CSS:

div.test:first-child {color: red;}
div.test {color: green;}

HTML:

<div class="test">hello world</div>

OUTPUT:

<div class="test" style="color: red; color: green;">hello world</div>

Мало того, что css-свойство color дублируется, так оно еще и применяется неправильно, потому что в цикле по CSS-правилами не учитывается их значимость, а просто сначала добавляется содержимое первого css-правила, а потом второго, в связи с чем цвет текста зеленый, хотя должен быть красным. Данной проблемы можно было бы избежать следующим способом: проходить в цикле не по css-правилам, а по html-элементам, и для каждого, каким-то образом получать все связанные с ним css-правила (как при просмотре кода через firebug), но это только гипотеза и как лучше реализовать такое поведение я не знаю. Поэтому главный вопрос таков: как лучше всего встраивать стили html-письма в rails приложении? Какие плагины использовать, чтобы с одной стороны, шаблон письма оставался понятным и расширяемым, а с другой — почтовые клиенты были довольны и отображали содержимое как задумано?

UPD. Задача решена. Вот код: github.com/goganchic/awesome_email а вот сопутствующая статья: rails.vsevteme.ru/items/show?id=15682