Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ignore a HTML block #367

Open
max-arnold opened this issue May 3, 2024 · 0 comments
Open

Ignore a HTML block #367

max-arnold opened this issue May 3, 2024 · 0 comments

Comments

@max-arnold
Copy link

I have an email written in Markdown:

Hey!

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.

{% include "email/partials/button.html" with context %}

[Link]({{ button_url }})

It gets rendered into the following HTML using Jinja and then Python-Markdown:

<p>Hey!</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.</p>

<div>
    <a href="https://example.com">
        <span style="mso-text-raise: 16px">
            Continue reading &rarr;
        </span>
    </a>
</div>

<p><a href="https://example.com">Link</a></p>

Then I wrap it into the <main> tag for css-inliner to recognize it as a fragment, and then inline the following CSS:

p {
    font-size: 16px;
    line-height: 24px;
    color: #475569;
    margin: 0 0 16px;
}

a {
    color: #2563eb;
    text-decoration: underline;
}

Question: how can I prevent the inliner from touching any elements that are inside of the included button div without adding data-css-inline="ignore" to every <a> and <p>?

I tried using :has() and :not() CSS selectors, but they seem to be ignored:

a:not(*[data-raw] a) {
    color: #2563eb;
    text-decoration: underline;
}
<div data-raw>
    <a href="https://example.com">Continue reading</a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant