Question

If you look at this CssToInlineStyles class on github. It is essentially trying to make CSS all inline. However, it has priority all wrong when it comes to the already inline CSS being overwritten by the definitions in the style block!

I think on line 312 I need to put in a condition to make sure the inline styles already present should never be overwritten by any definition in the CSS properties. But it looks like it isn’t that easy!

Any ideas? I’ve tried contacting the owner of the class, no reply. If I fix this, I’ll make a pull request on github.

Update

If you have the following in a style block:

p{font-family:Arial;font-size:0.9em;color:#53534a;} 
.webv {font-size: 10px; padding:5px 0 0 150px}

Then if you have a p tag like so:

<p class="webv" >Testing</p>

Then the class .webv needs to take effect in terms of font-size.

Update 2

Hakre’s solution works well but there is one case it doesn’t work. For example if you have this style block:

  *{padding:0;margin:0;}
  h1{padding-bottom:10px;}

The padding for the h1 is still 0, the second h1 doesn’t take over which it should! So it looks like this:

<h1 style="padding:0; margin:0;">Test</h1>

Answer 1

Fortunately the owner of this class has fixed this issue! The updated class can be found here.