search

Mange / roadie-rails

Making HTML emails comfortable for the Rails rockstars
MIT License
363 stars 65 forks source link

data-roadie-ignore being ignored in roadie-rails 1.1.0 and roadie 3.1.1 #53

Open maia opened 8 years ago

maia commented 8 years ago

Using roadie (3.1.1) and roadie-rails (1.1.0) I'm experiencing the problem of data-roadie-ignore being ignored. I would assume that for each tag it is passed as attribute, it will prevent adding styles.

The reason for my attempt of keeping the "original" is that I'm trying to get the Gmail Markup "View Action" to work – it's not being displayed in Google Inbox, and I assume it's because the microdata is polluted with style attributes (also, the frequency with which the styles are added feel a bit redundant to me, but that will "only" increase the file size but not cause any render problems).

Here's a part of the html generated via ActionMailer::Preview:

<!DOCTYPE html>
<html data-roadie-ignore xmlns="http://www.w3.org/1999/xhtml">
  <head data-roadie-ignore>
    <meta content="width=device-width" data-roadie-ignore name="viewport">
    <meta content="text/html; charset=utf-8" data-roadie-ignore http-equiv="Content-Type">
    <link rel="stylesheet" media="screen" href="/assets/email.self-348…skipped…fb8b.css?body=1" />
    <style data-roadie-ignore>
      @media only screen and (max-width: 640px) { …skipped… }
    </style>
  </head>
  <body>
    <div data-roadie-ignore itemscope="" itemtype="http://schema.org/EmailMessage">
      <div data-roadie-ignore itemprop="potentialAction" itemscope="" itemtype="http://schema.org/ViewAction">
        <link data-roadie-ignore href="http://…skipped…" itemprop="target">
        <meta content="See All" data-roadie-ignore itemprop="name">
      </div>
      <meta content="…skipped…" data-roadie-ignore itemprop="description">
    </div>
    <table class="body-wrap">
      <tr>
        <td></td>
        <td class="container" width="600">
        …skipped…

and here's what is being sent:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px'>
<head style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px'>
<meta content="width=device-width" name="viewport" style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px'>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px'>
<style style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px'>@media only screen and (max-width: 640px) {  h1, h2, h3, h4 {   font-weight: 600 !important;   margin: 20px 0 5px !important;  }  h3 {    font-size: 16px !important;  }  .container {    width: 100% !important;  }  .content, .content-wrap {    padding: 10px !important;  }  .tweets-list, .single-tweet {    width: 100% !important;  }}</style>
</head>
<body style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;height:100%;line-height:1.6;background-color:#f6f6f6;width:100% !important'>
<div itemscope="" itemtype="http://schema.org/EmailMessage" style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px'>
<div itemprop="potentialAction" itemscope="" itemtype="http://schema.org/ViewAction" style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px'>
<link href="http://…skipped…" itemprop="target" style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px'>
<meta content="See All" itemprop="name" style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px'>
</div>
<meta content="…skipped…" itemprop="description" style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px'>
</div>
<table class="body-wrap" style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px;background-color:#f6f6f6;width:100%'><tr style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px'>
<td style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px;vertical-align:top'></td>
<td class="container" width="600" style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px;vertical-align:top;display:block !important;max-width:600px !important;margin:0 auto !important;clear:both !important'><div class="content" style='margin:0;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;box-sizing:border-box;font-size:14px;max-width:600px;margin:0 auto;display:block;padding:20px'>

So why is roadie-rails ignoring the data-roadie-ignore attribute, and what can I do to solve the issue?

Mange commented 8 years ago

That attribute is to tell Roadie not to read styles from certain link or style elements, not that stylings themselves will not be inlined on elements and their children.

If you want to disable inlining for an entire email, override roadie_options for Automatic, or call the vanilla mail method for Mailer.

If you want to run Roadie on all but a few elements, the easiest way right now would be a after_transformation hook that removes the style attribute for each node in a tree.

I'm on my phone on my way to bed so I cannot type up an example right now. If you'd like some examples, just say so and I'll type some up tomorrow.

Future visitors that need this same usecase, please comment so I can see how much need there is and it might become an official feature at one point.

maia commented 8 years ago

@Mange thanks. I do not want to disable inlining for the entire mail, but I'd want to skip adding styles to a selected group of elements (in this case the divs containing the microdata).

I'm not sure how many people already are using structured data in emails (github does, btw), but schema.org reports a usage of "Between 250,000 and 500,000 domains" for ViewAction. There's more information about the format of Microdata in the Google Gmail Markup Reference, although it seems outdated as the Markup Tester reports a "Missing required property" (I yet have to figure out the solution).

I'd be grateful if you could provide an example on how to skip/remove/… inlining for the selected tags as mentioned above whenever you have a spare moment, thanks!

maia commented 8 years ago

Update: I just realized that the requirements for using Google Markup are quite restrictive, therefor I won't be able to use markup these days. I'd still be interested in seeing how to skip elements when inlining, but it's not of priority, on the contrary. Thanks!