activecampaign / style-merge Goto Github PK

View Code? Open in Web Editor NEW

69.0 17.0 10.0 576 KB

Simple CSS inlining, for email.

License: MIT License

C# 56.95% HTML 43.05%

style-merge's Introduction

StyleMerge

Simple CSS inlining, for email, for C# and other .net-based languages.

What's this for?

StyleMerge allows you to inline <style> blocks to style= attributes for email, this is necessary to ensure the broadest rendering support in email clients. It's the engine behind our style inlining for Postmark Templates, and we're proud to provide it as Open Source to the .net community.

How to use this library:

var sourceHtml = "<html><head><style>...</style></head><body>...</body></html>";
var processedHtml = StyleMerge.ProcessHtml(sourceHtml);

style-merge's People

Contributors

Stargazers

Watchers

Forkers

markcharamut hkrug thattimc dayapadala1 chriswill bgiromini dstj ywscr seanpm2001

style-merge's Issues

Incorrectly parsing calc(expr) functions

We seem to be incorrectly parsing calc(expr) functions.

Input CSS:

body { 
	width: calc(100% - 32px);
	height: calc(100% - 64px); 
}

Output CSS:

body { 
	width: calc(100% = 32px);
	height: calc(100% = 64px); 
}

Short-term Workaround:
Escaping the operator seems to fix the issue: width: calc(100% \- 32px)

Digging through the code, this is caused by the ExCSS Stylesheet parser. We are using a very old version of this, where this issue was probably occurring: TylerBrinks/ExCSS#74. This seems to have been fixed in newer versions.

.NET Core compatibility

Any idea if and when this package will be ported to / targeted for net5.0 (and up)? I've included the package in a net5.0 project and everything seems to work, but I am getting these warnings:

NU1701: Package 'StyleMerge 1.0.28' was restored using '.NETFramework,Version=v4.6.1, .NETFramework,Version=v4.6.2, .NETFramework,Version=v4.7, .NETFramework,Version=v4.7.1, .NETFramework,Version=v4.7.2, .NETFramework,Version=v4.8' instead of the project target framework 'net5.0'. This package may not be fully compatible with your project.

Or do you perhaps know of a similar package that is already fully net5.0 compatible?

Bootstrap Css throws Exception

Hey,

When trying to Inline a Bootstrap 3.3.7 css file pasted into the Style tag, the Inliner throws an exception

System.ArgumentException: Unexpected character found at position 8: ".. button::>>-<<moz-focus-inner::input::-moz-"
   at CsQuery.StringScanner.Implementation.StringScannerEngine.ThrowException(String message, Int32 errPos)
   at CsQuery.StringScanner.Implementation.StringScannerEngine.ThrowUnexpectedCharacterException()
   at CsQuery.StringScanner.Implementation.StringScannerEngine.Expect(Func`3 validate)
   at CsQuery.StringScanner.Implementation.StringScannerEngine.Get(Func`3 validate)
   at CsQuery.Engine.SelectorParser.Parse(String selector)
   at CsQuery.Engine.Selector..ctor(String selector)
   at CsQuery.CQ.Select(String selector)
   at StyleMerge.Inliner.ApplyRulesToElements(CQ document, IEnumerable`1 rules, HashSet`1 noApply) in c:\projects\style-merge\StyleMerge\Inliner.cs:line 170
   at StyleMerge.Inliner.ProcessHtml(String sourceHtml) in c:\projects\style-merge\StyleMerge\Inliner.cs:line 145
   at JPB.MyWorksheet.Webpage.Services.Mail.MailService.PreProcessMail(Mail mail) in F:\Source\Repos\MyWorksheet\JPB.MyWorksheet\JPB.MyWorksheet.Webpage\Services\Mail\MailService.cs:line 48
   at JPB.MyWorksheet.Webpage.Services.Mail.MailService.<SendMail>d__18.MoveNext() in F:\Source\Repos\MyWorksheet\JPB.MyWorksheet\JPB.MyWorksheet.Webpage\Services\Mail\MailService.cs:line 63

Outlook Conditional Comment block - URL rendering issue

There is an issue rendering URL Query parameters that are inside of an Outlook Conditional Comment block.

Input:

<!--[if mso]>
   <a href="https://test.com?key1=value--123"></a>
<![endif]-->

Output:

<!--[if mso]>
   <a href="https://test.com?key1=value- -123"></a>
<![endif]-->

Note the additional space in the query parameter. This breaks URLs when rendering on desktop Outlook clients.

Messages don't render properly in current Outlook versions after processing

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.

activecampaign / style-merge Goto Github PK

style-merge's Introduction

StyleMerge

What's this for?

How to use this library:

style-merge's People

Contributors

Stargazers

Watchers

Forkers

style-merge's Issues

Incorrectly parsing calc(expr) functions

.NET Core compatibility

Bootstrap Css throws Exception

Outlook Conditional Comment block - URL rendering issue

Messages don't render properly in current Outlook versions after processing

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent