larslr

HEEX parsing breaks on (some) mjml

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?

10 comments

/phoenix #phoenix_html

0 464 10

2025-10-22 10:43:45 UTC

Marked As Solved

chrismccord

Creator of Phoenix

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

Post #7

Also Liked

jswanner

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?

Post #2

harmon25

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

Post #8

Last Post!

larslr

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

Post #11