I have to send some emails and I simply want to re-use as much code/knowledge as possible (just because), for this I want to render a React component to raw HTML with inline classes.

I have managed to render a React component to static markup via:

const TestMail = () => {
  return (
    <div>
      <h1 className="text-xl font-bold border-b">You have a new Test Email on Productlane</h1>
      <p className="border-b">Something something</p>
      <a href="https://productlane.io/feedback" className="bg-purple-600">
        Open
      </a>
    </div>
  )
}

export function testMailer({ to }: IParams) {
  const emailHtml = ReactDOMServer.renderToStaticMarkup(<TestMail />)
  const processedHtml = juice(emailHtml, {
    webResources: {
      // relativeTo: "app/core/styles/index.css",
    },
  })

  return {
    async send() {
      console.warn("trying to SEND")
      console.warn(processedHtml)
    },
  }
}

This outputs the raw html string without the styles, so I figured I really need to pass the compiled css for the inliner to do its job

<div><h1 class="text-xl font-bold border-b">You have a new Test Email on Productlane</h1><p class="border-b">Something something</p><a href="https://productlane.io/feedback" class="bg-purple-600">Open</a></div>

You can see from the snippet I'm trying to use Juice to inline the styles, however, I can seem to get the classes to be rendered in the html, any idea how to achieve this?