Mjml: Broken layout in MS Outlook with v4.0.5 and minify turned on

Created on 16 May 2018 · 4Comments · Source: mjmlio/mjml

When using v4.0.3, everything is OK. But in v4.0.5, closing tags for MSO conditions are missing when minifying is turned on, which causes nesting content recursively.

Reproduction Steps:

Code:

<mjml>
    <mj-body>
        <mj-section>
            <mj-column>
                <mj-text>
                    test
                </mj-text>
            </mj-column>
        </mj-section>
    </mj-body>
</mjml>

Generate HTML using MJML v4.0.5 with minifying turned on.
See generated code.
Test in MS Outlook.

Expected behavior:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
      xmlns:o="urn:schemas-microsoft-com:office:office">
<head>...</head>
<body>
<div><!--[if mso | IE]>
    <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600">
        <tr>
            <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div style="Margin:0px auto;max-width:600px;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
            <tbody>
            <tr>
                <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
                    <!--[if mso | IE]>
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td style="vertical-align:top;width:600px;"><![endif]-->
                    <div class="mj-column-per-100 outlook-group-fix"
                         style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                               style="vertical-align:top;" width="100%">
                            <tr>
                                <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <div
                                        style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
                                        test
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div><!--[if mso | IE]></td></tr>/<table><![endif]--></td>
            </tr>
            </tbody>
        </table>
    </div><!--[if mso | IE]></td></tr>/<table><![endif]--></div>
</body>
</html>

Observed behavior:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
      xmlns:o="urn:schemas-microsoft-com:office:office">
<head>...</head>
<body>
<div><!--[if mso | IE]>
    <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600">
        <tr>
            <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div style="Margin:0px auto;max-width:600px;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
            <tbody>
            <tr>
                <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
                    <!--[if mso | IE]>
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td style="vertical-align:top;width:600px;"><![endif]-->
                    <div class="mj-column-per-100 outlook-group-fix"
                         style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                               style="vertical-align:top;" width="100%">
                            <tr>
                                <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <div
                                        style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
                                        test
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div><!--[if mso | IE]><![endif]--></td>
            </tr>
            </tbody>
        </table>
    </div><!--[if mso | IE]><![endif]--></div>
</body>
</html>

MJML version:

4.0.5

Email clients the bug is seen on:

any MS Outlook on Windows

Source

dakur

👍1

Most helpful comment

@kmcb777 Yes, it looks like it works. Thank you!

dakur on 25 Jun 2018

🎉3

All 4 comments

@dakur Hi, thanks for reporting this. I can't reproduce the issue, even on a fresh 4.0.5 install. How did you use mjml exactly ? With the cli or with node ?

kmcb777 on 16 May 2018

@kmcb777 Using Git Bash, I ran npm install mjml. Node v9.11.1.
Then I ran ~/node_modules/.bin/mjml index.mjml -o index.html --config.minify=true.

It came to my mind while writing this that maybe the minifier causes this issue. So I've tried to remove --config.minify=true and... it worked! So the bug is about minifying. (added to bug description)

dakur on 17 May 2018

👍1

Hi @dakur we released a new beta for mjml 4.1, which you can install with npm install mjml@next, could you check if it resolves the problem you had ?

kmcb777 on 20 Jun 2018

@kmcb777 Yes, it looks like it works. Thank you!

dakur on 25 Jun 2018

🎉3

Was this page helpful?

0 / 5 - 0 ratings