search

shellscape / jsx-email

Build emails with a delightful DX
https://jsx.email
MIT License
987 stars 33 forks source link

Tailwind styles not applied on gmail #97

Closed xsyann closed 9 months ago

xsyann commented 9 months ago

Hi,

Thanks for the work on the Tailwind styles processing!

However, I still have issues to render tailwind styles on gmail with the UnoCSS update. The generated html seems much cleaner, but as it is still internal and not inline CSS, some of the same issues arise.

Here is a simple reproduction: https://stackblitz.com/edit/jsx-email-repro-syfmkd?file=templates%2FReproduction.tsx

The generated HTML is the following: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style tailwind>
      /* layer: preflights */
      /* layer: default */
      .text-green {
        color: rgb(74 222 128 / 1);
      }
    </style>
  </head>

  <body>
    <div>
      <p class="text-green" style="font-size:14px;line-height:24px;margin:16px 0">This is our email body text</p>
      <p class="text-green" style="font-size:14px;line-height:24px;margin:16px 0">This is our email body text</p>
    </div>
  </body>

</html>

which don't render on gmail (and even strip the "class" attribute of the <p>). If I simply replace .text-green{color:rgb(74 222 128 / 1); by .text-green{color:rgb(74, 222, 128);, it is correctly rendered.

It is a simple example, the issue is also still the same with ! or [...], for instance:

.\!m-0{margin:0 !important;}
.max-w-\[600px\]{max-width:600px;}
.p-1\.5{padding:0.375rem;}

Nonetheless, these ones are less critical as they can be avoided using production flag as a workaround.

shellscape commented 9 months ago

Thanks for looking into this. I'll take a look to see what we can do about how those colors are being written.

shellscape commented 9 months ago

We might have to run the css through https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation - unocss recently changed to space separation notation and I'm not sure they'll support the commas

xsyann commented 9 months ago

Let's see if the unocss guys answer to your question :) In the meanwhile, indeed, postcss-color-functional-notation works. I just had to use the production flag and add a class prefix in the uno transformer, otherwise I had some odd classnames generated: .\36 g4h0b{margin-top:0.5rem;}

shellscape commented 9 months ago

Let's do a separate issue for the funky prefix/class name so we can track that too

shellscape commented 9 months ago

@xsyann PR is up for the commas fix. I'll need another repro for the strange classnames and can tackle that one.