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.

Sign up for GitHub

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

Jump to bottom

Problem with option 'remove_style_tags=True' #110

Closed
midezz opened this issue Jun 10, 2021 · 3 comments · Fixed by #111
Closed

Problem with option 'remove_style_tags=True' #110

midezz opened this issue Jun 10, 2021 · 3 comments · Fixed by #111

Comments

@midezz
Copy link

midezz commented Jun 10, 2021

Hello!

There is a problem when we use css_inline with the option remove_style_tags=True. This problem appears when there are a few <style> tags in HTML.

HTML

<html>
<head>
<style>
body {
    margin: 0 auto !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    background: #f1f1f1;
}
a {
    text-decoration: none;
}
</style>
<style>
.test-class {
        color: #ffffff;
}
a {
        color: #17bebb;
}
</style>
</head>
<body>
<a class="test-class" href="https://example.com">Test</a>
</body>
</html>

Use css_inline with remove_style_tags=True

inliner = css_inline.CSSInliner(remove_style_tags=True)
html_without_style = inliner(html)

Result

<html>
<head>
<style>
.test-class {
        color: #ffffff;
}
a {
        color: #17bebb;
}
</style>
</head>
<body style="height: 100% !important;margin: 0 auto !important;padding: 0 !important;width: 100% !important;background: #f1f1f1;">
<a class="test-class" href="https://example.com" style="text-decoration: none;">Test</a>
</body>
</html>

The result is not correct. As you can see, not all styles apply to tag <a>, and not all tags <style></style> are removed.

Use css_inline without any options.

html_with_style = css_inline.inline(html)

Result

<html>
<head>
<style>
body {
    margin: 0 auto !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    background: #f1f1f1;
}
a {
    text-decoration: none;
}
</style>
<style>
.test-class {
        color: #ffffff;
}
a {
        color: #17bebb;
}
</style>
</head>
<body style="margin: 0 auto !important;width: 100% !important;height: 100% !important;background: #f1f1f1;padding: 0 !important;">
<a class="test-class" href="https://example.com" style="color: #ffffff;text-decoration: none;">Test</a>
</body>
</html>

The result is correct.
@Stranger6667
Copy link
Owner

Hi! Thanks for reporting, I'll take a look

Stranger6667 added a commit that referenced this issue Jun 10, 2021
@Stranger6667
fix: Ignored style tags when the document contains multiple of them…
1de7d74 
… and the `remove_style_tags: true` config option is used

Ref: #110
@Stranger6667 Stranger6667 mentioned this issue Jun 10, 2021
Merged
Stranger6667 added a commit that referenced this issue Jun 10, 2021
@Stranger6667
fix: Ignored style tags when the document contains multiple of them…
9964dc6 
… and the `remove_style_tags: true` config option is used

Ref: #110
@Stranger6667
Copy link
Owner

The fix is released in 0.7.1

@midezz
Copy link
Author

midezz commented Jun 10, 2021

Thank you very much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@Stranger6667 @midezz