Embed email stylesheet directly in mailer header#2724
Conversation
Eliminate the external `/assets/email.css` dependency for HTML emails by deleting the stylesheet and embedding the full CSS in a `<style>` block inside the shared mailer header partial. This avoids stale/cached CSS and asset-host resolution issues. Premailer inlines the `.soc-btn.*` rules, so the per-element inline `background-color` styles added by the previous fix are no longer needed and have been reverted. Also add a shared RSpec example that verifies every mailer rendering the social footer inlines the five social-button colours, does not reference `/assets/email.css`, and embeds the `<style>` block. Included in all five affected mailer specs. - Delete `app/assets/stylesheets/email.css` - Embed CSS in `app/views/shared_mailers/_header.html.haml` - Revert inline social-link colours from `app/views/shared_mailers/_social.html.haml` - Update `app/assets/images/email/README.md` - Add `spec/support/shared_examples/behaves_like_email_with_social_links.rb` - Include shared example in `spec/mailers/*_invitation_mailer_spec.rb` and `spec/mailers/feedback_request_mailer_spec.rb`
007d3e3 to
1d3522a
Compare
|
Shouldn’t the |
|
Hi @gnclmorais, that’s a very fair question — I’m not married to embedding the CSS in HAML. I went that route because it was the simplest way to guarantee we never hit the stale-asset problem again. You’re right that The embedded A middle ground I’d be happy to switch to: keep # config/initializers/premailer.rb
Premailer::Rails.config.merge!(
preserve_styles: true,
strategies: [:filesystem, :asset_pipeline]
)
Would you prefer that approach? Happy to update the PR if so. |
2 participants
Problem
Emails rely on premailer fetching
/assets/email.cssfrom the configured asset host. Even after #2715 switched the link from a hardcoded path toasset_path("email.css"), the resolved asset can still be stale or cached incorrectly in production. PR #2722 worked around this by inlining the social-button background colours directly in the template.Solution
Move the entire email stylesheet into a
<style>block insideapp/views/shared_mailers/_header.html.haml. Premailer inlines these rules at delivery time, so the email carries its own CSS and no longer depends on resolving an external stylesheet.Changes
app/assets/stylesheets/email.cssin the<head>ofshared_mailers/_header.app/assets/stylesheets/email.css.background-colorstyles fromshared_mailers/_social(now handled by the embedded.soc-btn.*rules).<style>block is present.shared_mailers/_social:WorkshopInvitationMailer,VirtualWorkshopInvitationMailer,EventInvitationMailer,MeetingInvitationMailer, andFeedbackRequestMailer.Verification
bundle exec rspec spec/mailers/— 75 examples, 0 failures.make test— 1158 examples, 0 failures.bundle exec haml-lint app/views/shared_mailers/_header.html.haml— 0 lints.