premailer / css_parser

Ruby CSS Parser
Other
279 stars 110 forks source link

3-character hex codes should be converted to 6-character hex codes #94

Open devend711 opened 6 years ago

devend711 commented 6 years ago

Some browsers and email clients have trouble with 3-character hex codes:

https://litmus.com/blog/background-colors-html-email

We can help by making sure that any 3-character hex code is turned into the 6-character equivalent.

See this issue in the premailer/premailer repo: https://github.com/premailer/premailer/issues/109

Colors in html emails work best as a six character hex ('#ffffff') rather than '#fff' or 'white'. See nex3/sass#343 for details.

Somewhat unfortunately, sass will convert '#ffffff' to 'white'. When premailer inlines css generated by sass, it will insert 'white' instead of '#ffffff'.

nex3/sass#343 goes over the sass issue. I believe sass's position is correct by saying this is something that should be fixed in premailer.

Examples of how html email can be broken by using 'white' or '#fff':

https://joevandyk.litmus.com/pub/ddace69 (email with 'white' embedded in the email, same thing happens with '#fff') https://joevandyk.litmus.com/pub/350f5cf (exact same email, except with '#ffffff' in place of 'white')