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>

10 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!

10

Sorry to dig this up, but could you expand on your heex / mjml usage more?

We’re doing something similar, and initially I was putting everything inside a <script type="text/plain"> tag. But recently that has broken change tracking, and using a hidden <pre> tag works.

That <pre> tag has a hook attached which looks for updates and re-triggers a MJML render. (This seems to be perfectly performant, even on larger emails with keystroke-frequency updates on an old laptop).

I’m curious what others are doing with the larger structure of their MJML rendering?

11

I’m not sure what you’re asking for, but here is a sketch of the situation I was asking about. We have a module which defines layouts for emails, e.g.:

 def basic_layout(assigns) do
    ~H"""
    <mjml>
      <mj-head>
        <mj-preview>{@preview}</mj-preview>
        <XXX.Email.Components.head />
      </mj-head>
      <mj-body ...>
        <mj-wrapper css-class="wrapper">
          <mj-section>
            <mj-column>
              {render_slot(@inner_block)}
            </mj-column>
          </mj-section>
        </mj-wrapper>
      ...
      </mj-body>
    </mjml>
    """
  end

The header component, with the previously troublesome <mj-style> tag:

  def head(assigns) do
    ~H"""
    <mj-font ... />

    <mj-attributes>
      <mj-all ... />
      <mj-button ... />
      ...
    </mj-attributes>

    <mj-style inline="inline" phx-no-curly-interpolation>
      .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>
    """
  end

We can then use the layout in templates:

def render(assigns) do
    ~H"""
    <XXX.Email.Layouts.basic_layout preview=@preview>
      ... email body ...
    </XXX.Email.Layouts.basic_layout>
    """
  end

Rendering the template, both for previews and actual email bodies:

def render_heex_mjml(module, template, assigns) do
  {:ok, html_body} =
    Phoenix.Template.render(module, template, "html", assigns)
    |> Phoenix.HTML.Safe.to_iodata()
    |> Enum.join()
    |> Mjml.to_html()

  html_body
end