{"id":845,"date":"2019-08-13T12:38:30","date_gmt":"2019-08-13T19:38:30","guid":{"rendered":"http:\/\/www.jacksonleung.com\/blog\/?p=845"},"modified":"2019-08-13T17:01:46","modified_gmt":"2019-08-14T00:01:46","slug":"css-inliners","status":"publish","type":"post","link":"http:\/\/www.jacksonleung.com\/blog\/css-inliners\/","title":{"rendered":"CSS inliners"},"content":{"rendered":"\n<p>At the moment, I&#8217;m working with a company where I&#8217;m handling their email templates. One tool I found to be very useful are CSS inliners. I won&#8217;t be discussing Inky templates in this post.<\/p>\n\n\n\n<p>I&#8217;ve been using <a href=\"https:\/\/www.campaignmonitor.com\/resources\/tools\/css-inliner\/\">https:\/\/www.campaignmonitor.com\/resources\/tools\/css-inliner\/<\/a> 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&#8217;s when I started looking into CLI options.<\/p>\n\n\n\n<p>The tech explosion has been great, providing a lot of inlining CLI tools I wouldn&#8217;t have had otherwise. Everyone wants to make a name for themselves on the interwebs, and I can relate.<\/p>\n\n\n\n<p>That being said, I&#8217;ve went through pretty much all the NodeJS one, and the only one I found comparable to campaign monitor&#8217;s is &#8220;inline-email&#8221; located here: <a href=\"https:\/\/github.com\/freethinkingit\/inline-email\">https:\/\/github.com\/freethinkingit\/inline-email<\/a><\/p>\n\n\n\n<p>Example command:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>inline-email index.html &#8211;noInlineImages | pbcopy<\/p><\/blockquote>\n\n\n\n<p>The other solution I found acceptable is the python based premailer. It&#8217;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&#8217;t exists until rendering (sometimes clients inject things on their own). Premailer can be found here:  <a href=\"https:\/\/pypi.org\/project\/premailer\/\">https:\/\/pypi.org\/project\/premailer\/<\/a><\/p>\n\n\n\n<p>Example command:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>python -m premailer -f index.html  | pbcopy<\/p><\/blockquote>\n\n\n\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At the moment, I&#8217;m working with a company where I&#8217;m handling their email templates. One tool I found to be very useful are CSS inliners. I won&#8217;t be discussing Inky templates in this post. I&#8217;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 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.jacksonleung.com\/blog\/css-inliners\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;CSS inliners&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,6],"tags":[],"class_list":["post-845","post","type-post","status-publish","format-standard","hentry","category-programming","category-work","entry"],"_links":{"self":[{"href":"http:\/\/www.jacksonleung.com\/blog\/wp-json\/wp\/v2\/posts\/845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.jacksonleung.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jacksonleung.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jacksonleung.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jacksonleung.com\/blog\/wp-json\/wp\/v2\/comments?post=845"}],"version-history":[{"count":2,"href":"http:\/\/www.jacksonleung.com\/blog\/wp-json\/wp\/v2\/posts\/845\/revisions"}],"predecessor-version":[{"id":847,"href":"http:\/\/www.jacksonleung.com\/blog\/wp-json\/wp\/v2\/posts\/845\/revisions\/847"}],"wp:attachment":[{"href":"http:\/\/www.jacksonleung.com\/blog\/wp-json\/wp\/v2\/media?parent=845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jacksonleung.com\/blog\/wp-json\/wp\/v2\/categories?post=845"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jacksonleung.com\/blog\/wp-json\/wp\/v2\/tags?post=845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}