Template code between structural tags breaks DOM generation

josho commented 1 year ago

Using this in my workflow for generating emails. Works wonderfully except when there's template code that conditionally renders DOM. My hunch is cheerio trips up because the template code confuses the DOM generation, and inline-css returns back the cheerio HTML. This may be something for cheerio, but IMO it's a crucial feature.

Example excerpt being run through inline-css. The templating language here is Liquid and has been added to the compile options as codeBlocks: { LIQ: { start: '{%', end: '%}' }}, along with EJS & HBS.

<tr>
  <td class="wrapper-tight">
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" class="info-table">
      <tbody>
        {% if fulfillment.tracking_numbers.size > 0 %}
          <tr>
            <td valign="top">Tracking</td>
            <td valign="top">
              {% if fulfillment.tracking_company != blank %}
                {{ fulfillment.tracking_company }}
              {% endif %}
              {% for tracking_number in fulfillment.tracking_numbers %}
                {% if fulfillment.tracking_urls[forloop.index0] %}
                  <a href="{{ fulfillment.tracking_urls[forloop.index0] }}">{{ tracking_number }}</a>{% unless forloop.last %}<br>{% endunless %}
                {% else %}
                  {{ tracking_number }}{% unless forloop.last %}<br>{% endunless %}
                {% endif %}
              {% endfor %}
            </td>
          </tr>
        {% endif %}
        <tr>
          <td valign="top">Placed</td>
          <td valign="top">{{ created_at | date: format: 'date' }}</td>
        </tr>
        <tr>
          <td valign="top">Status</td>
          <td valign="top">{{ financial_status | capitalize }}, {{ fulfillment_status | capitalize }}</td>
        </tr>
      </tbody>
    </table>
  </td>
</tr>

The resulting code is:

<tr>
  <td class="wrapper-tight" style="...">

        {% if fulfillment.tracking_numbers.size > 0 %}

        {% endif %}
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" class="info-table" style="...">
      <tbody><tr>
            <td valign="top" style="...">Tracking</td>
            <td valign="top" style="...">
              {% if fulfillment.tracking_company != blank %}
                {{ fulfillment.tracking_company }}
              {% endif %}
              {% for tracking_number in fulfillment.tracking_numbers %}
                {% if fulfillment.tracking_urls[forloop.index0] %}
                  <a href="{{ fulfillment.tracking_urls[forloop.index0] }}" style="...">{{ tracking_number }}</a>{% unless forloop.last %}<br>{% endunless %}
                {% else %}
                  {{ tracking_number }}{% unless forloop.last %}<br>{% endunless %}
                {% endif %}
              {% endfor %}
            </td>
          </tr><tr>
          <td valign="top" style="...">Placed</td>
          <td valign="top" style="...">{{ created_at | date: format: 'date' }}</td>
        </tr>
        <tr>
          <td valign="top" style="...">Status</td>
          <td valign="top" style="...">{{ financial_status | capitalize }}, {{ fulfillment_status | capitalize }}</td>
        </tr>
      </tbody>
    </table>
  </td>
</tr>

You can tell by the rearrangement of that Liquid if to before the table that it's trying to make syntactically valid HTML out of the control flow around the TR.

Potentially, a flag to use htmlparser2 in inline-css' cheerio call may have a more "relaxed" approach and work. Haven't tested it manually. Otherwise, some ability to preserve the style to each DOM node while rejecting the generated HTML may work.

Appreciate the consideration!

eonae commented 1 year ago

It appears that inline-css@3 (uses cheerio@0.22.x under the hood) works with this just fine. Didn't have time to dig into it, would be nice to use latest version... But maybe this workaround will save someones time

eonae commented 1 year ago

htmlparser2 doesn't make difference btw

jonkemp / inline-css

Template code between structural tags breaks DOM generation #119