I am attempting to send HTML content via Nodemailer to my Gmail account. Initially, I sent the email as plain text to ensure everything was working properly.
const email =
{
from: emailAddress,
to: sendTo,
subject: title,
text: emailBody
};
//Send the email
transporter.sendMail(email, function(error, info)
{
//If there was an error, return false as it failed to send, else true
const emailSent = (error) ? false : true;
return resolve(emailSent);
});
The plain text version of the email displayed correctly with all CSS rules maintained.
However, when I changed
text: emailBody
to
html: emailBody
the email parsed the body string as HTML, causing some CSS rules to be missing upon opening.
For example, the original li tag in my JS email body...
'<li style="-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3); border-radius: 10px; padding: 20px; display: flex; justify-content: center; height: 90px; margin: 10px 0;">'
But in the email, it appeared as...
<li style="border-radius:10px;padding:20px;display:flex;height:90px;margin:10px 0">
As you can see, the box shadow and justify-content rule disappeared while the other properties remained intact.
Could it be that Gmail does not support certain styles like box shadows or flex properties? Is this a limitation of Nodemailer? Any insights would be helpful.