Have you ever had to send emails from your Rails application?

Probably your answer will be yes. Most of us dealt already at some point with the pain of sending HTML formatted emails using Ruby on Rails. Some CSS is already recognized, but usually we end up writing the views with the inline CSS (ouch!), resulting in huge and almost unreadable files.

What are the available options to solve this problem? After some research I found a few Ruby gems that were released recently and that can help you accomplish this task: Roadie, Premailer-rails, actionmailer_inline_css and inline_styles_mailer

Next, I’ll go through each one and give you a resumed explanation of how to setup and use those gems.

Roadie

Roadie automatically gets all your CSS inlined paying special attention to selectors. Also, it rewrites all relative into absolute paths and respects any inline styles you may have. Additionally, it adds the HTML skeleton and is able to use partials.

Usage - add the following to your Gemfile:

gem 'roadie', '~> 3.4'

Creating a new instance of a Roadie document

Transform full documents with the #transform method.

document = Roadie::Document.new "<html><body></body></html>" document.add_css "body { color: green; }" document.transform # => "<html><body style=\"color:green;\"></body></html>"

Transform partial documents with #transform_partial

document.add_css "div { color: green; }" document.transform_partial # => "<div style=\"color:green;\">Hello world!</div>"

There are several options that you can use to configure your document instance (for more info check their homepage):

• url_options - Dictates how absolute URLs should be built;

• keep_uninlinable_css - Set to false to skip CSS that cannot be inlined;

• merge_media_queries - Set to false to not group media queries. Some users might prefer to not group rules within media queries because it will result in rules getting reordered;

• asset_providers - A list of asset providers that are invoked when CSS files are referenced;

• external_asset_providers - A list of asset providers that are invoked when absolute CSS URLs are referenced;

• before_transformation - A callback run before transformation starts;

• after_transformation - A callback run after transformation is completed.

My thoughts on Roadie

Roadie is extremely complete and with several useful options, however in my opinion it might be a bit too complex, depending on what you need or want. If you need to use assets from a CDN or use cache this gem will be the best option.

Premailer-rails

Just like Roadie, Premailer-rails does an excellent job converting your CSS to inline styles. You don’t need Rails to use as it plays well with Sinatra.

Premailer-rails is automatically used by actionmailer once you add it to your Gemfile.

Usage - add the following to your Gemfile:

gem 'premailer-rails'

Premailer can be configured with the following options, you can do this on the initializer (config/initializers/premailer_rails.rb):

Premailer::Rails.config.merge!(preserve_styles: true, remove_ids: true)

Premailer default configs

{ input_encoding: 'UTF-8', generate_text_part: true, strategies: [:filesystem, :asset_pipeline, :network] }

To prevent Premailer from generating a text part from HTML just set generate_text_part to false.

If necessary you can disable Premailer for a certain email, setting skip_premailer to true, just like this:

class UserMailer < ActionMailer::Base def welcome_email(user) mail to: user.email, subject: 'Welcome to My Awesome Site', skip_premailer: true end end

My thoughts on Premailer-Rails

Premailer is very simple to use and configure, if you just want to send styled emails without special configurations this gem is a very good option.

Actionmailer Inline CSS

This gem is similar to Premailer-rails (it’s also based in Premailer). You just need to add it to your Gemfile and you’re good to go.

Usage - add the following to your Gemfile:

gem 'actionmailer_inlines_css'

With this gem, you can also add a custom CSS file that will be inlined by premailer. You can accomplish this by adding to you email template:

<%= stylesheet_link_tag '/stylesheets/mailers/build_mailer' %>

My thoughts on Actionmailer Inline CSS

Actionmailer Inline CSS is the easier solution until now. You just need to add it to Gemfile and you’re ready to send styled emails. If you don’t need any special configurations this gem is a must for you.

Inline Styles Mailer

Just like Premailer-rails and Actionmailer Inline CSS this gem uses Premailer and works out of the box.

Usage - add the following to your Gemfile:

gem 'inline_styles_mailer'

And then just add to the desired mailers the include line for InlineStylesMailer:

class FooMailer < ActionMailer::Base include InlineStylesMailer def foo(email) mail(:to => email, :subject => "Foo foo!") end end

If you have a CSS file app/assets/stylesheets/foo_mailer* (where the asterisk can be .css, .css.scss or .css.sass) then it will get automatically applied to the mail using the inline_styles gem.

If you want you can use a different CSS file

class FooMailer < ActionMailer::Base include InlineStylesMailer use_stylesheet '_bar.css.sass' ... end

You can even use more than one CSS file

class FooMailer < ActionMailer::Base include InlineStylesMailer stylesheet_path 'public/stylesheets' ... end

My thoughts on Inline Styles Mailer

Inline Styles Mailer is also a nice solution, it’s very similar to Premailer-rails and Actionmailer Inline CSS. Easy to configure and able to deal with multiple CSS files. In my opinion it is also a good choice depending on what you need.

Wrapping up

Depending on what your needs are, you can choose between 3 gems based on premailer (Premailer-rails, Actionmailer Inline CSS and Inline Styles Mailer) or Roadie.

Roadie has advanced configuration options (if you need special configurations in order to use CDN or to use cache) that may become useful but if your requirements are not so high you may choose between the other three gems, all based in premailer and with very similar usage.

For more information about the options presented here, don’t forget to check each gem's link.

Found this article useful? You might like these ones too!