search

danschultzer / premailex

Preflight for your HTML emails - inline styling and plain text.
MIT License
172 stars 20 forks source link

Feature request: Supply css directly #41

Closed dantswain closed 4 years ago

dantswain commented 5 years ago

My use case is to build emails using Phoenix templates and then inline the css. Right now I'm putting the css in a style tag in my layout view, but it would be nice if I could just have a css file locally and supply that to Premailex either by passing a local filename or by reading the file and passing the css in as a string. It might be worthwhile allowing this to be passed in pre-parsed as well to avoid re-parsing it for every email.

danschultzer commented 5 years ago

This makes sense, but the CSS file would probably still have to be processed on each request due to how the processing is handled. There's also the question of what CSS file to use in Phoenix. Many uses SASS or similar, so the CSS file has first to be compiled before it can be used.

Most Premailex users depends on the Phoenix.Swoosh or Bamboo.Phoenix module module to generate the HTML from the Phoenix templates, and there you can just add a separate CSS file for e-mail to their Phoenix assets pipeline and use a <link> tag. I like the idea of completely preventing a HTTP request though, but not sure how it can work properly with the whole Phoenix assets pipeline.

dantswain commented 5 years ago

Very good point about the asset pipeline. I was envisioning having a separate email.css and loading it either at compile time or startup. I can see it being potentially confusing if people are trying to load a sass file. If you load it from the priv directory it should already be processed, though. My use case is that I’m proposing using elixir for some folks who would be new to elixir and wanting the experience to be as smooth as possible, but also avoid making that http call every time.

danschultzer commented 5 years ago

Yeah, I do think removing the requirement for HTTP call would be great. I'm pretty occupied atm, but will look into this asap.

danschultzer commented 5 years ago

So I looked up older projects using premailex, and actually I've always just used an eex template for the CSS:

# email_layout.html.eex

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title><%= @subject %></title>
    <%= render "_styles.html", assigns %>
  </head>
  <body>
    <%= render @view_module, @view_template, assigns %>
  </body>
</html>

# _styles.html.eex
<style>
body{color: #333333; font-family: Arial, sans-serif; font-size: 14px; line-height: 22px; width: 100%; margin: 0; padding: 0;}

# ...

</style>

I think this is the simplest approach for now. I did look into loading the CSS files locally, but I didn't see an easy way of doing it (at least in Phoenix context).

danschultzer commented 4 years ago

Finally resolved in #57, releasing new version shortly 🚀