search

FelixSchwarz / mjml-python

Python implementation for MJML - a framework that makes responsive-email easy
MIT License
75 stars 16 forks source link

mj-attributes with mj-body leads to empty body #51

Open mrcoles opened 8 months ago

mrcoles commented 8 months ago

With mjml==0.10.0 I get the following unexpected results when passing in an mj-body tag inside mj-attributes within mj-head. Also, if I try this on the MJML test page the body properly gets a background color.

Call with mj-body

mjml_to_html('''<mjml>
  <mj-head>
    <mj-attributes>
      <mj-body background-color="#F6F6F6" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-text>
      TESTTESTTESTTESTTESTTESTTEST
    </mj-text>
  </mj-body>
</mjml>''')

Result has no content inside body:

{"html": "<!doctype html>\n<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n \n \n \n \n \n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n \n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <style type=\"text/css\">\n #outlook a { padding:0; }\n body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }\n table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }\n img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }\n p { display:block;margin:13px 0; }\n \n \n \n \n \n <style type=\"text/css\">\n\n \n \n \n <style type=\"text/css\">\n \n \n <body style=\"word-spacing:normal;\">\n \n <div style=\"\">

\n \n", "errors": []}

Call with mj-html instead

I’m not sure mj-html is even supported in mjml, but you can also just remove it entirely and get the same result below:

mjml_to_html('''<mjml>
  <mj-head>
    <mj-attributes>
      <mj-html background-color="#F6F6F6" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-text>
      TESTTESTTESTTESTTESTTESTTEST
    </mj-text>
  </mj-body>
</mjml>''')

Result has expected TESTTEST… content inside body:

{"html": "<!doctype html>\n<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n \n \n \n \n \n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n \n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <style type=\"text/css\">\n #outlook a { padding:0; }\n body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }\n table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }\n img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }\n p { display:block;margin:13px 0; }\n \n \n \n \n \n <link href=\"https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700\" rel=\"stylesheet\" type=\"text/css\">\n <style type=\"text/css\">\n @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);\n \n \n\n \n \n <style type=\"text/css\">\n\n \n \n \n <style type=\"text/css\">\n \n \n <body style=\"word-spacing:normal;\">\n \n <div style=\"\"><div style=\"font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000\">TESTTESTTESTTESTTESTTESTTEST

\n \n", "errors": []}

FelixSchwarz commented 8 months ago

Thank you for the detailed description. I just tried it with the online editor and that one tells me that <mj-text> cannot be used inside mj-body: https://mjml.io/try-it-live/xo_HA0Xzex

Please try wrapping the mj-text inside mj-column.

FelixSchwarz commented 7 months ago

Just wanted to mention that I could reproduce the issue and it seems to be very specific to mj-attributes applying to mj-body. I need to debug this a bit further.