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
- 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. - 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 |
![]() |
![]() |
/rails/mailers/license_mailer/approaching_active_user_count_limit.html |
![]() |
![]() |
How to set up and validate locally
- Make sure you have vite enabled.
- Check out the branch.
- Remove pre-compiled CSS assets:
rm app/assets/builds/*.css
- Make sure to restart rails due to the premailer config change:
gdk restart rails-web rails-background-jobs
- Navigate to the pages above
Edited by Lukas 'ai-pi' Eipert