Background colour on social links in emails not working#2722
Open
Agboolafeyikemi wants to merge 1 commit into
Open
Background colour on social links in emails not working#2722Agboolafeyikemi wants to merge 1 commit into
Agboolafeyikemi wants to merge 1 commit into
Conversation
Inline the background colour on each social link in the shared mailer partial instead of relying on email.css. Email clients only reliably render inline styles, and production emails have been inlining a stale cached copy of /assets/email.css that predates the current social links, which left every button except Facebook with invisible white text on no background. With the colours inlined in the template, the buttons render correctly regardless of which version of the stylesheet premailer resolves. Closes codebar#2634.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Inlines the
background-coloron each social link inshared_mailers/_social.html.haml, so the buttons in email footers render with their colours regardless of which version ofemail.cssgets inlined by premailer.Closes #2634
Root cause
Production emails have been inlining a stale copy of
/assets/email.css— the undigested URL that was hard-coded in the mailer header until #2715. codebar.io still serves a pre-November-2024 version of that file (verified byte-for-byte against git history), cached withCache-Control: public, max-age=31556952. That version only has background rules fora.fbanda.tw, so only the Facebook button gets a colour with today's markup exactly what the screenshots on #2634 and #2437 show. This is also why the fix in #2437 didn't take effect: it changed the source file, but emails kept inlining the stale cached copy.Full write-up in this comment on the issue.
Why inline styles
Email clients only reliably render inline styles, and critical visual styles in emails shouldn't depend on a separately fetched stylesheet. With the colours inline in the template, the buttons are correct even if
email.cssresolution fails or serves stale content. The CSS rules remain as a fallback.How this was tested
background-colorfor each social link (it asserts pre-premailer output, so it fails if the colours ever move back to being stylesheet-only).bundle exec rspec spec/mailers/workshop_invitation_mailer_spec.rb14 examples, 0 failures. RuboCop clean on the changed lines.