Skip to content

Compile CSS custom properties to hex values in mailers stylesheets

Scott de Jonge requested to merge sdejonge-mailers-css-compile-css-custom-properties into master

What does this MR do and why?

Compile CSS custom properties to hex values in mailers stylesheets

  • Add PostCSS plugins
  • Move mailer stylesheets to mailers/ directory
  • Update import paths
  • Remove asset precompile rules, use wildcard
  • Add mailers processor to CSS compile script

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

Screenshots or screen recordings

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

How to set up and validate locally

Validate CSS

  1. Run yarn build:css --watch
  2. Have a look at e.g. app/assets/builds/mailers/notify_enhanced.css. A lot of custom properties should now be inlined (if not, all)

Validate email styles

  1. Remove pre-compiled CSS assets: rm app/assets/builds/**/*.css
  2. Navigate to the pages above
  3. Write a comment which mentiones a few labels.
  4. Go to /rails/letter_opener. Wait until the notification email "comes through"
Edited by Lukas 'ai-pi' Eipert

Merge request reports