Magento 2: Inline styles for emails are applying partly

Question

For example,

There is a "New order" template. The styles for this template are placed in
app/design/frontend/Vendor/Theme/Magento_Sales/web/css/source/_email.less

Here's an example of styles:

.order-totals {
    background: #e0edf6;

    > tr {
        > th {
            font-weight: @font-weight__regular;
        }

        > th,
        > td {
            padding: @email-content__padding__base;
            text-align: right;
        }

        & + tr {
            th,
            td {
                padding-top: 0;
            }
        }
    }

    .price {
        white-space: nowrap;
    }
}

So, the selectors are all allowed by Magento 2. But actually the only applied styles are:

.order-totals{background: #e0edf6}

and

.price{white-space:nowrap}

When emails were being tested in the developer mode, all styles were applied, but now the mode is switched to production, css minify is on and styles applied partly. What can be wrong?

Answer 1

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

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

So, I found the answer by myself.

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. You can check your css by parsing it online here.

In my case, I'm looking for way to not minify only email styles when the Magento 2 css minify is on. If I don't find it, I will have to override every single email template and write the styles inline by myself, which is just not cool at all.

Good luck with customizing email templates in Magento 2, everybody.

Answer 3

I had the same problem, I solved by updating library pelago/emogrifier to lastest version from https://github.com/jjriv/emogrifier/releases and also by stopped minifying css file from admin.