search

attilabuti / vscode-mjml

This repo is archived. MJML preview, lint, compile for Visual Studio Code.
https://marketplace.visualstudio.com/items?itemName=attilabuti.vscode-mjml
MIT License
144 stars 59 forks source link

mj-table translates incorrectly #34

Closed MisinformedDNA closed 6 years ago

MisinformedDNA commented 6 years ago

If I take the following markup

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-table>
          <thead>
            <tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">
              <th style="padding: 0 15px 0 0;">Year</th>
              <th style="padding: 0 15px;">Language</th>
              <th style="padding: 0 0 0 15px;">Inspired from</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <td style="padding: 0 15px 0 0;">1995</td>
              <td style="padding: 0 15px;">PHP</td>
              <td style="padding: 0 0 0 15px;">C, Shell Unix</td>
            </tr>
          </tfoot>
          <tbody>
            <tr>
              <td style="padding: 0 15px 0 0;">1995</td>
              <td style="padding: 0 15px;">JavaScript</td>
              <td style="padding: 0 0 0 15px;">Scheme, Self</td>
            </tr>
          </tbody>
        </mj-table>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

mjml.io translates this to HTML differently than this plugin.

Using mjml.io, I get

<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
        <thead>
            <tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">
              <th style="padding: 0 15px 0 0;">Year</th>
              <th style="padding: 0 15px;">Language</th>
              <th style="padding: 0 0 0 15px;">Inspired from</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <td style="padding: 0 15px 0 0;">1995</td>
              <td style="padding: 0 15px;">PHP</td>
              <td style="padding: 0 0 0 15px;">C, Shell Unix</td>
            </tr>
          </tfoot>
          <tbody>
            <tr>
              <td style="padding: 0 15px 0 0;">1995</td>
              <td style="padding: 0 15px;">JavaScript</td>
              <td style="padding: 0 0 0 15px;">Scheme, Self</td>
            </tr>
          </tbody>
      </table>

Using vscode-mjml, I get 

<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 class="" 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;">
                <table cellpadding="0" cellspacing="0" width="100%" border="0" style="cellspacing:0;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
                  <thead>
                    <tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">
                      <th style="padding: 0 15px 0 0;">Year</th>
                      <th style="padding: 0 15px;">Language</th>
                      <th style="padding: 0 0 0 15px;">Inspired from</th>
                    </tr>
                  </thead>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td style="padding: 0 15px 0 0;">1995</td>
      <td style="padding: 0 15px;">PHP</td>
      <td style="padding: 0 0 0 15px;">C, Shell Unix</td>
    </tr>
  </tfoot>
  <tr>
    <td style="padding: 0 15px 0 0;">1995</td>
    <td style="padding: 0 15px;">JavaScript</td>
    <td style="padding: 0 0 0 15px;">Scheme, Self</td>
  </tr>
</table>

Notice that the tbody tag disappears from the last element. But more importantly, the thead wraps itself inside of two table elements.

attilabuti commented 6 years ago

@MisinformedDNA The issue is probably fixed on 1.5.0.