Template code between structural tags breaks DOM generation
- Dominant language
- JavaScript
- Stars
- 438
- Forks
- 77
- PR merge metrics
- No merged PRs in 30d
Description
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.
```liquid
{% if fulfillment.tracking_numbers.size > 0 %}
{% endif %}
Tracking
{% if fulfillment.tracking_company != blank %}
{{ fulfillment.tracking_company }}
{% endif %}
{% for tracking_number in fulfillment.tracking_numbers %}
{% if fulfillment.tracking_urls[forloop.index0] %}
{{ tracking_number }}{% unless forloop.last %}
{% endunless %}
{% else %}
{{ tracking_number }}{% unless forloop.last %}
{% endunless %}
{% endif %}
{% endfor %}
Placed
{{ created_at | date: format: 'date' }}
Status
{{ financial_status | capitalize }}, {{ fulfillment_status | capitalize }}
```
The resulting code is:
```liquid
{% if fulfillment.tracking_numbers.size > 0 %}
{% endif %}
Tracking
{% if fulfillment.tracking_company != blank %}
{{ fulfillment.tracking_company }}
{% endif %}
{% for tracking_number in fulfillment.tracking_numbers %}
{% if fulfillment.tracking_urls[forloop.index0] %}
{{ tracking_number }}{% unless forloop.last %}
{% endunless %}
{% else %}
{{ tracking_number }}{% unless forloop.last %}
{% endunless %}
{% endif %}
{% endfor %}
Placed
{{ created_at | date: format: 'date' }}
Status
{{ financial_status | capitalize }}, {{ fulfillment_status | capitalize }}
```
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!
Contributor guide
Assessment
This issue has not been assessed yet.