Magento 2 Minification of css is breaking email css

Question

Some of the css in email is broken after I enabled minification of css. I assume the reason being this :

email.css and email-inline.css are called from email header i.e header.html

But when I enable minification and deploy content, I dont see email.css and email-inline.css files instead I see their minified version as email.min.css and email-inline.min.css respectively.

So I tried to resolve the issue by renaming the calling in header.html. It dint help.

Then I copied the minifiled files and renamed them to .css files That also dint help.

What do u think might be the issue ?

UPDATE:

I have used inline css overall the email template. The css is broken for the Order Details in Order Confirmation email, return email etc. The Order Details comes from an xml internally calling a phtml file.

{{layout handle="sales_email_order_items" order=$order area="frontend"}}

Internally it calls items.phtml. I can not add inline css to this phtml file as this file is being used in frontend as well on order view page where the item details are rendered. How Can I take care of these sections in emails so that the css is not broken?

Email without minified css:

Email with minified css(broken css)

UPDATE:

I have now added css in the header.html in style tag and removed call to email-inline.css and email.css. When I view the email in outlook or gmail the css is still broken. However If I open the mail in browser(View in browser) the section looks fine.

Answer 1

As Sejal said, the recommended way is to use Magento 2 less files which is processed by Emogrifier.

The problem is that Magento 2 did not upgrade this library in composer.

I faced on this issue too and found a workaround :

Update your root composer.json and add this require line :

"pelago/emogrifier": "1.2.0 as 0.1.1"

Then do a composer update and your mail css should be working.

Moreover, I faced on this issue when I set production mode and not developer mode which enabled minification by default.

Latest Emogrifier release : https://github.com/jjriv/emogrifier/releases

Answer 2

Your best solution and best practice is to use inline styles for emails.

Make your email templates from scratch using inline styles, you'll have a much more uniform display across email platforms.

When I saw how different our emails looked in different clients, I was blown away. Since then, I try to keep it as simple as possible and the emails are almost never sent to spam anymore and the format is much more uniform.

Use tables and remember, positioning doesn't really work well with a lot of email clients or servers - hotmail is the one that always comes to mind

Answer 3

Magento 2 uses Emogrifier for parsing the source css and paste it to the email templates. So, if the css is minified by Magento 2, the Emogrifier doesn't seem to work well. For example, the css code in the question will be minified by Magento 2 the next way:

.order-totals {background: #e0edf6;}.order-totals>tr>th{font-weight: @font-weight__regular;}.order-totals>tr>th,.order-totals>tr>td{padding: @email-content__padding__base;text-align: right;}.order-totals+tr th,.order-totals+tr td{padding-top: 0;}.price{white-space: nowrap;}

The problem is that the Emogrifier doesn't "understand" the .order-totals>tr>th as a selector, because of spaces absence.

If we write something like: .order-totals > tr > th{font-weight: @font-weight__regular;} Parsing go well.

So, if you are using css minify in Magento 2, be sure that the Emogrifier parses your minified css correctly.

Ans Credits: Magento 2: Inline styles for emails are applying partly