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

[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.

[binarykitchen]

@thasmo good argument, i second that. inline-css isn't here for email clients only.

so, what happens now? can we decide for a solution and go ahead please?

[jonkemp]

go ahead please?

So you're saying I should get busy coding this? You make it sound so easy. 😄

[AnthonyFromTheVault]

Just wanted to chime in a second the feature request, I expected the inline tool to preserve CSS styles I wrote in sass, regardless of if they were supported in some email clients but not others.

As a front-end designer... I have nothing but admiration for the magical sorcery it will take to accomplish this :)

-- Hot tip for anyone that comes across this trying to find a workaround for email: Write the styles manually at the top of the html file. It's not perfect, but for email clients that support pseudo-elements (everything other than outlook), it will work.

[callaginn]

I'm having this issue too and changing the inline-css plugin options doesn't help. Only workaround I've figured out is wrapping any hover styles in a @media all tag. However, I've heard Outlook might be ignoring anything inside a @media tag?

Wish this plugin would inline everything except :hover and @media tags and then insert those tags into a

Anyone else figured out other solutions? I'm trying to build a simple email system on Foundation for Emails, but have been having nothing but trouble. Outlook really sucks.

[jonkemp]

Juice seems to support this. You can try that. The reason I made this in the first place is that Juice was no longer being maintained. It is now. I am not really interested in developing new features at this time.

https://github.com/Automattic/juice