HEEX parsing breaks on (some) mjml

Phoenix Forum Questions / Help
,
1

We are using MJML to template our emails within a Phoenix application. This has worked very well until now, when we started upgrading from Phoenix 1.6 to 1.7. Suddenly, the HEEX parser started caring a lot more about the contents of our mjml-heex, and specifically the tag.

This tag lets us define css elements analogously to the tag in regular HTML, which means that the HEEX parser will complain about the syntax. Digging a bit, I can see that the tokenizer has special handling for tags, but I can find no way of telling it to parse tags in the same way.

We’ve tried falling back to using the old ~L sigil for the section containing , but that is only a stopgap solution, as that sigil is deprecated.

Are there any other sigils that could be used? Or some other way to tell the parser not to care so much about certain segments?

2

I too use MJML in a phoenix app, but I parse the files with EEx instead of HEEX. Are you willing to go that route?

1 Like
3

Can you post a specific example? I’m building mjml with heex in a project of mine.

4 
...

<mj-style inline="inline">
  .wrapper {
    border-radius: 14px;
    background-color: #FFF;
    border: 1px solid rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: left;
  }
  .op3{
    opacity: 0.3;
  }
</mj-style>

...

This is the block that’s causing headaches. The CSS-syntax inside the tags are parsed as syntax errors when we use the ~H sigil. It works with ~L.

5

That would be fine as long as EEx is supported, but I couldn’t find the appropriate sigil to use. I thought it had been removed, what are you using?

6

That makes sense. HEEx needs to special case style and script tags, because it cannot parse their contents. It doesn’t know about mj-style though and therefore cannot do that there. That’s one of the downsides of a syntax aware templating language – ~L didn’t parse the syntax of your template.

I’d probably move the styles to be an assign and do <mj-style>{styles}</mj-style>.

7

<mj-style phx-no-curly-interpolation>

8 Likes
8

That helped me this week solving the same issue - but I also bumped up against debug notation causing some issues in dev without the ability to selectively disable it - mjml parser did not really like the html comments that were injected.

I was not using the annotations much - so I just disabled them

1 Like
9

Perfect, thank you!