MJML5.0 Replace html-minifier and js-beautify

[iRyusa]

Edit: Available on MJML on v5 for now on experimental tag

[marvin-wtt]

I currently get the error nullTypeError: Cannot destructure property 'children' of 'element' as it is undefined. When compiling with CLI

[iRyusa]

Make sure to have no global install, clean your node modules + lockfile

…

On Sun, May 5, 2024 at 12:48 AM marvin-wtt ***@***.***> wrote: I currently get the error nullTypeError: Cannot destructure property 'children' of 'element' as it is undefined. When compiling with CLI — Reply to this email directly, view it on GitHub <#2858 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAELHTLDV3KHE7TT6KCZ7Y3ZAVQUBAVCNFSM6AAAAABGYUNVXSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOJUGQ4TGNBRGQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[marvin-wtt]

Make sure to have no global install, clean your node modules + lockfile

Just tried it with a fresh project and only the Black Friday template as test. Still fails.
It also fails in CI, so this can't be a global install issue.

[iRyusa]

@marvin-wtt found out the issue thanks for reporting check the latest version (alpha.2) should be good now 👍

[thewilkybarkid]

How experimental is this now? I see there have been alpha releases. Looks like CI isn't working as support for Node 16 needs to be dropped (cssnano doesn't support it as it's unmaintained).

[iRyusa]

I don't think we'll find some alternative to those lib now. I still need some work tho to bring back the CI to a green state

[AaronMoat]

@iRyusa for what it's worth, the CI commands locally seem happy enough if packages/mjml/test/html-attributes.test.js is updated to await mjml instead of just mjml; something similar to test.js seems to work:

async function run() {
  const { html } = await mjml(input)

  ... existing ... 
}

run();

[iRyusa]

Tried with a global await but it need to be converted to module. I'll try your solution thanks !

…

On Sat, Aug 3, 2024 at 1:47 PM Aaron Moat ***@***.***> wrote: @iRyusa <https://github.com/iRyusa> for what it's worth, the CI commands locally seem happy enough if packages/mjml/test/html-attributes.test.js is updated to await mjml instead of just mjml; something similar to test.js seems to work: async function run() { const { html } = await mjml(input) ... existing ... } run(); — Reply to this email directly, view it on GitHub <#2858 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAELHTNMZAFNPNWTKMTCQL3ZPS7LTAVCNFSM6AAAAABGYUNVXSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENRWGY4DMNRVHA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[AaronMoat]

Is there any other support that you might want to get this over the line from experimental to shipped @iRyusa? 😄

[iRyusa]

Alpha 6 might be the last alpha version. Then I'll push it to the "live".

[robkorv]

@iRyusa thank you for this change. It's going to be deployed to our production on Monday 🤞🏽

[iRyusa]

Feel free to reach me on slack if you find any issues 👍

[jwaterworth]

@robkorv How was your deployment? Anything we need to be aware of in using this release?

Thanks @iRyusa for making this available! 🙏

[robkorv]

@robkorv How was your deployment? Anything we need to be aware of in using this release?

Without any problems. About 415.358 mail build with "5.0.0-alpha.6" since the deploy. The only thing that is changed is that mjml2html is now asynchronous. Everything else is still the same.

I use mjml in a microservice build with hapi. I only needed this change in a hapi route to make it work.

@@ -1,37 +1,40 @@
 "use strict";
 
 const Boom = require("@hapi/boom");
 const Mjml = require("mjml");
 
 module.exports = [
   {
     method: ["get", "post"],
     path: "/mjml",
-    handler: (request, h) => {
+    handler: async (request, h) => {
       if (request.method === "post") {
         try {
-          const result = Mjml(request.payload.mjml, request.payload.options);
+          const result = await Mjml(
+            request.payload.mjml,
+            request.payload.options
+          );
 
           if (request.payload.return_html) {
             const formattedMessages = result.errors
               .filter((x) => x.formattedMessage)
               .map((x) => x.formattedMessage);
             if (formattedMessages.length) {
               request.logger.warn(formattedMessages.join("\n"));
             }
 
             return result.html;
           }
 
           return result;
         } catch (err) {
           const boom = new Boom.Boom(err.toString());
           boom.reformat(true);
           return boom;
         }
       } else {
         return "post mjml and I will return html";
       }
     },
   },
 ];

[robkorv]

I'm not getting the CssSyntaxError error I mentioned in #2858 (comment) with 5.0.0-alpha.9 🎉

[dazgreer]

Hey folks, we've released alphas 9 and 10 on the experimental. Please use the latter, it includes

• the addition of sanitizeStyles and templateSyntax options to sanitize template variables before PostCSS validation.
• cssnano-preset-lite added to dependencies
• a security update to ignoreIncludes, setting it to true by default [breaking change]
• an updated mjml-browser package to build and work (uses html-minifier-terser instead of htmlnano, added globalObject)
• moving of HTML body tag from skeleton to mj-body and added id attribute [breaking change]
• bumping of glob dependency 10.5.0

Template syntax santization

If you're using e.g. {{variable}} you can now sanitize these which allows them to pass PostCSS validation by setting sanitizeStyles: true or you can bypass PostCSS completely by setting minifyOptions: { minifyCss: false } (HTML validation is stil performed in this case). Both of these require minifiy:true to be set.

The default template syntax types are {{variable}} and [[variable]]. If you want specify different template syntax, you can do that using this:

templateSyntax: [
	{ prefix: '<%=', suffix: '%>' },
	{ prefix: '#{', suffix: '}' },
]

The santization occurs inside both <style> tags and style="" attributes only. By default, the sanitization allows template variables as...

blocks, e.g.

<style>
{{variable}}
</style>

<a href="https://mjml.io" style="{{variable}}">MJML site</a>

CSS properties and/or values, e.g.

<style>
{{property}}: {{value}}
</style>

<a href="https://mjml.io" style="{{property}}: {{value}}">MJML site</a>

By default you can only have one or the other but you can optionally allow these to be mixed by setting allowMixedSyntax: true

Happy testing! Let us know if there are any issues

[robkorv]

• cssnano-preset-lite added to dependencies

I don't see this reflected in the code-base. I only see cssnano-preset-default which is a dependency for cssnano.

5.0.0-alpha.9 made about 10.000 email on production yesterday. Today 5.0.0-alpha.10 is going to be deployed.
Thanks for all the work btw 🤗

[thewilkybarkid]

As Prettier is now a dependency, any usage in Jest fails due to jestjs/jest#15816. 😩

Edit: I've been able to confirm everything works as expected in Jest if I comment out the require("prettier") in mjml-core.