Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Not possible to include root element #177

Closed
Sojaner opened this issue Aug 23, 2023 · 5 comments
Closed

Not possible to include root element #177

Sojaner opened this issue Aug 23, 2023 · 5 comments

Comments

@Sojaner
Copy link

Sojaner commented Aug 23, 2023

Per this comment by the developers on mjml, including a file that contains a root tag and a head, the content of that head is going to be included into the current file.

I'm using this structure to refactor my styling and configure the components using the mj-attributes tag in a reusable file that is then included in other files.

The current implementation of mjml.net does not support this and the output lacks the styling.
@SebastianStehle
Copy link
Owner

Can you give a concete example?

@Sojaner
Copy link
Author

Sojaner commented Aug 24, 2023 •
edited
Loading

@SebastianStehle here is a stripped-down demo of my use case.
Digging more, I realized that it's not the lack of styling but rather a problem in rendering.

A note here is, that the reason for importing the styling into header and footer files as well as about and index is, this way we can render the header and footer separately too, and have the actual styling and design applied which is a requirement for our project.

Here is the node version of the about.mjml file:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <title></title>
  <!--[if !mso]><!-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--<![endif]-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    #outlook a {
      padding: 0;
    }

    body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }

    table,
    td {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }

    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
    }

    p {
      display: block;
      margin: 13px 0;
    }

  </style>
  <!--[if mso]>
    <noscript>
    <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
    </noscript>
    <![endif]-->
  <!--[if lte mso 11]>
    <style type="text/css">
      .mj-outlook-group-fix { width:100% !important; }
    </style>
    <![endif]-->
  <!--[if !mso]><!-->
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet" type="text/css">
  <style type="text/css">
    @import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap);

  </style>
  <!--<![endif]-->
  <style type="text/css">
    @media only screen and (min-width:480px) {
      .mj-column-per-100 {
        width: 100% !important;
        max-width: 100%;
      }
    }

  </style>
  <style media="screen and (min-width:480px)">
    .moz-text-html .mj-column-per-100 {
      width: 100% !important;
      max-width: 100%;
    }

  </style>
  <style type="text/css">
  </style>
  <style type="text/css">
    .bg-dark {
      background: #2F5854 !important;
    }

    .bg-white {
      background: #FFFFFF !important;
    }

    p {
      font-size: 16px !important;
      font-weight: 400 !important;
      line-height: 24px !important;
      margin: 0;
    }

    .bg-dark {
      background: #2F5854 !important;
    }

    .bg-white {
      background: #FFFFFF !important;
    }

    p {
      font-size: 16px !important;
      font-weight: 400 !important;
      line-height: 24px !important;
      margin: 0;
    }

    .bg-dark {
      background: #2F5854 !important;
    }

    .bg-white {
      background: #FFFFFF !important;
    }

    p {
      font-size: 16px !important;
      font-weight: 400 !important;
      line-height: 24px !important;
      margin: 0;
    }

  </style>
</head>

<body style="word-spacing:normal;background-color:#EAEEEE;">
  <div style="background-color:#EAEEEE;">
    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="bg-dark-outlook" role="presentation" style="width:636px;" width="636" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div class="bg-dark" style="margin:0px auto;max-width:636px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:16px;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td align="left" class="" style="vertical-align:top;width:604px;" ><![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="vertical-align:top;padding:0;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                          <tbody>
                            <tr>
                              <td align="left" style="font-size:0px;padding:0;word-break:break-word;">
                                <div style="height:32px;line-height:32px;">&#8202;</div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="bg-white-outlook" role="presentation" style="width:636px;" width="636" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div class="bg-white" style="margin:0px auto;max-width:636px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td align="left" class="" style="vertical-align:top;width:636px;" ><![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="vertical-align:top;padding:0;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                          <tbody>
                            <tr>
                              <td align="left" style="font-size:0px;padding:48px 48px 0 48px;word-break:break-word;">
                                <div style="font-family:Open Sans;font-size:16px;font-weight:400;line-height:1;text-align:left;color:#1E3432;">
                                  <p>This is the About!</p>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="bg-white-outlook" role="presentation" style="width:636px;" width="636" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div class="bg-white" style="margin:0px auto;max-width:636px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td align="left" class="" style="vertical-align:top;width:636px;" ><![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="vertical-align:top;padding:32px 48px;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                          <tbody>
                            <tr>
                              <td align="left" style="font-size:0px;padding:0;word-break:break-word;">
                                <div style="font-family:Open Sans;font-size:16px;font-weight:400;line-height:1;text-align:left;color:#1E3432;">
                                  <p>Cheers,</p>
                                  <p>Me!</p>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="bg-white-outlook" role="presentation" style="width:636px;" width="636" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div class="bg-white" style="margin:0px auto;max-width:636px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td align="left" class="" style="vertical-align:top;width:636px;" ><![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="vertical-align:top;padding:0;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                          <tbody>
                            <tr>
                              <td align="left" style="font-size:0px;padding:0 16px;word-break:break-word;">
                                <p style="border-top:solid 1px #2F5854;font-size:1px;margin:0px;width:100%;">
                                </p>
                                <!--[if mso | IE]><table align="left" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #2F5854;font-size:1px;margin:0px;width:604px;" role="presentation" width="604px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]-->
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="bg-white-outlook" role="presentation" style="width:636px;" width="636" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div class="bg-white" style="margin:0px auto;max-width:636px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td align="left" class="" style="vertical-align:top;width:636px;" ><![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="vertical-align:top;padding:0;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                          <tbody>
                            <tr>
                              <td align="center" style="font-size:0px;padding:8px 0;word-break:break-word;">
                                <div style="font-family:Open Sans;font-size:16px;font-weight:400;line-height:1;text-align:center;color:#2F5854;">
                                  <p>Something.com ©️ 2023</p>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><![endif]-->
  </div>
</body>

</html>

As you may notice, node version has gathered all the styling into the head tag and has generated a valid HTML output. Although CSS classes are repeated multiple times, but it's still a valid HTML output.

While the .net implementation generates this output:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <title>
  </title>
  <!--[if !mso]><!-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--<![endif]-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    #outlook a {
      padding: 0;
    }
    
    body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
    
    table,
    td {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }
    
    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
    }
    
    p {
      display: block;
      margin: 13px 0;
    }
  </style>
  <!--[if mso]>
          <noscript>
          <xml>
          <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
          </o:OfficeDocumentSettings>
          </xml>
          </noscript>
          <![endif]-->
    <!--[if lte mso 11]>
          <style type="text/css">
            .mj-outlook-group-fix { width:100% !important; }
          </style>
          <![endif]-->
  <!--[if !mso]><!-->
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet" type="text/css">
    <style type="text/css">
      @import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap);
    </style>
    <!--<![endif]-->
    <style type="text/css">
      @media only screen and (min-width:480px) {
        .mj-column-per-100 {
width:100% !important;
max-width: 100%;
}
      }
    </style>
    <style media="screen and (min-width:480px)">
        .moz-text-html .mj-column-per-100 {
width:100% !important;
max-width: 100%;
}
    </style>
    <style type="text/css">
      .bg-dark {
                background: #2F5854 !important;
            }
            .bg-white {
                background: #FFFFFF !important;
            }
            p {
                font-size: 16px !important;
                font-weight: 400 !important;
                line-height: 24px !important;
                margin: 0;
            }
    </style>
    <style type="text/css">
    </style>
  </head>
  
  <body style="word-spacing:normal;">
<div  <!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<title>
</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

table,
td {
  border-collapse: collapse;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
}

img {
  border: 0;
  height: auto;
  line-height: 100%;
  outline: none;
  text-decoration: none;
  -ms-interpolation-mode: bicubic;
}

p {
  display: block;
  margin: 13px 0;
}
</style>
<!--[if mso]>
      <noscript>
      <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
      </xml>
      </noscript>
      <![endif]-->
<!--[if lte mso 11]>
      <style type="text/css">
        .mj-outlook-group-fix { width:100% !important; }
      </style>
      <![endif]-->
>

<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet" type="text/css">
<style type="text/css">
  @import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap);
</style>
<!--<![endif]-->
<style type="text/css">
  @media only screen and (min-width:480px) {
  }
</style>
<style media="screen and (min-width:480px)">
</style>
<style type="text/css">
  .bg-dark {
            background: #2F5854 !important;
        }
        .bg-white {
            background: #FFFFFF !important;
        }
        p {
            font-size: 16px !important;
            font-weight: 400 !important;
            line-height: 24px !important;
            margin: 0;
        }
</style>
<style type="text/css">
</style>
</head>

<body style="word-spacing:normal;">
</body>

</html>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<title>
</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
  #outlook a {
    padding: 0;
  }
  
  body {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  
  table,
  td {
    border-collapse: collapse;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
  }
  
  img {
    border: 0;
    height: auto;
    line-height: 100%;
    outline: none;
    text-decoration: none;
    -ms-interpolation-mode: bicubic;
  }
  
  p {
    display: block;
    margin: 13px 0;
  }
</style>
<!--[if mso]>
        <noscript>
        <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
        </noscript>
        <![endif]-->
  <!--[if lte mso 11]>
        <style type="text/css">
          .mj-outlook-group-fix { width:100% !important; }
        </style>
        <![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet" type="text/css">
  <style type="text/css">
    @import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap);
  </style>
  <!--<![endif]-->
  <style type="text/css">
    @media only screen and (min-width:480px) {
    }
  </style>
  <style media="screen and (min-width:480px)">
  </style>
  <style type="text/css">
    .bg-dark {
              background: #2F5854 !important;
          }
          .bg-white {
              background: #FFFFFF !important;
          }
          p {
              font-size: 16px !important;
              font-weight: 400 !important;
              line-height: 24px !important;
              margin: 0;
          }
  </style>
  <style type="text/css">
  </style>
</head>

<body style="word-spacing:normal;">
</body>

</html>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="bg-dark-outlook"  style="width:600px;">
  <tr>
    <td style="font-size:0px;line-height:0px;mso-line-height-rule:exactly;">
      <![endif]-->
      <div class="bg-dark"  style="margin:0px auto;max-width:600px;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
          <tbody>
            <tr>
              <td style="direction:ltr;font-size:0px;padding:16px;padding-bottom:16px;padding-left:16px;padding-right:16px;padding-top:16px;text-align:center;">
                <!--[if mso | IE]>
                <table border="0" cellpadding="0" cellspacing="0" role="presentation">
                  <tr>
                    <td style="vertical-align:top;width:568px;">
                      <![endif]-->
                      <div class="mj-column-per-100 mj-outlook-group-fix"  style="direction:ltr;display:inline-block;font-size:0px;text-align:left;vertical-align:top;width:100%;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                          <tbody>
                            <tr>
                              <td style="padding:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;vertical-align:top;">
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                  <tbody>
                                    <tr>
                                      <td style="font-size:0px;padding:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;word-break:break-word;">
                                        <div style="height:32px;line-height:32px;">
                                          &#8202;
                                        </div>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <!--[if mso | IE]>
                    </td>
                  </tr>
                </table>
                <![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--[if mso | IE]>
    </td>
  </tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="bg-white-outlook"  style="width:600px;">
  <tr>
    <td style="font-size:0px;line-height:0px;mso-line-height-rule:exactly;">
      <![endif]-->
      <div class="bg-white"  style="margin:0px auto;max-width:600px;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
          <tbody>
            <tr>
              <td style="direction:ltr;font-size:0px;padding:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:center;">
                <!--[if mso | IE]>
                <table border="0" cellpadding="0" cellspacing="0" role="presentation">
                  <tr>
                    <td style="vertical-align:top;width:600px;">
                      <![endif]-->
                      <div class="mj-column-per-100 mj-outlook-group-fix"  style="direction:ltr;display:inline-block;font-size:0px;text-align:left;vertical-align:top;width:100%;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                          <tbody>
                            <tr>
                              <td style="padding:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;vertical-align:top;">
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                  <tbody>
                                    <tr>
                                      <td align="left" style="font-size:0px;padding:48px 48px 0 48px;padding-bottom:0;padding-left:48px;padding-right:48px;padding-top:48px;word-break:break-word;">
                                        <div style="font-family:Open Sans;font-size:16px;font-weight:400;line-height:1;text-align:left;color:#1E3432;">
<p>This is the About!</p>
                                        </div>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <!--[if mso | IE]>
                    </td>
                  </tr>
                </table>
                <![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--[if mso | IE]>
    </td>
  </tr>
</table>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <title>
  </title>
  <!--[if !mso]><!-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--<![endif]-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    #outlook a {
      padding: 0;
    }
    
    body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
    
    table,
    td {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }
    
    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
    }
    
    p {
      display: block;
      margin: 13px 0;
    }
  </style>
  <!--[if mso]>
          <noscript>
          <xml>
          <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
          </o:OfficeDocumentSettings>
          </xml>
          </noscript>
          <![endif]-->
    <!--[if lte mso 11]>
          <style type="text/css">
            .mj-outlook-group-fix { width:100% !important; }
          </style>
          <![endif]-->
<![endif]-->

  <!--[if !mso]><!-->
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet" type="text/css">
    <style type="text/css">
      @import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap);
    </style>
    <!--<![endif]-->
    <style type="text/css">
      @media only screen and (min-width:480px) {
        .mj-column-per-100 {
width:100% !important;
max-width: 100%;
}
      }
    </style>
    <style media="screen and (min-width:480px)">
        .moz-text-html .mj-column-per-100 {
width:100% !important;
max-width: 100%;
}
    </style>
    <style type="text/css">
      .bg-dark {
                background: #2F5854 !important;
            }
            .bg-white {
                background: #FFFFFF !important;
            }
            p {
                font-size: 16px !important;
                font-weight: 400 !important;
                line-height: 24px !important;
                margin: 0;
            }
    </style>
    <style type="text/css">
    </style>
  </head>
  
  <body style="word-spacing:normal;">
  </body>
  
  </html>
  <!--[if mso | IE]>
  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="bg-white-outlook"  style="width:600px;">
    <tr>
      <td style="font-size:0px;line-height:0px;mso-line-height-rule:exactly;">
        <![endif]-->
        <div class="bg-white"  style="margin:0px auto;max-width:600px;">
          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
            <tbody>
              <tr>
                <td style="direction:ltr;font-size:0px;padding:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:center;">
                  <!--[if mso | IE]>
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation">
                    <tr>
                      <td style="vertical-align:top;width:600px;">
                        <![endif]-->
                        <div class="mj-column-per-100 mj-outlook-group-fix"  style="direction:ltr;display:inline-block;font-size:0px;text-align:left;vertical-align:top;width:100%;">
                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                            <tbody>
                              <tr>
                                <td style="padding:32px 48px;padding-bottom:32px;padding-left:48px;padding-right:48px;padding-top:32px;vertical-align:top;">
                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                    <tbody>
                                      <tr>
                                        <td align="left" style="font-size:0px;padding:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;word-break:break-word;">
                                          <div style="font-family:Open Sans;font-size:16px;font-weight:400;line-height:1;text-align:left;color:#1E3432;">
<p>Cheers,</p>
<p>Me!</p>
                                          </div>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        <!--[if mso | IE]>
                      </td>
                    </tr>
                  </table>
                  <![endif]-->
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!--[if mso | IE]>
      </td>
    </tr>
  </table>
  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="bg-white-outlook"  style="width:600px;">
    <tr>
      <td style="font-size:0px;line-height:0px;mso-line-height-rule:exactly;">
        <![endif]-->
        <div class="bg-white"  style="margin:0px auto;max-width:600px;">
          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
            <tbody>
              <tr>
                <td style="direction:ltr;font-size:0px;padding:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:center;">
                  <!--[if mso | IE]>
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation">
                    <tr>
                      <td style="vertical-align:top;width:600px;">
                        <![endif]-->
                        <div class="mj-column-per-100 mj-outlook-group-fix"  style="direction:ltr;display:inline-block;font-size:0px;text-align:left;vertical-align:top;width:100%;">
                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                            <tbody>
                              <tr>
                                <td style="padding:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;vertical-align:top;">
                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                    <tbody>
                                      <tr>
                                        <td align="left" style="font-size:0px;padding:0 16px;padding-bottom:0;padding-left:16px;padding-right:16px;padding-top:0;word-break:break-word;">
                                          <p style="border-top:solid 1px #2F5854;font-size:1px;margin:0px;width:100%;">
                                          </p>
                                          <!--[if mso | IE]>
                                          <table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="568px" style="border-top:solid 1px #2F5854;font-size:1px;margin:0px;width:568px;">
                                            <tr>
                                              <td style="height:0; line-height:0;">
                                                &nbsp;
                                              </td>
                                            </tr>
                                          </table>
                                          <![endif]-->
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        <!--[if mso | IE]>
                      </td>
                    </tr>
                  </table>
                  <![endif]-->
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!--[if mso | IE]>
      </td>
    </tr>
  </table>
  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="bg-white-outlook"  style="width:600px;">
    <tr>
      <td style="font-size:0px;line-height:0px;mso-line-height-rule:exactly;">
        <![endif]-->
        <div class="bg-white"  style="margin:0px auto;max-width:600px;">
          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
            <tbody>
              <tr>
                <td style="direction:ltr;font-size:0px;padding:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:center;">
                  <!--[if mso | IE]>
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation">
                    <tr>
                      <td style="vertical-align:top;width:600px;">
                        <![endif]-->
                        <div class="mj-column-per-100 mj-outlook-group-fix"  style="direction:ltr;display:inline-block;font-size:0px;text-align:left;vertical-align:top;width:100%;">
                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                            <tbody>
                              <tr>
                                <td style="padding:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;vertical-align:top;">
                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                    <tbody>
                                      <tr>
                                        <td align="center" style="font-size:0px;padding:8px 0;padding-bottom:8px;padding-left:0;padding-right:0;padding-top:8px;word-break:break-word;">
                                          <div style="font-family:Open Sans;font-size:16px;font-weight:400;line-height:1;text-align:center;color:#2F5854;">
<p>Something.com ©️ 2023</p>
                                          </div>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        <!--[if mso | IE]>
                      </td>
                    </tr>
                  </table>
                  <![endif]-->
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!--[if mso | IE]>
      </td>
    </tr>
  </table>
  <![endif]-->
</div>

  </body>
  
  </html>

The .net version repeats every HTML document and outputs a broken HTML output.

Here is the stripped-down C# code that I used:

using Mjml.Net;
using Tests.Internal;

InMemoryFileLoader loader = new ();

foreach (FileInfo file in Directory.GetFiles("C:\\mjml-demo", "*.mjml").Select(x => new FileInfo(x)))
{
    loader.Add(file.Name, new StreamReader(file.OpenRead()).ReadToEnd());
}

MjmlOptions options = new ()
{
    FileLoader = loader
};

MjmlRenderer renderer = new ();

RenderResult result = renderer.Render(loader["about.mjml"]!, options);

string html = result.Html;

Console.WriteLine(html);

And here is the npm command I used:

npx mjml about.mjml -o about.html

@SebastianStehle
Copy link
Owner

SebastianStehle commented Aug 24, 2023 •
edited
Loading

In your example you basically render a head inside a body. This does not make sense for me.

What happens when you add the include in the mjml element?

EDIT: I think I understand the issue now.

@SebastianStehle SebastianStehle mentioned this issue Aug 25, 2023
Merged
@SebastianStehle
Copy link
Owner

Should be fixed.

@Sojaner
Copy link
Author

Sojaner commented Aug 28, 2023

Nice! Thank you. 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@SebastianStehle @Sojaner