Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Parse classNames to inline styles.

See original GitHub issue

It would be nice if we could use the server side rendering part, to style emails with this library.

The thing is, not all mail clients know how to handle style tags. The recommended approach is still to use inline styles (<div style="color: red">).

I do realize that it’s not possible to support everything with that approach, but even partial support could be of immense value when creating mail templates.

Things that are unsupported (like media queries) could still go to the head style sheet for those clients that do support it.

It would also mean that css variables should be resolved.

Thoughts?

Issue Analytics

State:
Created 3 years ago
Comments:14

Top GitHub Comments

2reactions

sastancommented, Jan 27, 2021

@mattrossman That makes things easier for us.

Something like the following should work already:

uses twind SSR to render the app (optional with shim)
uses the inline-css package to adjust the html
Profit

Based on a react app:

import { renderToString } from 'react-dom/server'
import inlineCss from 'inline-css'

import { setup } from 'twind'
import { virtualSheet, getStyleTag } from 'twind/sheets'

import App from './app'

const sheet = virtualSheet()

setup({ ...sharedOptions, sheet })

function ssr() {
  // 1. Reset the sheet for a new rendering
  sheet.reset()

  // 2. Render the app
  const body = renderToString(<App />)

  // 3. Create the style tag with all generated CSS rules
  const styleTag = getStyleTag(sheet)

  // 4. Generate the html
  const html = `<!DOCTYPE html>
    <html lang="en">
      <head>${styleTag}</head>
      <body>${body}</body>
    </html>
  `

  // 5. Inline the CSS – returns a Promise
  return inlineCss(html, { /* options */ })
}

If this works it is an extension to the existing SSR examples (incl the shim) as only the last line is specific to email. We could add a recipe or ad it to the FAQs.

2reactions

just214commented, Jan 26, 2021

That’s kind of what I figured. The style function proposed by @sastan seems like a nice, easy way to get a limited version of Twind via inline styles. I can’t imagine it could get much easier than this:

<p id="title">
  Hello, friend.
</p>

<script type="module">
  import { tw } from 'https://cdn.skypack.dev/twind';
  
  const el = document.getElementById("title");
  el.style = tw.style`text(blue-500 uppercase) p-2`;
</script>

I’m sure there are a plenty of considerations and challenges that I haven’t thought of but it seems like a neat idea.