How to deal with HTML letters?

Recently faced with the task of the layout of HTML-letters. As you know, many email clients, including Gmail, ignore the css-classes and the contents of the style tag, not to mention the connection of external CSS files. Therefore, the usual practice in the layout of HTML-letters is the use of inline-styles. If you do it yourself, the letter template very quickly turns to mush, which is very difficult to maintain and expand. In this connection, rails-developers use various plug-ins that allow you to "embed" the css class in the style attribute.

We write the usual html in the body of the letter:

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

')
and say to the plugin, make inline-styles using the following css-ku:

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

after which the output is the following code:

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

Thus, on the one hand, we have readable, extensible and easily supported templates of html-letters, and on the other - our templates are normally digested by various email clients.
After I learned about the awesome_email wonderful plugin , it seemed to me that there could be no problems, because the principle of use is simple as a felt boot: it indicates from which css-ok to take styles and say “fuck them”. But it was not there, the letters began to arrive not in the form in which they should have been. To understand the nature of the error, let's look at how awesome_email works (which, as it turned out, is not at all awesome). First, using the css_parser plugin, the html document is parsed into the specified css, then nokogiri is used to parse the html document, and finally, the html elements are obtained in the loop for each css rule and the content of the rule is added to the end of the style. This is where it can lead:

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 >

Moreover, the css-color property is duplicated, it is also used incorrectly, because in the cycle of CSS-rules their significance is not taken into account, but simply the content of the first css-rule is added first, and then the second, in connection with which the text color green, although it should be red. This problem could have been avoided in the following way: to go in a loop not by css-rules, but by html-elements, and for everyone, somehow get all the associated css-rules (as when viewing code through firebug), but This is only a hypothesis and I don’t know how to better implement this behavior. Therefore, the main question is: what is the best way to embed html-letter styles in rails application? What plug-ins are used to, on the one hand, the letter template is understandable and extensible, and on the other hand, email clients are satisfied and display the content as intended?

UPD. Problem solved. Here's the code: github.com/goganchic/awesome_email and here's the accompanying article: rails.vsevteme.ru/items/show?id=15682