prestashop/mjml-theme-converter

Tool used to convert a PrestaShop mail theme from MJML to twig

mjml-theme-converter's Issues

Compatibility on Windows, duplicate code fragments

I found multiple issues:

mjml is not compatible with Windows, for two reasons:

• we cannot use which mjml to find the executable
• the directory separators are backslashes

The default layout templates do not validate on mjml.io. Error: mj-spacer cannot be used inside mj-body

If mj-section is used inside mj-wrapper there are duplicated code fragments <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]--> and <!--[if mso | IE]></table><![endif]-->.

The twig tags {% block styles %} are misplaced such that all the style are duplicated in the final html files.

There is also a bug with generation of the email templates in the BO of Prestashop, that will cause issues when the emails are viewed using Outlook as email client. This bug is addressed in a separate PR for Prestshop/Prestashop

Associated CSS for columns not generated in header or footer

Hi!
I'm testing out this converter for few days, and i realized when i've section with multiple columns like this:
<mj-section background-color="#ffffff" padding="32px 78px" text-align="center" border-top="1px solid rgba(0, 0, 0, 0.08)"> <mj-column> <mj-image padding="0" width="40px" height="40px" align="center" src="/assets/icon.png"></mj-image> <mj-text font-size="12px" line-height="16px" padding="16px 0 0 0" align="center">Paiement <br> sécurisé</mj-text> </mj-column> <mj-column> <mj-image padding="0" width="40px" height="40px" align="center" src="/assets/icon.png"></mj-image> <mj-text font-size="12px" line-height="16px" padding="16px 0 0 0" align="center">Livraison <br> offerte</mj-text> </mj-column> <mj-column> <mj-image padding="0" width="40px" height="40px" align="center" src="/assets/icon.png"></mj-image> <mj-text font-size="12px" line-height="16px" padding="16px 0 0 0" align="center">Retour gratuit <br> sous 14 jours</mj-text> </mj-column> <mj-column> <mj-image padding="0" width="40px" height="40px" align="center" src="/assets/icon.png"></mj-image> <mj-text font-size="12px" line-height="16px" padding="16px 0 0 0" align="center">Service <br> après-vente</mj-text> </mj-column> <mj-column> <mj-image padding="0" width="40px" height="40px" align="center" src="/assets/icon.png"></mj-image> <mj-text font-size="12px" line-height="16px" padding="16px 0 0 0" align="center">Garanties</mj-text> </mj-column> </mj-section>

In this case, when i generate the html.twig files, my header and my footer are generated right but not the associated css.

In my html i've class like this:
mj-column-per-20
But no CSS with this class ...

In conclusion all the CSS seems to be generated from layout.mjml.twig (if i create a section with 5 empty columns, the CSS is rightly generated) and ignored in footer and header.mjml.twig..

Do you have any idea how to fix this behavior?

Thanks for your help!

Min PHP version should be 7.3 in composer.json

Change for PS 1.7.8.0

With PS 1.7.8.0, the module followup was renamed in ps_reminder. To stay compatible with the latest version of PS, we should rename the corresponding mail templates folder (mails/themes/lp_mjml/modules/followup).

The testing tool maildev chokes on a link tag in the header

As pointed out by @marwachelly in PrestaShop/PrestaShop#25992 (comment), maildev does not display an email correctly (height get's not adjusted, when the email contains <link rel="stylesheet"> in the header.

The PR #14 introduced these two new lines as below. The fix intended to not remove conditional <style> tags in the header, but it kept also <link> tags. This was probably not the good choice.

   + <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
   + <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet" type="text/css">
     <style type="text/css">
       @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
       @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i);
     </style>

It would always be possible to argue that there is a bug in maildev. Should we try to fix the problem at the root in https://github.com/maildev/maildev or just fix here to get the tests working smoothly? IMHO it is simpler to fix here.