CSS vars and CSS functions are not working

[beetlegius-somos]

I know the gem is in maintenance mode, so I don't expect you to add support for CSS variables and functions, but you might have enough knowledge on how to workaround it.

We're using tailwindcss, that's using a lot of CSS variables and functions, which are not being replaced in code, generating some HTML like this:

<div style="background-color:var(--color-dark-matter-900);color:var(--color-start-dust-50)">
  <div style="max-width:var(--container-lg);padding:calc(var(--spacing)*4);text-align:center">
    ...
  </div>
</div>

For now I think we'll have to avoid using those classes or generate new ones without the variables for the emails, although it generates duplication.

Do you think we can use something like providers or callbacks to replace those variables somehow? Thanks in advance!

[PikachuEXE]

I am only a user and have no idea how the internal works :P You might know more than me (I never use CSS variable/func in mail at least

[beetlegius-somos]

FYI I was looking into premailer and they've added some notes in the README on how to use CSS variables. It might be the same for roadie. https://github.com/premailer/premailer?tab=readme-ov-file#support-for-css-variables

[Mange]

I would advice against using CSS variables in emails. Remember that a lot of email clients have very limited support for CSS, with Microsoft Outlook still being based on the Word engine to render HTML emails, for example.

I suppose it is starting to improve with Office 365, but I also suspect a lot of users are still on older versions, and even GMail's web interface doesn't support many CSS features the last time I looked.

As for working around it, I think you could add a custom provider that wraps other providers, and do a string-replace of the code you get back. You could have your own list of known variable values and basically css.gsub('var(--spacing)', '0.25rem'). This will not solve calc cases, though, which makes sense since both calc and var are meant to represent dynamic values that can change with state/viewport sizes, etc.

Another idea would be to utilize postcss in your custom provider, rather than manual replacement of string values. There might be some postcss modules that can inline var and calc somehow, although I doubt it would work well.

I think it's probably easier to have your own parallel styles just for the email than to try to solve this in Ruby. Less code to maintain overall, and it would make it easier to stick to simpler subsets of CSS and HTML if you keep it separate. I love using Tailwind, but HTML emails is the domain of <table> layouts so it doesn't fit well already.