jonkemp / jonkemp/inline-css

Template code between structural tags breaks DOM generation

Open
#119 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.