CSS Inlining in Rails with Premailer

Transactional emails are a critical touchpoint between your business and your customers. Whether it's a welcome email, password reset, or transaction confirmation, each email represents your brand. Therefore, ensuring each email renders correctly across all devices and email clients is essential. Today, we'll dive into how Premailer can be integrated into a Rails application to improve HTML email rendering.

What is Premailer?

Premailer is a Ruby gem that enhances HTML emails by transforming CSS styles into inline styles. This process is crucial because many email clients do not fully support external or even internal stylesheets. Premailer parses your HTML email templates and the associated CSS to apply styles directly to the HTML elements, ensuring a higher level of consistency across email clients.

Why Inline Styles?

Inline styles are the gold standard for email templates due to their high compatibility with email clients. While CSS support in web browsers is robust, email clients lag significantly behind. By inlining styles, you eliminate most of the compatibility issues, ensuring that your emails look as intended, no matter where they're opened.

Adding Premailer to Your Rails Application

Integrating Premailer into your Rails application is straightforward. Start by adding the Premailer gem to your Gemfile:

gem 'premailer-rails'

Run bundle install to install the gem. Premailer hooks into ActionMailer, so there's no need for extensive configuration. It automatically processes outbound emails when they are sent.

Configuring Premailer

While Premailer works well out of the box, you might want to tweak some settings in an initializer to optimize performance or adjust its behavior. Some options you might find useful:

# config/initializers/premailer.rb
Premailer::Rails.config.merge!(
  # A string to append to every a href="" link. Do not include the initial ?.
  link_query_string: "utm_medium=email",

  # Convert RBG to Hex colors. Default is false.
  rgb_to_hex_attributes: false,

  # Remove ID attributes whenever possible and convert IDs used as anchors to hashed to avoid collisions in webmail programs. Default is false.
  remove_ids: false,

  # Remove class attributes. Default is false.
  remove_classes: false,

  # Remove html comments. Default is false.
  remove_comments: false,

  # Remove script elements. Default is true.
  remove_scripts: true,

  # Whether to preserve any link rel=stylesheet and style elements. Default is false.
  preserve_styles: false,

  # Which HTML parser to use, :nokogiri, :nokogiri_fast or :nokogumbo. Default is :nokogiri.
  adapter: nokogiri
)

You can find the full list of options here .

Example: Sending an Email with Rails

Let's create a simple email template that uses Premailer. Assume you have a user mailer class:

class UserMailer < ApplicationMailer
  def welcome_email(user)
    @user = user
    mail(to: @user.email, subject: 'Welcome to Our Service!')
  end
end

Your corresponding HTML view (app/views/user_mailer/welcome_email.html.erb) might look like this:

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight { color: #ff0000; }
  </style>
</head>
<body>
  <p class="highlight">Dear <%= @user.name %>,</p>
  <p>Welcome to our service! We are excited to have you onboard.</p>
</body>
</html>

When you send this email, Premailer automatically converts the CSS into inline styles:

<body>
  <p style="color: #ff0000;">Dear John,</p>
  <p>Welcome to our service! We are excited to have you onboard.</p>
</body>

Conclusion

Premailer is an invaluable tool for Rails developers looking to ensure their HTML emails render consistently across all platforms. By automatically converting CSS to inline styles, it simplifies email template maintenance and improves the reliability of your email communications.

© 2024 Midflight. All rights reserved