SyntaxErr on <h1> with !important

Feeding the following into transform() results in a SyntaxErr:

<style type="text/css">
h1 { border:1px solid black }
p { color:red;}
</style>
<p>Hey</p>
<h1 style="display: block;font-family: Helvetica;font-size: 26px;font-style: normal;font-weight: bold;line-height: 100%;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;color: #202020 !important;">Some Stuff</h1>

Results in:

SyntaxErr: PropertyValue: Missing token for production Choice(ColorValue, Dimension, URIValue, Value, variable, MSValue, CSSCalc, function): ('CHAR', '!', 1, 230)

Removing the !important from the inline style on the H1 allows it to be inlined as expected.

[peterbe]

For your information, Gmail does need !important for certain things such as display:none. But that apparently breaks Outlook: https://github.com/peterbe/premailer/issues/150

[elidickinson]

That may happen to work in some browsers, but is it to the spec? I’m under the impression it is not technically valid HTML/CSS…

Regardless you probably don’t ever want to use inline !important in emails: https://www.campaignmonitor.com/blog/email-marketing/2010/05/outlook-2007-and-the-inline-important-declaration/

On Oct 2, 2016 5:56 AM, “Christof” [e-mail] wrote:

Basically, putting !important in an inline style doesn’t make sense because nothing is more important than inline styles already.

Sorry, not true. See http://jsbin.com/vurufej/edit?html,css,output

Stylesheet !imporant overwrites inline style attributes and only if these are !important too cannot be overwritten.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/peterbe/premailer/issues/133#issuecomment-250963390, or mute the thread https://github.com/notifications/unsubscribe-auth/AACuz25-ETMJdfAkecPMWaTDNgg7gTq2ks5qv3_hgaJpZM4Fn2wY .