css is missing some rules after sending a html gmail with nodemailer

Question

I am trying to send some html that I have, as an email to my gmail account via nodemailer.

So at first, I sent my email like this, as plain text, to check if everything is there...

    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);
    });

This sends fine, all of my html is there in plain text form with all my css rules intact.

Then I change

text: emailBody

to

html: emailBody

This parses my body string to html and when I open the email, some css rules are missing.

For example I have an opening li tag, this is a string in my js that is part of the 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 on my email it is this...

<li style="border-radius:10px;padding:20px;display:flex;height:90px;margin:10px 0">

So as you can see my box shadow is gone, along with my justify-content rule but the rest are intact.

Would anyone know why this is doing it? does gmail not like box shadows and some flex properties? could it be a problem with node mailer? any info is appreciated

Answer 1

I think this is because gmail support of these properties. Mail services support not many modern features that's why one still uses tables. You can consult what gmail supports here