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!
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.The resulting code is:
You can tell by the rearrangement of that Liquid
ifto 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
styleto each DOM node while rejecting the generated HTML may work.Appreciate the consideration!