FelixSchwarz / mjml-python

Python implementation for MJML - a framework that makes responsive-email easy
MIT License
73 stars 16 forks source link

Child selector styles not being applied #44

Closed caseyjhol closed 8 months ago

caseyjhol commented 9 months ago
.parent {
  overflow: hidden;
  box-shadow: 0 4px 10px 0px rgba(0, 0, 0, 0.1);
}
.parent > table > tbody > tr > td,
.parent > table > tbody > tr > td > div {
  border-radius: 3px;
}
<div class="parent">
    <table>
        <tbody>
            <tr>
                <td>
                    <div>
                        Test
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Actual:

<div class="parent" style="overflow: hidden; box-shadow: 0 4px 10px 0px rgba(0, 0, 0, 0.1);">
    <table>
        <tbody>
            <tr>
                <td>
                    <div>
                        Test
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Expected:

<div class="parent" style="overflow: hidden; box-shadow: 0 4px 10px 0px rgba(0, 0, 0, 0.1);">
    <table>
        <tbody>
            <tr>
                <td style="border-radius: 3px;">
                    <div style="border-radius: 3px;">
                        Test
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Originally I thought this was an issue with css-inline, but it's actually an issue on our end. BeautifulSoup is escaping the carets (> becomes &gt;), preventing child selectors from getting applied. We can either use html.unescape in mjStyle, or perhaps we can decode from BeautifulSoup using formatter=None. It might be better to limit this to mjStyle only and use html.unescape so as not to affect the rest of the HTML. I'm still investigating the best approach.