Liquid Premailer

Developed by Matt Puchlerz, The Killswitch Collective (killswitchcollective.com) 02.10.2009

As awesome as the Premailer gem is, it didn’t help with making Liquid templates any easier. My idea was to create a simple, consistent method by which you could write your markup, style it, premailer-it, and have the associated Liquid calls right there as well.

Using liquid_premailer on the command line will convert your source HTML file, filled with dummy data and commented-out Liquid calls, into ready-to-go Liquid email templates.

Examples

Using the liquid_premailer Command

  $ liquid_premailer myfile.html

…will output myfile_liquid.html. That’s it!

Dummy Data and Hidden Liquid Output

  <style type="text/css">
    h1 {
      font-family: verdana, sans-serif;
      font-size: 20px;
    }
  </style>

  <h1><!---->Here is a Fake Headline<!--{{ email.headline }}--></h1>

…will become…

  <h1 style="font-family: verdana, sans-serif; font-size: 20px;">{{ email.headline }}</h1>

Hidden Liquid Tags

  <!--{% if email.is_a_pain %}-->
  <p>Man, HTML emails are a pain to work with.</p>
  <!--{% endif %}-->

…will become…

  {% if email.is_a_pain %}
  <p>Man, HTML emails are a pain to work with.</p>
  {% endif %}

Complex Example

  <style type="text/css">
    p {
      font-family: verdana, sans-serif;
      font-size: 12px;
    }
    span.mobile {
      color: red;
    }
  </style>

  <p>
    <!--{% if sender.phone != blank %}-->
    <span class="phone">
      <!---->
      123-456-7890
      <!--{{ sender.phone }}-->
    </span><br />
    <!--{% endif %}-->
    <!--{% if sender.mobile_phone != blank %}-->
    <span class="mobile">
      <!---->
      098-765-4321
      <!--{{ sender.mobile_phone }}--> (mobile)
    </span>
    <!--{% endif %}-->
  </p>

…will become…

  <p style="font-family: verdana, sans-serif; font-size: 12px;">
    {% if sender.phone != blank %}
    <span>
      {{ sender.phone }}
    </span><br />
    {% endif %}
    {% if sender.mobile_phone != blank %}
    <span style="color: red;">
      {{ sender.mobile_phone }} (mobile)
    </span>
    {% endif %}
  </p>

Requirements, installation and use

First, download and install the Premailer gem from code.dunae.ca/premailer.web/local.html.

Then install the liquid_premailer gem:

  $ sudo gem install mattpuchlerz-liquid_premailer

liquid_premailer should now be available in your path.