Preserve 6 character color codes for Lotus Notes

[elidickinson]

As you may be aware, the IBM/Lotus Notes email client has poor HTML support. One of its quirks is that it sometimes (only sometimes!) gets confused by "short" color codes like #FFF instead of #FFFFFF. Which is unfortunate because Premailer is automatically converting to the short versions when possible. Any idea how to get it to stop? Or even where that's coming from? I'm guessing somewhere deep in cssselect...

This HTML:

<table style="background-color:#F00; border-collapse:collapse; position:relative;" bgcolor="#F00" valign="top">
    <tr>
        <td>
            <p style="color:#FFFFFF">This is in a table with background of #F00 (red) </p>
        </td>
    </tr>
</table>


<table style="background-color:#FF0000; border-collapse:collapse; position:relative;" bgcolor="#FF0000" valign="top">
    <tr>
        <td>
            <p style="color:#FFFFFF">This is in a table with background of #FF0000 (red) </p>
        </td>
    </tr>
</table>

Looks like this in Notes 8.5:

[elidickinson]

I think Notes is only looking at bgcolor attribute anyway, so maybe I can fix this by just tweaking _style_to_basic_html_attributes to expand short color codes.

[peterbe]

Have you had any luck finding where the conversion of #ffffff to #fff gets automatically done so we can stop it?

[elidickinson]

Well, yes and no. It's somewhere inside cssutils:

In [10]: cssutils.parseString('h1 { color:#FFFFFF }').cssText
   ....:
Out[10]: 'h1 {\n    color: #FFF\n    }'

Though I can hardly blame them since normally I'd prefer the shorter version... it's just problematic with old and broken user agents.

[peterbe]

If there's no easy and obvious way to control that from outside cssutils then I suspect it's futile and the best course of action would be Premailer(html).transform().replace('#FFF', '#FFFFFF') or something smarter.

[elidickinson]

For future reference:

# Hacky fix for Lotus Notes. It doesn't handle three character bgcolor codes well
#   see https://github.com/peterbe/premailer/issues/114
short_bgcolor_codes = re.compile(r'bgcolor="#([0-9A-F])([0-9A-F])([0-9A-F])"', re.I)
inlined_html = short_bgcolor_codes.sub(r'bgcolor="#\1\1\2\2\3\3"', inlined_html) # double digits to enlongen color code```

[peterbe]

So it's only applicable for bgcolor only? Wow!
Perhaps we ought to just stick that into premailer.

[elidickinson]

I wouldn't swear that's the only problematic case, but it's the only one that has bit us so far. I wouldn't be surprised if stuff like <font color=XXX> has the same problem, but that doesn't come up too often.

I don't love munging HTML with regexs so I try to make it as narrow as possible.

[peterbe]

We can put a big fat comment that explains the hack.

[mpj17]

I am trying out the regular expression by @elidickinson also, as I have also struck the same problem. The Litmus blog has a post about the problem with 3-value hex colours.

[mpj17]

The reports back is that the fix worked (I also dropped transparent colours).

@peterbe, would you like a unit-test and hack in Premailer, or shall I try and take this up with the CSS Utils folks and try and get a flag in upstream?

[peterbe]

@mpj17 Yes, I think we should do it in premailer. As long as there's a healthy comment the explains the why, I think it's useful.

[mpj17]

Ok, I will try and work on it next Tuesday evening.

[peterbe]

Should be solved with e5f73b0