Skip to content

Fix premailer with vite in development mode

What does this MR do and why?

Fix premailer with vite in development mode

premailer-rails has multiple strategies of loading CSS. We configured it to consume it from the asset pipeline, which is correct for production. But during development with vite the CSS gets served directly from vite over the network. So we enable the network lookup strategy in dev mode.

Fix mailer layout with vite

  1. We now can use universal_stylesheet_link_tag to load the CSS, which will default to the asset pipeline in production mode. If vite is enabled, it will deliver the asset over the network.
  2. Some styles are inlined into the layout. This doesn't work properly with vite in development mode. So we choose the same strategy as we did in app/views/layouts/errors.html.haml

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

What Before After
/rails/mailers/notify/pipeline_failed_email Screenshot_2024-07-02_at_15.20.03 Screenshot_2024-07-02_at_15.18.30
/rails/mailers/license_mailer/approaching_active_user_count_limit.html Screenshot_2024-07-02_at_14.24.58 Screenshot_2024-07-02_at_15.23.06

How to set up and validate locally

  1. Make sure you have vite enabled.
  2. Check out the branch.
  3. Remove pre-compiled CSS assets: rm app/assets/builds/*.css
  4. Make sure to restart rails due to the premailer config change: gdk restart rails-web rails-background-jobs
  5. Navigate to the pages above
Edited by Lukas 'ai-pi' Eipert

Merge request reports