Part of running a business like Buttondown is spending more time than you'd like installing esoteric email clients and trying to debug odd rendering behavior. Superhuman is one such client, but they do us the favor of being an Electron app with a concomitant Chrome extension. So rather than having to guess at what the black box is telling you, you can just pop open Chrome Inspector and see exactly what's happening in the DOM.

Specifically, we had someone write in and say that their spacing on their emails was a little wonky for reasons passing understanding. I installed and poked around Superhuman and discovered the root cause, which is that Superhuman wraps the emails that they're rendering in a shadow DOM node, a perfectly reasonable thing to do. However, we declare some CSS variables in our emails. And in fact, that CSS variable is what was getting stripped out.

Take the following example:

:root {
  --my-color: red;
}

p {
  color: var(--my-color);
}

Simple enough, right? Now imagine that embedded in a page with a shadow DOM:

<template>
  <style>
    :root {
      --my-color: red;
    }
  </style>
  <p>This text should be red.</p>
</template>

And yet:

The solution to this is simple and probably why you are here if you're on this article because you googled Superhuman CSS rendering. Instead of declaring the variable on a root, you need to also declare it on :host, which allows the scoping to attack DOM nodes or shadow root DOM nodes as well:

:root,
:host {
  --my-color: red;
}

p {
  color: var(--my-color);
}