Outlook tag is not working properly

ivanpajon commented 1 day ago

Maizzle Version: 4.8.9
Node.js Version: 22.4.1

I think tag has some weird behavior. When using legacy comments like  content inside that comments are rendered properly in browser. But when I switch to tag the content of some of them are rendered outside the comment and breaks the html tree.

Code with legacy comments:

<!-- Sections -->
<table class="mobile:w-10/12 w-[540px]" border="0" cellpadding="0" cellspacing="0" role="presentation">
  <tbody>
    <!-- Section 1 -->
    <tr>
      <td class="py-5 [font-size:0px]" align="center" valign="top" dir="rtl">
        <!--[if (gte mso 9)|(IE)]>
        <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
          <tr>
            <td valign="top" style="width: 255px;">
        <![endif]-->

        <div class="inline-block align-top">
          Some text
        </div>

        <!--[if (gte mso 9)|(IE)]>
            </td><td valign="top" style="width:285px;">
        <![endif]-->

        <div class="inline-block align-top">
          Some image
        </div>

        <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
        <![endif]-->
      </td>
    </tr>

    <!-- Section 2 -->
    <tr>
      <td class="py-5 [font-size:0px]" align="center" valign="top">Section 2</td>
    </tr>

    <!-- Section 3 -->
    <tr>
      <td class="py-5 [font-size:0px]" align="center" valign="top" dir="rtl">Section 3</td>
    </tr>
  </tbody>
</table>

Rendered html in browser (good):

Code with outlook tags:

<!-- Sections -->
<table class="mobile:w-10/12 w-[540px]" border="0" cellpadding="0" cellspacing="0" role="presentation">
  <tbody>
    <!-- Section 1 -->
    <tr>
      <td class="py-5 [font-size:0px]" align="center" valign="top" dir="rtl">
        <outlook gte="2000">
        <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
          <tr>
            <td valign="top" style="width: 255px;">
        </outlook>

        <div class="inline-block align-top">
          Some text
        </div>

        <outlook gte="2000">
            </td><td valign="top" style="width:285px;">
        </outlook>

        <div class="inline-block align-top">
          Some image
        </div>

        <outlook gte="2000">
            </td>
          </tr>
        </table>
        </outlook>
      </td>
    </tr>

    <!-- Section 2 -->
    <tr>
      <td class="py-5 [font-size:0px]" align="center" valign="top">Section 2</td>
    </tr>

    <!-- Section 3 -->
    <tr>
      <td class="py-5 [font-size:0px]" align="center" valign="top" dir="rtl">Section 3</td>
    </tr>
  </tbody>
</table>

Rendered html in browser (bad):

And also would be nice to have posibility to specify IE in outlook tag.

cossssmin commented 1 day ago

Unfortunately for now it can’t work like that, the parser in PostHTML doesn’t support not closing tags out of the box, it’ll close them automatically. That’s why we don’t have such examples in the tag’s docs.

The reason it exists is so that you can use Tailwind classes or tags/attributes from Maizzle inside of it, before it gets turned into a string. Parsers don’t treat strings as HTML, they just return them as-is.

If we can ever find a way to make it work as you described, I’d be more than happy to do it :)

cossssmin commented 1 day ago

And also would be nice to have posibility to specify IE in outlook tag.

What would be the use case? All Outlooks that support MSO conditionals (2006-2021) work with the current if mso statement.

ivanpajon commented 1 day ago

What would be the use case? All Outlooks that support MSO conditionals (2006-2021) work with the current if mso statement.

I'm not an expert in html emails, but most examples I found use <!--[if (gte mso 9)|(IE)]> but I don't know if it is really necessary the "IE".

maizzle / framework

Outlook tag is not working properly #1362