peterbe / premailer

Turns CSS blocks into style attributes
https://premailer.io
BSD 3-Clause "New" or "Revised" License
1.06k stars 188 forks source link

Inline !important styles #164

Open ccorcos opened 8 years ago

ccorcos commented 8 years ago

Premailer currently doesnt inline important styles.

from premailer import Premailer

html = """
<html>
<head>
  <title></title>
</head>
<body>
  <style type="text/css">.something { display:none !important; }</style>
  <div class="something">blah</div>
</body>
</html>
"""

print Premailer(html, remove_classes=False, 
                      keep_style_tags=True, 
                      strip_important=False).transform()

# <html>
# <head>
#   <title></title>
# </head>
# <body>
#   <style type="text/css">.something { display:none !important; }</style>
#   <div class="something" style="display:none">blah</div>
# </body>
# </html>

I've tried going through the course and figuring out why this doesnt work, but its harder than I thought!

elidickinson commented 8 years ago

I was under the impression that !important changes the precedence for cascading rules and that it was out-of-spec to include !important in an inline style (i.e. that premailer is already doing the right thing according to CSS2 spec).

Out of curiosity, is there a specific problem you're trying to solve by including !important in the style="" attribute? I would think that in most cases it would have no impact and I think it may actually introduce new problems in some buggy email clients.

ccorcos commented 8 years ago

Gmail doesnt respect "display: none" unless there is an inline !important tag. This is important for us because we're using the checkbox hack to get accordions in emails

OrangeDog commented 8 years ago

It looks like it supports them to me. Otherwise #170 wouldn't be a thing. Also, this duplicates #150

ccorcos commented 8 years ago

hmm