CSS inliners

At the moment, I’m working with a company where I’m handling their email templates. One tool I found to be very useful are CSS inliners. I won’t be discussing Inky templates in this post.

I’ve been using https://www.campaignmonitor.com/resources/tools/css-inliner/ and for the most part, it works perfect. The only down side is that I have to visit the url, paste into the text area, click a button, wait for the page to reload, copy, and the paste the inlined html. It was okay at first, but by the 100th paste, it gets stale quick. That’s when I started looking into CLI options.

The tech explosion has been great, providing a lot of inlining CLI tools I wouldn’t have had otherwise. Everyone wants to make a name for themselves on the interwebs, and I can relate.

That being said, I’ve went through pretty much all the NodeJS one, and the only one I found comparable to campaign monitor’s is “inline-email” located here: https://github.com/freethinkingit/inline-email

Example command:

inline-email index.html –noInlineImages | pbcopy

The other solution I found acceptable is the python based premailer. It’s pretty much just like inline-email, except it gives you the option to not strip the style tags. I did find that useful in some occasions in which the element you wanted to affect didn’t exists until rendering (sometimes clients inject things on their own). Premailer can be found here: https://pypi.org/project/premailer/

Example command:

python -m premailer -f index.html | pbcopy

If anyone is having issues getting their emails to look correct across email clients either phone, web, software based, you should give the aforementioned tools a try, definitely made my life a lot easier.

Leave a comment

Your email address will not be published. Required fields are marked *