For example,

There is a "New order" template. The styles for this template are placed in

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 {
            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}



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?


3 Answers 3


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


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

  • 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, 2017 at 8:27
  • 1
    There is already a github issue on this topic, and I reported this issue on the Enterprise support. Jun 22, 2017 at 13:26

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.

  • There's a related issue on Github - Emogrifier
    – Chedaroo
    Apr 20, 2017 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, 2017 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 Jul 10, 2017 at 10:07

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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