MJML5.0 Replace html-minifier and js-beautify #2858

iRyusa · 2024-04-25T11:01:36Z

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

marvin-wtt · 2024-05-04T22:48:11Z

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

iRyusa · 2024-05-04T23:19:12Z

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 · 2024-05-04T23:50:00Z

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 · 2024-05-14T10:01:34Z

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

thewilkybarkid · 2024-07-16T09:07:34Z

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 · 2024-07-30T12:43:59Z

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 · 2024-08-03T11:46:43Z

@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 · 2024-08-03T13:08:21Z

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 · 2024-08-19T23:20:56Z

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

iRyusa · 2024-10-04T12:59:27Z

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

robkorv · 2024-10-18T07:36:27Z

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

iRyusa · 2024-10-18T07:40:27Z

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

jwaterworth · 2024-11-14T11:03:38Z

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

Thanks @iRyusa for making this available! 🙏

robkorv · 2024-11-18T11:07:23Z

@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";
       }
     },
   },
 ];

mjmlio/mjml#2589 mjmlio/mjml#2858

nickdnk · 2025-06-24T03:52:53Z

Any timeline on this? I would like to move a lot of things to mjml, but I'm a little confused about the state of this package/project. It seems to be a Mailjet product, but only one person works on this in his spare time? Is it not a company-backed library?

iRyusa · 2025-06-24T15:08:06Z

Someone at Mailjet will take the project back in their hands and i'm still trying to fix & merge last 2 pr I've done. This is the last blocking issue to get this merged #2919

packages/mjml-core/src/index.js

Branched from iRyusa's 'MJML5.0 Replace html-minifier and js-beautify' to work on the CSS minification font-family naming issue

- leveraged readMjmlConfig to read config file - move the fs and path imports - removed uneccessary code

…minifier bugfix(minifiers): added cssnano config options

dazgreer · 2025-11-04T15:42:46Z

cssnano now uses the 'lite' profile by default but you can set your own profile using .mjmlconfig.js

e.g.

module.exports = {
  mjmlConfig: {
    packages: [],
    options: {
      minify: true,
      minifyOptions: {
         minifyCss: {
           options: {
             preset: ['default', {
                 minifyFontValues: { removeQuotes: false },
               },
             ],
           },
         },
      },
    },
  },
}

Add config options when you call mjml2html:

const result = await mjml2html(xml, {
      beautify: true,
      mjmlConfigPath: path.resolve('.mjmlconfig.js'),
      useMjmlConfigOptions: true,
})

fixes #2919

thewilkybarkid · 2025-11-11T10:23:56Z

Is this ready to be released now? 🤞

robkorv · 2025-11-11T16:06:59Z

Can you guys publish another alpha so we can test this?

- created utils.js and updated all tests to use extractStyle function from it - set keepComments to true by default as per previous minifier

dazgreer · 2025-11-17T13:33:52Z

Hi, @thewilkybarkid @robkorv. We were intending to release on Friday, however we've run into an issue with building the mjml-browser package that seems to have been an issue present from an earlier commit. I'm waiting to sync with @iRyusa on this.

dazgreer · 2025-11-19T17:02:22Z

We've released v5.0.0-alpha.7 on an experimental tag.

IMPORTANT: the mjml-browser package will not build for this release (as it won't have since alpha.2) and this is an issue that we will need to resolve before we release MJML 5.0.0 as the latest.

maxjacobson · 2025-11-19T17:09:18Z

Thanks for cutting alpha 7 👏.

One observation I'm making is that some new warnings are printed:

Line 3 of /path/to/template.mjml (mj-wrapper) — Attributes border, padding, background-color are illegal

I think those attributes are allowed on mj-wrapper, as far as I can tell (I'm testing on the example template from the docs on this branch). Is this perhaps a bug in alpha 7?

Here's a script to reproduce, showing how the behavior differs between alpha 6 and 7:

Script

#!/bin/sh

set -e

runTest() {
  version="$1"

  dir="$(mktemp --directory)"
  cd "$dir"

  echo "== Creating npm project in $dir"
  npm init --yes >/dev/null

  echo "== installing mjml@$version"
  npm i --silent --save "mjml@$version"

  # Example from https://github.com/mjmlio/mjml/blob/fix/replace-html-minifier/packages/mjml-wrapper/README.md#mj-wrapper
  echo "== Creating example template.mjml"
  cat > template.mjml << 'EOF'
<mjml>
  <mj-body>
    <mj-wrapper border="1px solid #000000" padding="50px 30px" background-color="#ffffff">
      <mj-section border-top="1px solid #aaaaaa" border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px">
        <mj-column>
          <mj-image padding="0" src="https://placeholdit.imgix.net/~text?&w=350&h=150" />
        </mj-column>
      </mj-section>
      <mj-section border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px" border-bottom="1px solid #aaaaaa">
        <mj-column border="1px solid #dddddd">
          <mj-text padding="20px"> First line of text </mj-text>
          <mj-divider border-width="1px" border-style="dashed" border-color="lightgrey" padding="0 20px" />
          <mj-text padding="20px"> Second line of text </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>
EOF

  echo "== Using mjml@$version to convert template.mjml to template.html"
  node_modules/.bin/mjml --read template.mjml --output template.html --config.validationLevel strict
  echo "== Done!"
}

runTest "5.0.0-alpha.6"

echo
echo

runTest "5.0.0-alpha.7"

You can save this to test.sh and then run it with sh test.sh to see the output yourself

And here's the output of running that script:

$ sh test.sh
== Creating npm project in /var/folders/df/9m4mpnjj1gd1jrqd3kcrnc3h0000gp/T/tmp.cxHR8vN6Ig
== installing [email protected]
== Creating example template.mjml
== Using [email protected] to convert template.mjml to template.html
== Done!


== Creating npm project in /var/folders/df/9m4mpnjj1gd1jrqd3kcrnc3h0000gp/T/tmp.1BTjh4iT6y
== installing [email protected]
== Creating example template.mjml
== Using [email protected] to convert template.mjml to template.html
File: template.mjml
Error: ValidationError:
 Line 3 of /private/var/folders/df/9m4mpnjj1gd1jrqd3kcrnc3h0000gp/T/tmp.1BTjh4iT6y/template.mjml (mj-wrapper) — Attributes border, padding, background-color are illegal

Command line error:
Input file(s) failed to render

as you can see, the warning is not printed in alpha 6, but it is printed in alpha 7

iRyusa · 2025-11-19T17:49:46Z

This is patched in 4.17.1 but not backported yet to 5.x, I think this will be sorted for the release

…

On Wed, Nov 19, 2025 at 6:09 PM Max Jacobson ***@***.***> wrote: *maxjacobson* left a comment (mjmlio/mjml#2858) <#2858 (comment)> Thanks for cutting alpha 7 👏. One observation I'm making is that some new warnings are printed: Line 3 of /path/to/template.mjml (mj-wrapper) — Attributes border, padding, background-color are illegal I think those attributes are allowed on mj-wrapper, as far as I can tell (I'm testing on the example template from the docs on this branch <https://github.com/mjmlio/mjml/blob/fix/replace-html-minifier/packages/mjml-wrapper/README.md>). Is this perhaps a bug in alpha 7? Here's a script to reproduce, showing how the behavior differs between alpha 6 and 7: Script #!/bin/sh set -e runTest() { version="$1" dir="$(mktemp --directory)" cd "$dir" echo "== Creating npm project in $dir" npm init --yes >/dev/null echo "== installing mjml@$version" npm i --silent --save "mjml@$version" # Example from https://github.com/mjmlio/mjml/blob/fix/replace-html-minifier/packages/mjml-wrapper/README.md#mj-wrapper echo "== Creating example template.mjml" cat > template.mjml << 'EOF'<mjml> <mj-body> <mj-wrapper border="1px solid #000000" padding="50px 30px" background-color="#ffffff"> <mj-section border-top="1px solid #aaaaaa" border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px"> <mj-column> <mj-image padding="0" src="https://placeholdit.imgix.net/~text?&w=350&h=150" /> </mj-column> </mj-section> <mj-section border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px" border-bottom="1px solid #aaaaaa"> <mj-column border="1px solid #dddddd"> <mj-text padding="20px"> First line of text </mj-text> <mj-divider border-width="1px" border-style="dashed" border-color="lightgrey" padding="0 20px" /> <mj-text padding="20px"> Second line of text </mj-text> </mj-column> </mj-section> </mj-wrapper> </mj-body></mjml>EOF echo "== Using mjml@$version to convert template.mjml to template.html" node_modules/.bin/mjml --read template.mjml --output template.html --config.validationLevel strict echo "== Done!" } runTest "5.0.0-alpha.6" echoecho runTest "5.0.0-alpha.7" You can save this to test.sh and then run it with sh test.sh to see the output yourself And here's the output of running that script: $ sh test.sh == Creating npm project in /var/folders/df/9m4mpnjj1gd1jrqd3kcrnc3h0000gp/T/tmp.cxHR8vN6Ig == installing ***@***.*** == Creating example template.mjml == Using ***@***.*** to convert template.mjml to template.html == Done! == Creating npm project in /var/folders/df/9m4mpnjj1gd1jrqd3kcrnc3h0000gp/T/tmp.1BTjh4iT6y == installing ***@***.*** == Creating example template.mjml == Using ***@***.*** to convert template.mjml to template.html File: template.mjml Error: ValidationError: Line 3 of /private/var/folders/df/9m4mpnjj1gd1jrqd3kcrnc3h0000gp/T/tmp.1BTjh4iT6y/template.mjml (mj-wrapper) — Attributes border, padding, background-color are illegal Command line error: Input file(s) failed to render as you can see, the warning is not printed in alpha 6, but it is printed in alpha 7 — Reply to this email directly, view it on GitHub <#2858 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAELHTKJ47WC2EDV5KIJK4D35SP5LAVCNFSM6AAAAABGYUNVXSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTKNJTHAYDEMRZHA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

maxjacobson · 2025-11-19T18:33:25Z

Oh great!

DazGreerMJ · 2025-11-20T09:54:26Z

Sorry everyone, we didn't rebase. Have included the patch in v5.0.0-alpha.8 and released

robkorv · 2025-11-20T10:07:37Z

edit: and then alpha 8 dropped 😉

I had to install cssnano-preset-lite for ~~v5.0.0-alpha.7~~ v5.0.0-alpha.8 to fix

../node_modules/cssnano/src/index.js:73
  throw new Error(
        ^

Error: Cannot load preset "lite". Please check your configuration for errors and try again.
    at resolvePreset (../node_modules/cssnano/src/index.js:73:9)
    at resolveConfig (../node_modules/cssnano/src/index.js:87:12)
    at cssnanoPlugin (../node_modules/cssnano/src/index.js:146:23)
    at processStyleNode (../node_modules/mjml-core/node_modules/htmlnano/dist/_modules/minifyCss.js:52:9)
    at ../node_modules/mjml-core/node_modules/htmlnano/dist/_modules/minifyCss.js:26:21
    at traverse (../node_modules/posthtml/lib/api.js:105:26)
    at traverse (../node_modules/posthtml/lib/api.js:111:5)
    at traverse (../node_modules/posthtml/lib/api.js:105:17)
    at traverse (../node_modules/posthtml/lib/api.js:111:5)
    at traverse (../node_modules/posthtml/lib/api.js:105:17)

Our unittests are succeeding with ~~v5.0.0-alpha.7~~ v5.0.0-alpha.8. ~~We are not using mjml-wrapper, so~~ I'm going to deploy it to production today 🤞🏽.

dazgreer · 2025-11-20T13:22:05Z

Hi @robkorv, that's great, 🤞

Yes we've added the lite preset as the default one for cssnano. It's listed in the devDependencies

maxjacobson · 2025-11-20T14:52:05Z

Can confirm that for us, alpha 8 runs without error -- when I also install cssnano-preset-lite alongside it.

I wonder if it's possible to control the error message the user sees when that package isn't installed. If so, it would be nice for mjml to tell the user that installing that dependency is one way to resolve the error. Might be helpful. 🤔

Unrelated: I'm also noticing that mjml-cli is depending on a version of glob which is now tripping some security audit tools. Would definitely appreciate for the next alpha to bump the version of glob.

Thank you!

robkorv · 2025-11-20T15:23:48Z

I had to revert back to v5.0.0-alpha.6. Because of what I think is something raised by postcss:

CssSyntaxError: <css input>:1:4: Unknown word style

> 1 | a{{style}}
    |    ^

For some of our mail logic the html that we get from mjml will further be processed with mustache. Some of those values are dynamic per receiver. In alpha.6 faulty attributes are left alone, in 8 they raise an CssSyntaxError error.

This is an example of the mjml that raised the error:

<mjml>
  <mj-head>
    <mj-title>subject</mj-title>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image src="https://example.org/resources/example_banner.png" />
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-text>
          <h1>Hi you!</h1>
          <p>Thank you for testing the convert service!</p>
          <a href="{{link}}" style="{{style}}">
            This link is finalised after with mustache
          </a>
          <p>The text below has also replacements with mustache and is dynamic per reciever.</p>
          <p>Dear {{first_name}}, <br> {{body_text}}</p>
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-button>This button is just for you!</mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Is there a way to not raise the CssSyntaxError?

iRyusa added the MJML 5 label Apr 25, 2024

iRyusa force-pushed the fix/replace-html-minifier branch from 54ebade to 097a2bd Compare July 30, 2024 09:09

Saku75 mentioned this pull request Aug 20, 2024

Fix issue with multiple high severity warnings from mjml jogold/cloudstructs#281

Open

iRyusa linked an issue Oct 1, 2024 that may be closed by this pull request

High Severity Vulnerability in html-minifier #2589

Open

iRyusa force-pushed the fix/replace-html-minifier branch from 6dfc0d7 to e457883 Compare October 4, 2024 12:40

iRyusa changed the title ~~[EXPERIMENTAL] Replace html-minifier and js-beautify~~ MJML5.0 Replace html-minifier and js-beautify Oct 4, 2024

Maxime Brazeilles added 10 commits December 3, 2024 16:43

v5.0.0-alpha.0

4c46dc6

v5.0.0-alpha.1

ad36af8

[EXPERIMENTAL] Replace prettier

3b74d31

[FIX] For OF ...

e574389

v5.0.0-alpha.2

886351e

[FIX] Remove mjml-migrate

0450eae

[CHORE] Update version of htmlnano

10bdecc

v5.0.0-alpha.3

8e1e3cd

v5.0.0-alpha.4

3d1c6cf

[CI] Remove older NodeJS version for LTS 20 + 22

cf013c9

doooooooomiki added a commit to hyperlink-drifter/nuxt-vendure that referenced this pull request Apr 1, 2025

chore(html-minifier): override dependency because of REDoS vulnerability

2be405f

mjmlio/mjml#2589 mjmlio/mjml#2858

totocap force-pushed the master branch from cda6743 to c4e003a Compare September 18, 2025 17:18

thewilkybarkid reviewed Oct 28, 2025

View reviewed changes

packages/mjml-core/src/index.js Outdated Show resolved Hide resolved

dazgreer added 3 commits October 30, 2025 17:10

bugfix(minifiers): added cssnano config options

37e4626

Branched from iRyusa's 'MJML5.0 Replace html-minifier and js-beautify' to work on the CSS minification font-family naming issue

bugfix(minifiers): used readMjmlConfig / moved imports

66674ef

- leveraged readMjmlConfig to read config file - move the fs and path imports - removed uneccessary code

Merge pull request #3008 from mjmlio/bugfix/MJML-35-version-5-update-…

87e378e

…minifier bugfix(minifiers): added cssnano config options

dazgreer mentioned this pull request Nov 4, 2025

Problem Compiling Font Names #2919

Open

Merge branch 'master' into fix/replace-html-minifier

6263c2b

dazgreer force-pushed the fix/replace-html-minifier branch from 2d3d1aa to a8fe155 Compare November 14, 2025 14:39

fix(tests): await mjml2html result

c0baf31

- created utils.js and updated all tests to use extractStyle function from it - set keepComments to true by default as per previous minifier

totocap force-pushed the fix/replace-html-minifier branch from a8fe155 to c0baf31 Compare November 14, 2025 14:55

v5.0.0-alpha.7

af208ca

tcapet added 2 commits November 20, 2025 10:32

Merge branch 'master' into fix/replace-html-minifier

7068b0e

v5.0.0-alpha.8

6be02fc

PE39806 mentioned this pull request Dec 2, 2025

Bump mjml from 5.0.0-alpha.6 to 5.0.0-alpha.8 in /backend gchq/Bailo#2957

Merged

MJML5.0 Replace html-minifier and js-beautify #2858

Are you sure you want to change the base?

MJML5.0 Replace html-minifier and js-beautify #2858

Uh oh!

Conversation

iRyusa commented Apr 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

marvin-wtt commented May 4, 2024

Uh oh!

iRyusa commented May 4, 2024 via email

Uh oh!

marvin-wtt commented May 4, 2024

Uh oh!

iRyusa commented May 14, 2024

Uh oh!

thewilkybarkid commented Jul 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

iRyusa commented Jul 30, 2024

Uh oh!

AaronMoat commented Aug 3, 2024

Uh oh!

iRyusa commented Aug 3, 2024 via email

Uh oh!

AaronMoat commented Aug 19, 2024

Uh oh!

iRyusa commented Oct 4, 2024

Uh oh!

robkorv commented Oct 18, 2024

Uh oh!

iRyusa commented Oct 18, 2024

Uh oh!

jwaterworth commented Nov 14, 2024

Uh oh!

robkorv commented Nov 18, 2024

Uh oh!

nickdnk commented Jun 24, 2025

Uh oh!

iRyusa commented Jun 24, 2025

Uh oh!

Uh oh!

dazgreer commented Nov 4, 2025

Uh oh!

thewilkybarkid commented Nov 11, 2025

Uh oh!

robkorv commented Nov 11, 2025

Uh oh!

dazgreer commented Nov 17, 2025

Uh oh!

dazgreer commented Nov 19, 2025

Uh oh!

maxjacobson commented Nov 19, 2025

Uh oh!

iRyusa commented Nov 19, 2025 via email

Uh oh!

maxjacobson commented Nov 19, 2025

Uh oh!

DazGreerMJ commented Nov 20, 2025

Uh oh!

robkorv commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dazgreer commented Nov 20, 2025

Uh oh!

maxjacobson commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

robkorv commented Nov 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

13 participants

iRyusa commented Apr 25, 2024 •

edited

Loading

thewilkybarkid commented Jul 16, 2024 •

edited

Loading

robkorv commented Nov 20, 2025 •

edited

Loading

maxjacobson commented Nov 20, 2025 •

edited

Loading