PicoCSS in Emails

[vardumper]

I've been playing around with templated emails using twig, twig-cssinliner and symfony/mailer.
My findings so far:

• even the plain unstyled HTML looks good
• Inlining the styles with the Twig Extension does not work as expected, the Mail Renderers of Apple Mail don't seem to support native CSS variables.
• referencing the stylesheet in the head with link works in Apple Mail (even dark mode's emails sort of work). Although break points might need adjustment for emails (because of the reduced window size).
• I am experiencing some weird behavior though, as Apple Mail seem to get confused, displaying the same email in dark and/or light mode. Maybe some sort of Internal caching issue.
• To get HTML Emails work perfectly, I need some postcss plugin that converts var() and calc() from my my picoss-email.css into plain var-less CSS. Hoping that this step will enable CssInliner to successfully inline styles for use in email clients.
  And with this step I did not succeed, yet.

There are supposedly a couple of plugins that do this (postcss-variables, postcss-css-variables, postcss-advanced-variables) , but I could not get them to process pico. Tried this with grunt and plain node.
I'd highly appreciate feedback in order to "downgrade" for email clients.
All help is welcome.

[vardumper]

Could someone test if they can postcss the functions, and variables "away"? I'd appreciate it. Maybe I just don't know how to properly use postcss

[abernh]

Email clients are mostly stuck in HTML4 times when it comes to rendering HTML and therefore require a completely different approach like using table for most of the layout and limiting yourself to using rather the attributes in your tds than any CSS. And if CSS then definitely nothing of the new stuff that came with CSS3.
Because HTML email is such a pain there are dedicated frameworks that try to help with that, see e.g. the tag "responsive-email": https://github.com/topics/responsive-email