3

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?

4

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

|improve this answer|||||
  • Thanks for this answer! I think this should be reported to Magento development team. I'll be making more emails in couple weeks and test the latest version. – Alex Jun 22 '17 at 8:27
  • There is already a github issue on this topic, and I reported this issue on the Enterprise support. – Franck Garnier Jun 22 '17 at 13:26
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.

|improve this answer|||||
  • There's a related issue on Github - Emogrifier – Chedaroo Apr 20 '17 at 12:29
  • @RichJ, yes I've reported this immediately after posting the answer. But my skills are not strong enough to help the Emogrifier devs to investigate this issue. Still, any help on Github will be remarkably useful! – Alex Apr 21 '17 at 16:04
  • I've hit the same error which was isolated to magento/theme-frontend-blank/css/source/_email.less. Submitted a ticket to be fixed upstream github.com/magento/magento2/issues/10196 – Sergei Filippov Jul 10 '17 at 10:07
1

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.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.