Why does it remove :hover?

[binarykitchen]

When I have this in my css

a:hover {
  text-decoration: underline;
}

and it gets inlined, then inline-css does not include them for links. Why?

[kratam]

Yep, there should be an option to preserve the pseudo selectors in <style>.

[binarykitchen]

it is really breaking the stylings of the emails our live server is sending :(

[jonkemp]

How would you expect this to work?

[binarykitchen]

yep, i ve been thinking about this @jonkemp, this is a tough one to crack.

i see two solutions

a) use a bit of inline javascript

<a href='index.html' 
    onmouseover='this.style.textDecoration="none"' 
    onmouseout='this.style.textDecoration="underline"'>
    Click Me
</a>

b) generate a css file with pseudo elements only and we can include that at the top of the html

none of these solutions are elegant but i need that functionality

[jonkemp]

I don't consider (a) a good option. So that leaves (b). Could you use the extraCss option?

https://github.com/jonkemp/inline-css#optionsextracss

Not removing the style tag could be another option.

https://github.com/jonkemp/inline-css#optionsremovestyletags

[binarykitchen]

@jonkemp well, extraCss would make the style management unmaintainable. how can i automate this when all styles come from a single source?

would be cool to add a new option like extraCssForPseudo which filters out all the styles for pseudo elements and places them to the file?

(do not like the idea of removeStyleTags - this can lead to duplicate styles + instabilities where the inline ones override)

[kratam]

I think the easiest fix would be to add an options.preservePseudo, which would work similar to options.preserveMediaQueries.
I tried to extract rules containing pseudo parts based on the pseudoCheck.js, but couldn't figure out how to convert back the json (cssom?) to string.

[jonkemp]

So would it leave styles with pseudo selectors in a style tag then?

[kratam]

@jonkemp yes. Pseudo selectors are supported by a lot of clients (even gmail!), but you can't inline them, they have to live inside a <style> tag, just like the media queries.

[binarykitchen]

right, you see lots of clients support it. really would welcome a solution here to place them all in <style> at top of html.

[gakimball]

I think the same process that preserves @media in the <style> element could be applied to pseudo-classes, pseudo-selectors, and @font-face as well. Basically, it would be great if any "un-inlineable" CSS could be preserved in <style>.

Whether you bundle those settings into one option or add flags for each one, I'm not sure.

[gakimball]

I'll also reference #26 here. If this functionality is added, it would be great to see it extended to the extraCss option as well. So any media queries, hover states, etc. in the extraCss option also get preserved in the <style> tag.

[binarykitchen]

honestly, i do not care what solution you are going to pick. i just want to keep my pseudo selectors :)

[thasmo]

Styles which can't be inlined should be preserved in the style tag they origin from, imo. Basically this means all pseudo-elements (before, after, etc.), states (hover, active, etc.) and probably all @-rules (keyframes, media, font-face, etc.) and maybe even others should be preserved.

I'm not using this for emails only, so I think inline-css shouldn't judge about support of those selectors for email clients but rather preserve everything which can't be inlined.