Sending email with style

help
1

It’s pretty easy to send emails with the email package, and to get the html from the already written templates in combination with something like ReactDOMServer.renderToStaticMarkup.

Not what about style? My style is in a bunch of less files and I don’t know how to import them. I’ve found the npm package juice that looks like a good place to start. But how can I load my style from the less files that first get compiles before outputting some classic css?

So far I have:

juice = Npm.require('juice'); 
const juiceOpts = {
  preserveMediaQueries: true,
  removeStyleTags: true,
  webResources: {
    images: false
  }
};
let html = ReactDOMServer.renderToStaticMarkup(<Email data={data}/>);
const css='img{width: 10px;}'; // there I'd like to have css=require('style.css');
html = juice.inlineContent(html, css, juiceOpts);
Email.send({
  html,
  ...
})

By the way, juice = Npm.require('juice'); works but import juice from 'juice'; breaks…!

2

For those interested, I ended up having a file on the server where I paste the entire compiled css that I’d get from the client. Like:

//mergeStyle.js
export default mergeStyle=`
... all the copy-paste css goes here
`

and then

import juice from 'juice';
import mergeStyle from './mergeStyle.js';
sendEmail = () => {
  let html = ReactDOMServer.renderToStaticMarkup(<Email data={data}/>);
  const juiceOpts = {
    preserveMediaQueries: true,
    removeStyleTags: true,
    webResources: {
      images: false
    }
  };
  html = juice.inlineContent(html, mergeStyle, juiceOpts);

  Email.send({
    ...,
    html: html
  });
}

Note: I had to wait for 1.3-rc.4 to be able to import juice

3

Sorry I didn’t see this last week. I would’ve told you that I ended up in the same boat, minifying my css and handing it as a variable to juice. Not the prettiest situation, but it works. Not sure if you are still building emails, but I’ve found mjml to be quite handy. Also, it allows you to skip the juice step as all styles are already inline.

4

Does mjml require using a specific syntax? What was cool with the ReactDOMServer is that I can share component between server and client

5

Ah, yeah. MJML is a templating language that allows you to use language like:

<mj-body>
  <mj-section>
    <mj-column>
      Your content
    </mj-column>
  </mj-section>
</mj-body>

What you get back is html pretty much ready to go for emails, with inline styles a table layout, and extra code with hooks for outlook, etc. It’s a node package that allows you to watch -i input.mjml -o output.html.

So for an in-app solution, it’s probably not what you’re looking for. But for building email templates, I’ve found it to be a huge time saver.

6

I tried to configure mjml but I couldn’t do anything. I also tried with the specific package available for Meteor but same.

Does this work as well with the email that you send to verify the account?
Would you have a tutorial or similar? The setup on mjml didn’t work to me

7

Sorry, never used the meteor package. We actually ended up moving away from mjml because there were a few issues with responsive emails that we just weren’t able to solve within the framework. If I were to use mjml, I would probably just use the language to build the email templates and not even get into trying to incorporate it into meteor directly.

8

What are you using now instead mjml?

9

We borrowed a lot of ideas from this post and the related repo. Mostly because this was the most consistent way to get responsive emails across the board.

10

I started using mjml today using the code of this package https://github.com/simonhochrein/meteor-mjml/blob/master/mjml.js
The hard part was to give it the good file path and I solved it using path.resolve('.'); to find the path of my /private directory so I create the mjml template like this let emailTemplate = new MJML(path.resolve('./assets/app/mjml/verifyEmail.mjml'));