Stranger6667 / css-inline

High-performance library for inlining CSS into HTML 'style' attributes
https://css-inline.org/
MIT License
232 stars 29 forks source link

Ignore a HTML block #367

Open max-arnold opened 3 months ago

max-arnold commented 3 months ago

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>