HEEX parsing breaks on (some) mjml

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?

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

...

<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.

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?

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>.

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

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

Perfect, thank you!

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?

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