Closed chriswill closed 2 years ago
Archanian
commented
2 years ago Thanks for the report @chriswill - can you share any additional details about your environment, project runtime, version of StyleMerge you are using, etc. Also if you could share the raw HTML output you are getting, that would be helpful.
chriswill
commented
2 years ago I'm using v2.0.2.
I'm using .net 6.0 to generate a class to represent a message, which is serialized into Json and then pushed to an Azure Service Bus queue. An Azure function gets a notification of a pending queue work item and then deserializes the message, creates a .net MailMessage and sends it using AWS.
I'm currently running these tests in an MS Test unit test. The test is fairly generic, just reading the contents of the template which I've downloaded from GitHub. This creates the class which represents a mail message before serialization:
string template = @"D:\src\postmark-templates-master\templates-inlined\basic\example\content.html";
message.HtmlBody = await File.ReadAllTextAsync(template, Encoding.UTF8);
message.Subject = "Inlined:Basic";
EmailTaskMessage taskMessage = message.ToTaskMessage();
await serviceBusSender.EnQueueEmailMessage(taskMessage);
message.HtmlBody = StyleMerge.Inliner.ProcessHtml(await File.ReadAllTextAsync(template, Encoding.UTF8));
message.Subject = "Inlined:Basic :: processed";
taskMessage = message.ToTaskMessage();
await serviceBusSender.EnQueueEmailMessage(taskMessage);The creation of the .net MailMessage from the deserialized message looks like this:
message.Sender = new MailAddress(taskMessage.Sender ?? "no-reply@xxxx");
message.To.Add(new MailAddress(taskMessage.Addressee));
message.Subject = taskMessage.Subject;
if (!string.IsNullOrEmpty(taskMessage.TextBody))
{
message.AlternateViews.Add(AlternateView.CreateAlternateViewFromString(taskMessage.TextBody, null, MediaTypeNames.Text.Plain));
}
if (!string.IsNullOrEmpty(taskMessage.HtmlBody))
{
message.AlternateViews.Add(AlternateView.CreateAlternateViewFromString(taskMessage.HtmlBody, null, MediaTypeNames.Text.Html));
}
await SendAsync(message);It's certainly possible that some part of the process is injecting these errors... I can do a straight test going direct to a MailMessage and sending it.
chriswill
commented
2 years ago The direct tests showed the same result.
Here is an example of the simplified code I've used to demonstrate the error. I think you can easily replicate this in your environment. Or am I missing something in the use of StyleMerge?
EmailConfiguration and IEmailService are simple wrappers around SmtpClient for DI purposes.
MailMessage message = new MailMessage();
message.To.Add("chris.williams@xxxx");
message.From = new MailAddress("no-reply@xxx");
message.IsBodyHtml = true;
string template = @"D:\src\postmark-templates-master\templates-inlined\basic\example\content.html";
message.Body = await File.ReadAllTextAsync(template, Encoding.UTF8);
message.Subject = "Inlined:Basic";
EmailConfiguration configuration = new EmailConfiguration();
configuration.Server = "email-smtp.us-west-2.amazonaws.com";
configuration.User = "xxxx";
configuration.Password = "xxxx";
IEmailService emailService = new EmailService(configuration, new NullLogger<EmailService>());
await emailService.SendAsync(message);
message.Body = StyleMerge.Inliner.ProcessHtml(await File.ReadAllTextAsync(template, Encoding.UTF8));
message.Subject = "Inlined:Basic :: processed";
await emailService.SendAsync(message);Oh, you also asked for the raw html, post merge. Here it is:
<!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 name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title></title>
<style type="text/css" rel="stylesheet" media="all">@import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap");
@media only screen and (max-width: 500px) { .button { width: 100% !important; text-align: center !important } }
@media only screen and (max-width: 600px) { .email-body_inner,.email-footer { width: 100% !important } }
@media not all { body,.email-body,.email-body_inner,.email-content,.email-wrapper,.email-masthead,.email-footer { background-color: rgb(51, 51, 51) !important; color: rgb(255, 255, 255) !important } p,ul,ol,blockquote,h1,h2,h3,span,.purchase_item { color: rgb(255, 255, 255) !important } .attributes_content,.discount { background-color: rgb(34, 34, 34) !important } .email-masthead_name { text-shadow: none !important } }
:root { }</style>
<!--[if mso]>
<style type="text/css">
.f-fallback {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
</head>
<body style="width: 100% !important; height: 100%; font-family: "Nunito Sans", Helvetica, Arial, sans-serif; background-color: rgba(242, 244, 246, 1); color: rgba(81, 84, 94, 1); margin: 0" bgcolor="#F2F4F6">
<span class="preheader" style="display: none !important; visibility: hidden; font-size: 1px; line-height: 1px; max-height: 0; max-width: 0; opacity: 0; overflow: hidden">This is example text for the preheader set via the YAML front-matter for each email.</span>
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; background-color: rgba(242, 244, 246, 1); margin: 0; padding: 0" bgcolor="#F2F4F6">
<tbody><tr>
<td align="center" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px">
<table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; margin: 0; padding: 0">
<tbody><tr>
<td class="email-masthead" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px; text-align: center; padding: 25px 0" align="center">
<a href="https://example.com" class="f-fallback email-masthead_name" style="color: rgba(168, 170, 175, 1); font-size: 16px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(255, 255, 255, 1)">
[Product Name]
</a>
</td>
</tr>
<!-- Email Body -->
<tr>
<td class="email-body" width="570" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px; width: 100%">
<table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation" style="width: 570px; background-color: rgba(255, 255, 255, 1); margin: 0 auto; padding: 0" bgcolor="#FFFFFF">
<!-- Body content -->
<tbody><tr>
<td class="content-cell" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px; padding: 45px">
<div class="f-fallback">
<hr>
<h1 style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 22px; font-weight: bold; text-align: left" align="left">Escaped Handlebars Brackets</h1>
<p style="font-size: 16px; line-height: 1.625; color: rgba(81, 84, 94, 1); margin: 0.4em 0 1.1875em">Working with templates, you'll occasionally need to put some <a href="https://github.com/wildbit/mustachio" style="color: rgba(56, 105, 212, 1)">Mustachio</a> code in your Handlebars templates. To prevent the Handlebars processing from attempting to process your Mustachio code, you'll need to escape the curly braces by adding a backslash just before the opening curly braces.</p>
\{{ something }} will turn into {{ something }}
<br>
<br>
<hr>
<h1 style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 22px; font-weight: bold; text-align: left" align="left">Headers</h1>
<h1 style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 22px; font-weight: bold; text-align: left" align="left">Header 1</h1>
<h2 style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 16px; font-weight: bold; text-align: left" align="left">Header 2</h2>
<h2 style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 16px; font-weight: bold; text-align: left" align="left">Header 3</h2>
<hr>
<h1 style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 22px; font-weight: bold; text-align: left" align="left">Paragraphs & Formatting</h1>
<p style="font-size: 16px; line-height: 1.625; color: rgba(81, 84, 94, 1); margin: 0.4em 0 1.1875em">Transactional email is fun for the whole family! You can design it, write it, code it, and test it. And test it. And test it. And send it. And find a bug.</p>
<p style="font-size: 16px; line-height: 1.625; color: rgba(81, 84, 94, 1); margin: 0.4em 0 1.1875em">This paragraph has some <b>bold text</b> and <strong>strong text</strong> along with <i>italicized text</i> and <em>emphasized text</em>.</p>
<hr>
<h1 style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 22px; font-weight: bold; text-align: left" align="left">Lists</h1>
<ul style="font-size: 16px; line-height: 1.625; margin: 0.4em 0 1.1875em">
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
<ol style="font-size: 16px; line-height: 1.625; margin: 0.4em 0 1.1875em">
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
<hr>
<!-- Action -->
<h1 style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 22px; font-weight: bold; text-align: left" align="left">Action Buttons</h1>
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; text-align: center; margin: 30px auto; padding: 0">
<tbody><tr>
<td align="center" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px">
<!-- Border based button
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tbody><tr>
<td align="center" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px">
<a href="http://example.com" class="f-fallback button button--red" target="_blank" style="color: rgba(255, 255, 255, 1); border-top: 10px solid rgba(255, 97, 54, 1); border-right: 18px solid rgba(255, 97, 54, 1); border-bottom: 10px solid rgba(255, 97, 54, 1); border-left: 18px solid rgba(255, 97, 54, 1); background-color: rgba(255, 97, 54, 1); display: inline-block; text-decoration: none; border-radius: 3px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); box-sizing: border-box">Danger Button</a>
</td>
</tr>
</tbody></table>
<br>
<!-- Border based button
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tbody><tr>
<td align="center" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px">
<a href="http://example.com" class="f-fallback button button--green" target="_blank" style="color: rgba(255, 255, 255, 1); border-top: 10px solid rgba(34, 188, 102, 1); border-right: 18px solid rgba(34, 188, 102, 1); border-bottom: 10px solid rgba(34, 188, 102, 1); border-left: 18px solid rgba(34, 188, 102, 1); background-color: rgba(34, 188, 102, 1); display: inline-block; text-decoration: none; border-radius: 3px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); box-sizing: border-box">Success button</a>
</td>
</tr>
</tbody></table>
<br>
<!-- Border based button
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tbody><tr>
<td align="center" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px">
<a href="http://example.com" class="f-fallback button" target="_blank" style="color: rgba(255, 255, 255, 1); border-top: 10px solid rgba(56, 105, 212, 1); border-right: 18px solid rgba(56, 105, 212, 1); border-bottom: 10px solid rgba(56, 105, 212, 1); border-left: 18px solid rgba(56, 105, 212, 1); background-color: rgba(56, 105, 212, 1); display: inline-block; text-decoration: none; border-radius: 3px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); box-sizing: border-box">Default button</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<hr>
<h1 style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 22px; font-weight: bold; text-align: left" align="left">Attribute List</h1>
<p style="font-size: 16px; line-height: 1.625; color: rgba(81, 84, 94, 1); margin: 0.4em 0 1.1875em">If your email client baseline is sufficiently modern, you can achieve the same effects with list much more succinctly. We chose to use tables for these lists to accommodate Outlook 2007, 2010, and 2013.</p>
<table class="attributes" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0 0 21px">
<tbody><tr>
<td class="attributes_container" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px">
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tbody><tr>
<td class="attributes_item" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px; padding: 0"><strong>Login Page:</strong> {{login_url}}</td>
</tr>
<tr>
<td class="attributes_item" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px; padding: 0"><strong>Username:</strong> {{username}}</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<hr>
<h1 style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 22px; font-weight: bold; text-align: left" align="left">Option List</h1>
<p style="font-size: 16px; line-height: 1.625; color: rgba(81, 84, 94, 1); margin: 0.4em 0 1.1875em">For the most part, option lists are just like attribute lists. They just use line breaks to create some separation between the items.</p>
<table class="attributes" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0 0 21px">
<tbody><tr>
<td class="attributes_container" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px">
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tbody><tr>
<td class="attributes_item" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px; padding: 0"><strong><a href="{{trial_extension_url}}" style="color: rgba(56, 105, 212, 1)">Restart your trial</a></strong> - If you didn't get a chance to fully try out the product or need a little more time to evaluate, just let us know. Simply reply to this email and we'll extend your trial period.
<br>
<br>
</td>
</tr>
<tr>
<td class="attributes_item" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px; padding: 0"><strong><a href="{{feedback_url}}" style="color: rgba(56, 105, 212, 1)">Share feedback</a></strong> - If [Product Name] isn't right for you, let us know what you were looking for and we might be able to suggest some alternatives that might be a better fit.</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<hr>
<h1 style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 22px; font-weight: bold; text-align: left" align="left">Example Closing</h1>
<p style="font-size: 16px; line-height: 1.625; color: rgba(81, 84, 94, 1); margin: 0.4em 0 1.1875em">Thanks,
<br>[Sender Name] and the [Product Name] Team</p>
<p style="font-size: 16px; line-height: 1.625; color: rgba(81, 84, 94, 1); margin: 0.4em 0 1.1875em"><strong>P.S.</strong> Need help getting started? Check out our help documentation. Or, just reply to this email with any questions or issues you have. The [Product Name] support team is always excited to help you.</p>
<hr>
<h1 style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 22px; font-weight: bold; text-align: left" align="left">Discount Code</h1>
<!-- Discount -->
<table class="discount" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; margin: 0; padding: 24px; border: 2px dashed rgba(203, 204, 207, 1); background-color: rgba(244, 244, 247, 1)" bgcolor="#F4F4F7">
<tbody><tr>
<td align="center" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px">
<h1 class="f-fallback discount_heading" style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 22px; font-weight: bold; text-align: center" align="center">10% off your next purchase!</h1>
<p class="f-fallback discount_body" style="font-size: 15px; line-height: 1.625; text-align: center; color: rgba(81, 84, 94, 1); margin: 0.4em 0 1.1875em" align="center">Thanks for your support! Here's a coupon for 10% off your next purchase if used by {{expiration_date}}.</p>
<!-- Border based button
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tbody><tr>
<td align="center" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px">
<a href="http://example.com" class="f-fallback button button--green" target="_blank" style="color: rgba(255, 255, 255, 1); border-top: 10px solid rgba(34, 188, 102, 1); border-right: 18px solid rgba(34, 188, 102, 1); border-bottom: 10px solid rgba(34, 188, 102, 1); border-left: 18px solid rgba(34, 188, 102, 1); background-color: rgba(34, 188, 102, 1); display: inline-block; text-decoration: none; border-radius: 3px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); box-sizing: border-box">Use this discount now...</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<hr>
<h1 style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 22px; font-weight: bold; text-align: left" align="left">Related Items</h1>
<hr>
<h1 style="margin-top: 0; color: rgba(51, 51, 51, 1); font-size: 22px; font-weight: bold; text-align: left" align="left">Sub-text</h1>
<p style="font-size: 16px; line-height: 1.625; color: rgba(81, 84, 94, 1); margin: 0.4em 0 1.1875em">Sub-text is for any content that needs to be included at the bottom of the email but doesn't need to stand out. This can be good for disclaimers and text alternatives.</p>
<!-- Sub copy -->
<table class="body-sub" role="presentation" style="margin-top: 25px; padding-top: 25px; border-top: 1px solid rgba(234, 234, 236, 1)">
<tbody><tr>
<td style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px">
<p class="sub" style="font-size: 13px; line-height: 1.625; color: rgba(81, 84, 94, 1); margin: 0.4em 0 1.1875em">If you’re having trouble clicking the confirm account button, copy and paste the URL below into your web browser.
</p>
<p class="sub" style="font-size: 13px; line-height: 1.625; color: rgba(81, 84, 94, 1); margin: 0.4em 0 1.1875em"><a href="{{action_url}}" style="color: rgba(56, 105, 212, 1)">{{action_url}}</a></p>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px">
<table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation" style="width: 570px; text-align: center; margin: 0 auto; padding: 0">
<tbody><tr>
<td class="content-cell" align="center" style="font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px; padding: 45px">
<p class="f-fallback sub align-center" style="font-size: 13px; line-height: 1.625; text-align: center; color: rgba(168, 170, 175, 1); margin: 0.4em 0 1.1875em" align="center">© 2021 [Product Name]. All rights reserved.</p>
<p class="f-fallback sub align-center" style="font-size: 13px; line-height: 1.625; text-align: center; color: rgba(168, 170, 175, 1); margin: 0.4em 0 1.1875em" align="center">
[Company Name, LLC]
<br>1234 Street Rd.
<br>Suite 1234
</p>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body></html>
SWSSolutions
commented
2 years ago We experienced the same issue and we downgraded StyleMerge to version 1.0.28. One of the underlying libraries (ExCSS) converts all colors (HEX, named colors like "red" etc) to RGBA. RGBA isn't compatible with different versions of Outlook. For a complete overview see: https://www.litmus.com/blog/background-colors-html-email
A example generated with StyleMerge version 1.0.28 ... style="height: 100%; margin: 0; -webkit-text-size-adjust: none; font-family: 'Nunito Sans',Helvetica,Arial,sans-serif; background-color: #F2F4F6; color: #51545E;" ...
The same generated with StyleMerge version 2.0.2 ... style="height: 100%; margin: 0; font-family: "Nunito Sans", Helvetica, Arial, sans-serif; background-color: rgba(242, 244, 246, 1); color: rgba(81, 84, 94, 1); " ...
Archanian
commented
2 years ago Thanks for the information @chriswill and @SWSSolutions, we are aware of the compatibility issues with older Outlook clients and have been working on a custom CSS formatter to enable support for this. Will let you know when a patched version is available.
Archanian
commented
2 years ago @chriswill @SWSSolutions A new version of StyleMerge has been published (2.0.3) addressing this colour compatibility issue with Outlook.
Archanian
commented
2 years ago Closing as this issue has now been fixed.
I'm testing against whatever the current version of Outlook you get with an Office 365 subscription. I'm using your Postmark templates here: https://github.com/wildbit/postmark-templates
All of the templates appear well in iOS, but I'm seeing poor results in current Outlook.
For example, here is a rendered snippet from the Inlined:Basic Example template.
Here is the same email in Outlook after using StyleMerge.Inliner.ProcessHtml
Given that the templates display fine prior to Style Merging, I'm assuming this is a style-merge issue, which is why I chose to post it here. Happy to share additional results if you need.