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

Child selector styles not being applied #185

Closed
caseyjhol opened this issue May 16, 2023 · 6 comments
Closed

Child selector styles not being applied #185

caseyjhol opened this issue May 16, 2023 · 6 comments

Comments

@caseyjhol
Copy link
Contributor

caseyjhol commented May 16, 2023

.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>
@Stranger6667
Copy link
Owner

Hi! Sorry for the delay

That is strange, the code below works with the latest css-inline crate version:

fn main() {
    let html = r#"<html>
   <head>
      <title>Test</title>
      <style>.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;
         }
      </style>
   </head>
   <body>
      <div class="parent">
         <table>
            <tbody>
               <tr>
                  <td>
                     <div>
                        Test
                     </div>
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
   </body>
</html>"#;
    let inlined = css_inline::inline(&html).unwrap();
    assert_eq!(
        inlined,
        r#"<html><head><title>Test</title><style>.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;
}</style></head><body><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></body></html>"#
    );
}

which seems to be matching with the provided example (+ html/head/body tags)

What version do you use? any code snippets would be helpful

@Stranger6667
Copy link
Owner

I'm going to close this one because I can't reproduce the problem, but the provided reproducer inlines CSS as expected. Please feel free to re-open the issue in case there is more info to dig into.

@caseyjhol
Copy link
Contributor Author

Sorry - been busy with another project. Will update ASAP. I'm using the Python crate FWIW.

@Stranger6667
Copy link
Owner

@caseyjhol I somehow missed your message :( Let me know if you need any help with solving the issue.

There were a few new versions that mainly improve performance, but the mentioned test case still passes at the moment. Also, all changes are released for css-inline Python bindings too

@caseyjhol
Copy link
Contributor Author

To close the loop here, I figured out what the issue was. My CSS was getting escaped before passing into css-inline. As a result, > became &gt;, and those selectors were then getting ignored. So, definitely an issue on my end. Apologies for misreporting and thanks for checking into this for me.

@Stranger6667
Copy link
Owner

Thank you for confirmation!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants