CssToInlineStyles
CssToInlineStyles copied to clipboard
Add ability to override existing inline styles
Hi! It'd be nice if we can override existing styles in some cases. For example, double processing the same HTML but with different CSS produce undesired styles state for some cases
Let me explain the issue I found:
I have an index.html
<div class="foo"></div>
and style.css (version 1)
.foo {
color: red;
font-weight: bold;
}
the processed HTML looks like expected:
<div class="foo" style="color: red; font-weight: bold;"></div>
I store this html in database for further using. But then I needed to update some styles (remove font-weight, for example). I write style.css (version 2)
.foo {
color: red;
- font-weight: bold;
}
Re-run processing, but got not what I expected:
<div class="foo" style="color: red; font-weight: bold;"></div>
because of I need exactly:
<div class="foo" style="color: red"></div>
I think we should have optional parameter bool $overrideExisting = false
in convert
and inlineCssOnElement
methods.
What do you think @tijsverkoyen ? I can PR this if you agree my idea.
Well, inline styles win over CSS styles. And the tool respect that (not respecting that would be treated as a bug by not respecting how CSS works).
Your proposal would assume that any existing inline style is the result of a previous inlining, which seems totally specific to your own use case.
I see 2 solutions to solve that without changes in the library:
- storing the original HTML in your DB (alongside the processed one, or producing the processed HTML as a derivative), which would allow you to inline your CSS version 2 on the original HTML (and that would work even if the original HTML was using a few inline styles to override CSS styles too)
- doing a processing to remove existing
style
attribute before running the style inliner.