From ce4ce53ffbe7522df56ba20fd92568b1a3ea84b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bernat=20Jufr=C3=A9?= <info@behind.esign>
Date: Fri, 11 Jun 2021 07:46:11 +0200
Subject: [PATCH 1/2] feat: add support for ESM module when transpiling code

---
 babel.config.js                               |  3 ++
 package.json                                  |  5 ++-
 packages/mjml-accordion/package.json          | 12 ++++--
 packages/mjml-body/package.json               | 12 ++++--
 packages/mjml-button/package.json             | 12 ++++--
 packages/mjml-carousel/package.json           | 12 ++++--
 packages/mjml-column/package.json             | 12 ++++--
 packages/mjml-core/package.json               | 12 ++++--
 packages/mjml-divider/package.json            | 12 ++++--
 packages/mjml-group/package.json              | 12 ++++--
 packages/mjml-head-attributes/package.json    | 12 ++++--
 packages/mjml-head-breakpoint/package.json    | 12 ++++--
 packages/mjml-head-font/package.json          | 12 ++++--
 .../mjml-head-html-attributes/package.json    | 12 ++++--
 packages/mjml-head-preview/package.json       | 12 ++++--
 packages/mjml-head-style/package.json         | 12 ++++--
 packages/mjml-head-title/package.json         | 12 ++++--
 packages/mjml-head/package.json               | 12 ++++--
 packages/mjml-hero/package.json               | 12 ++++--
 packages/mjml-image/package.json              | 12 ++++--
 packages/mjml-navbar/package.json             | 12 ++++--
 packages/mjml-parser-xml/package.json         | 12 ++++--
 packages/mjml-preset-core/package.json        | 12 ++++--
 packages/mjml-raw/package.json                | 12 ++++--
 packages/mjml-section/package.json            | 12 ++++--
 packages/mjml-social/package.json             | 12 ++++--
 packages/mjml-spacer/package.json             | 12 ++++--
 packages/mjml-table/package.json              | 12 ++++--
 packages/mjml-text/package.json               | 12 ++++--
 packages/mjml-validator/package.json          | 12 ++++--
 packages/mjml-wrapper/package.json            | 12 ++++--
 packages/mjml/package.json                    | 12 ++++--
 yarn.lock                                     | 40 +++++++++++++++++++
 33 files changed, 317 insertions(+), 91 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index 04c3ed896..f722f463b 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,7 +1,10 @@
+const ESM = process.env.ESM === 'true'
+
 module.exports = {
   presets: [['@babel/env', {
     targets: { node: '10' },
     include: ['transform-classes'],
+    ...(ESM ? { modules: false } : {}),
   }]],
   plugins: [
     '@babel/proposal-class-properties',
diff --git a/package.json b/package.json
index 95f507375..8a5ae249a 100755
--- a/package.json
+++ b/package.json
@@ -3,7 +3,9 @@
   "private": true,
   "scripts": {
     "build:watch": "lerna run build --parallel -- -- -w",
-    "build": "lerna run build --parallel --ignore mjml-browser",
+    "build": "yarn run build:cjs && yarn run build:esm",
+    "build:cjs": "lerna run build --parallel --ignore mjml-browser",
+    "build:esm": "cross-env ESM=true lerna run build:esm --parallel --ignore mjml-browser --ignore mjml-cli --ignore mjml-migrate",
     "build-browser": "cd packages/mjml-browser && yarn build",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -22,6 +24,7 @@
     "babel-eslint": "^10.1.0",
     "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-lodash": "^3.3.4",
+    "cross-env": "^7.0.3",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.1.0",
     "eslint-config-prettier": "^6.11.0",
diff --git a/packages/mjml-accordion/package.json b/packages/mjml-accordion/package.json
index cfe02e3dd..5b086d95a 100644
--- a/packages/mjml-accordion/package.json
+++ b/packages/mjml-accordion/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-accordion",
   "description": "mjml-accordion",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-body/package.json b/packages/mjml-body/package.json
index 2cc0a9864..03e87012e 100644
--- a/packages/mjml-body/package.json
+++ b/packages/mjml-body/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-body",
   "description": "mjml-body",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-button/package.json b/packages/mjml-button/package.json
index ab3174501..e5fc4858e 100644
--- a/packages/mjml-button/package.json
+++ b/packages/mjml-button/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-button",
   "description": "mjml-button",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-carousel/package.json b/packages/mjml-carousel/package.json
index 802d39180..45d45749c 100644
--- a/packages/mjml-carousel/package.json
+++ b/packages/mjml-carousel/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-carousel",
   "description": "mjml-carousel",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-column/package.json b/packages/mjml-column/package.json
index e472bde40..97b0063b2 100644
--- a/packages/mjml-column/package.json
+++ b/packages/mjml-column/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-column",
   "description": "mjml-column",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-core/package.json b/packages/mjml-core/package.json
index cdae9aa06..d598e5528 100644
--- a/packages/mjml-core/package.json
+++ b/packages/mjml-core/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-core",
   "description": "mjml-core",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward",
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward",
     "test": "node ./tests/index.js"
   },
   "dependencies": {
@@ -38,4 +44,4 @@
     "chai": "^4.1.1",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-divider/package.json b/packages/mjml-divider/package.json
index 65a0c3c41..84d671a42 100644
--- a/packages/mjml-divider/package.json
+++ b/packages/mjml-divider/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-divider",
   "description": "mjml-divider",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-group/package.json b/packages/mjml-group/package.json
index 93b148ae5..1c611b9d1 100644
--- a/packages/mjml-group/package.json
+++ b/packages/mjml-group/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-group",
   "description": "mjml-group",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-head-attributes/package.json b/packages/mjml-head-attributes/package.json
index 50d7c3b14..2e64f05b6 100644
--- a/packages/mjml-head-attributes/package.json
+++ b/packages/mjml-head-attributes/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-head-attributes",
   "description": "mjml-head-attributes",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-head-breakpoint/package.json b/packages/mjml-head-breakpoint/package.json
index fdb9c385e..f28be918a 100644
--- a/packages/mjml-head-breakpoint/package.json
+++ b/packages/mjml-head-breakpoint/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-head-breakpoint",
   "description": "mjml-head-breakpoint",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-head-font/package.json b/packages/mjml-head-font/package.json
index 10cebb37b..6e7cc421a 100644
--- a/packages/mjml-head-font/package.json
+++ b/packages/mjml-head-font/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-head-font",
   "description": "mjml-head-font",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-head-html-attributes/package.json b/packages/mjml-head-html-attributes/package.json
index 07e6dbfd8..f4fe07b5d 100644
--- a/packages/mjml-head-html-attributes/package.json
+++ b/packages/mjml-head-html-attributes/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-head-html-attributes",
   "description": "mjml-head-html-attributes",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-head-preview/package.json b/packages/mjml-head-preview/package.json
index c99a3120b..d24b7996b 100644
--- a/packages/mjml-head-preview/package.json
+++ b/packages/mjml-head-preview/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-head-preview",
   "description": "mjml-head-preview",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-head-style/package.json b/packages/mjml-head-style/package.json
index 2121570f5..26931714e 100644
--- a/packages/mjml-head-style/package.json
+++ b/packages/mjml-head-style/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-head-style",
   "description": "mjml-head-style",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-head-title/package.json b/packages/mjml-head-title/package.json
index be243dc39..3a4481101 100644
--- a/packages/mjml-head-title/package.json
+++ b/packages/mjml-head-title/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-head-title",
   "description": "mjml-head-title",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-head/package.json b/packages/mjml-head/package.json
index 18db4363e..4707d031a 100644
--- a/packages/mjml-head/package.json
+++ b/packages/mjml-head/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-head",
   "description": "mjml-head",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-hero/package.json b/packages/mjml-hero/package.json
index 8f2d43930..dc85e6c8e 100644
--- a/packages/mjml-hero/package.json
+++ b/packages/mjml-hero/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-hero",
   "description": "mjml-hero",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-image/package.json b/packages/mjml-image/package.json
index 5b811a3ed..539f1d044 100644
--- a/packages/mjml-image/package.json
+++ b/packages/mjml-image/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-image",
   "description": "mjml-image",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-navbar/package.json b/packages/mjml-navbar/package.json
index 434529398..47e99e4d0 100644
--- a/packages/mjml-navbar/package.json
+++ b/packages/mjml-navbar/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-navbar",
   "description": "mjml-navbar",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-parser-xml/package.json b/packages/mjml-parser-xml/package.json
index 279402a6d..73cbac82c 100644
--- a/packages/mjml-parser-xml/package.json
+++ b/packages/mjml-parser-xml/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-parser-xml",
   "description": "mjml-parser-xml",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward",
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward",
     "test": "node ./test/test.js"
   },
   "dependencies": {
@@ -34,4 +40,4 @@
     "mjml-core": "4.9.3",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-preset-core/package.json b/packages/mjml-preset-core/package.json
index c041380b0..251474577 100644
--- a/packages/mjml-preset-core/package.json
+++ b/packages/mjml-preset-core/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-preset-core",
   "description": "mjml-preset-core",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -52,4 +58,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-raw/package.json b/packages/mjml-raw/package.json
index 95aa23347..6b4336ccf 100644
--- a/packages/mjml-raw/package.json
+++ b/packages/mjml-raw/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-raw",
   "description": "mjml-raw",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-section/package.json b/packages/mjml-section/package.json
index d2bb252de..a354981ae 100644
--- a/packages/mjml-section/package.json
+++ b/packages/mjml-section/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-section",
   "description": "mjml-section",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-social/package.json b/packages/mjml-social/package.json
index ba3861373..43b6a40e1 100644
--- a/packages/mjml-social/package.json
+++ b/packages/mjml-social/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-social",
   "description": "mjml-social",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-spacer/package.json b/packages/mjml-spacer/package.json
index 89ef22aaa..3de92396b 100644
--- a/packages/mjml-spacer/package.json
+++ b/packages/mjml-spacer/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-spacer",
   "description": "mjml-spacer",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-table/package.json b/packages/mjml-table/package.json
index 9ef38fd60..13726cad2 100644
--- a/packages/mjml-table/package.json
+++ b/packages/mjml-table/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-table",
   "description": "mjml-atable",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-text/package.json b/packages/mjml-text/package.json
index 041142c88..8d07e968c 100644
--- a/packages/mjml-text/package.json
+++ b/packages/mjml-text/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-text",
   "description": "mjml-text",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -29,4 +35,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-validator/package.json b/packages/mjml-validator/package.json
index cca4b9c6c..2c489deb9 100644
--- a/packages/mjml-validator/package.json
+++ b/packages/mjml-validator/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-validator",
   "description": "mjml-validator",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/cjs/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7"
@@ -27,4 +33,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml-wrapper/package.json b/packages/mjml-wrapper/package.json
index 88dfe9c10..ababb4072 100644
--- a/packages/mjml-wrapper/package.json
+++ b/packages/mjml-wrapper/package.json
@@ -2,7 +2,12 @@
   "name": "mjml-wrapper",
   "description": "mjml-wrapper",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "files": [
     "lib"
   ],
@@ -18,7 +23,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",
@@ -30,4 +36,4 @@
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/mjml/package.json b/packages/mjml/package.json
index 9df1e16c1..d914c0569 100644
--- a/packages/mjml/package.json
+++ b/packages/mjml/package.json
@@ -2,7 +2,12 @@
   "name": "mjml",
   "description": "MJML: the only framework that makes responsive-email easy",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    "imports": "./lib/esm/index.js",
+    "require": "./lib/cjs/index.js"
+  },
   "bin": {
     "mjml": "bin/mjml"
   },
@@ -22,7 +27,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward",
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward",
     "test": "node ./test/test-html-attributes.js"
   },
   "dependencies": {
@@ -40,4 +46,4 @@
     "lodash": "^4.17.15",
     "rimraf": "^3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 5b059b297..f57cd97ea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3301,6 +3301,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
 cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -3312,6 +3319,15 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+cross-spawn@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypto-browserify@^3.11.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -6611,6 +6627,11 @@ path-key@^2.0.0, path-key@^2.0.1:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
   integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
 path-parse@^1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
@@ -7431,11 +7452,23 @@ shebang-command@^1.2.0:
   dependencies:
     shebang-regex "^1.0.0"
 
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
 shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
   integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -8507,6 +8540,13 @@ which@^1.2.14, which@^1.2.9, which@^1.3.1:
   dependencies:
     isexe "^2.0.0"
 
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
 wide-align@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"

From 1df7c1c28ccdd4dfcb6d3b7082fbc23905545767 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bernat=20Jufr=C3=A9?= <info@behind.esign>
Date: Fri, 11 Jun 2021 13:34:07 +0200
Subject: [PATCH 2/2] fixup! feat: add support for ESM module when transpiling
 code

---
 packages/mjml-accordion/src/AccordionElement.js             | 2 +-
 packages/mjml-accordion/src/AccordionTitle.js               | 2 +-
 packages/mjml-button/src/index.js                           | 2 +-
 packages/mjml-carousel/src/Carousel.js                      | 2 +-
 packages/mjml-column/src/index.js                           | 2 +-
 packages/mjml-core/tests/jsonToXml-test.js                  | 2 +-
 packages/mjml-core/tests/mergeOutlookConditionnals-test.js  | 2 +-
 packages/mjml-core/tests/minifyOutlookConditionnals-test.js | 2 +-
 packages/mjml-core/tests/shorthandParser-test.js            | 2 +-
 packages/mjml-core/tests/widthParser-test.js                | 2 +-
 packages/mjml-divider/src/index.js                          | 2 +-
 packages/mjml-group/src/index.js                            | 2 +-
 packages/mjml-hero/src/index.js                             | 2 +-
 packages/mjml-image/src/index.js                            | 2 +-
 packages/mjml-navbar/src/Navbar.js                          | 2 +-
 packages/mjml-navbar/src/NavbarLink.js                      | 2 +-
 packages/mjml-parser-xml/test/test-preprocessors.js         | 6 +++---
 packages/mjml-table/src/index.js                            | 2 +-
 packages/mjml-text/src/index.js                             | 2 +-
 19 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/mjml-accordion/src/AccordionElement.js b/packages/mjml-accordion/src/AccordionElement.js
index 1475a5f83..a743075d3 100644
--- a/packages/mjml-accordion/src/AccordionElement.js
+++ b/packages/mjml-accordion/src/AccordionElement.js
@@ -1,6 +1,6 @@
 import { BodyComponent } from 'mjml-core'
 import { find } from 'lodash'
-import conditionalTag from 'mjml-core/lib/helpers/conditionalTag'
+import conditionalTag from 'mjml-core/lib/esm/helpers/conditionalTag'
 import AccordionText from './AccordionText'
 import AccordionTitle from './AccordionTitle'
 
diff --git a/packages/mjml-accordion/src/AccordionTitle.js b/packages/mjml-accordion/src/AccordionTitle.js
index 2b76c89ab..a7efe2e47 100644
--- a/packages/mjml-accordion/src/AccordionTitle.js
+++ b/packages/mjml-accordion/src/AccordionTitle.js
@@ -1,5 +1,5 @@
 import { BodyComponent } from 'mjml-core'
-import conditionalTag from 'mjml-core/lib/helpers/conditionalTag'
+import conditionalTag from 'mjml-core/lib/esm/helpers/conditionalTag'
 
 export default class MjAccordionTitle extends BodyComponent {
   static componentName = 'mj-accordion-title'
diff --git a/packages/mjml-button/src/index.js b/packages/mjml-button/src/index.js
index 695c988e9..ff1af3253 100644
--- a/packages/mjml-button/src/index.js
+++ b/packages/mjml-button/src/index.js
@@ -1,6 +1,6 @@
 import { BodyComponent } from 'mjml-core'
 
-import widthParser from 'mjml-core/lib/helpers/widthParser'
+import widthParser from 'mjml-core/lib/esm/helpers/widthParser'
 
 export default class MjButton extends BodyComponent {
   static componentName = 'mj-button'
diff --git a/packages/mjml-carousel/src/Carousel.js b/packages/mjml-carousel/src/Carousel.js
index 3bac21b78..54d6348ec 100644
--- a/packages/mjml-carousel/src/Carousel.js
+++ b/packages/mjml-carousel/src/Carousel.js
@@ -2,7 +2,7 @@ import { BodyComponent } from 'mjml-core'
 import { range, repeat, min, map } from 'lodash'
 import crypto from 'crypto'
 
-import { msoConditionalTag } from 'mjml-core/lib/helpers/conditionalTag'
+import { msoConditionalTag } from 'mjml-core/lib/esm/helpers/conditionalTag'
 
 export default class MjCarousel extends BodyComponent {
   static componentName = 'mj-carousel'
diff --git a/packages/mjml-column/src/index.js b/packages/mjml-column/src/index.js
index 5843cbd12..990e172af 100644
--- a/packages/mjml-column/src/index.js
+++ b/packages/mjml-column/src/index.js
@@ -1,6 +1,6 @@
 import { BodyComponent } from 'mjml-core'
 
-import widthParser from 'mjml-core/lib/helpers/widthParser'
+import widthParser from 'mjml-core/lib/esm/helpers/widthParser'
 
 export default class MjColumn extends BodyComponent {
   static componentName = 'mj-column'
diff --git a/packages/mjml-core/tests/jsonToXml-test.js b/packages/mjml-core/tests/jsonToXml-test.js
index 11a484309..06faf37ef 100644
--- a/packages/mjml-core/tests/jsonToXml-test.js
+++ b/packages/mjml-core/tests/jsonToXml-test.js
@@ -1,5 +1,5 @@
 const chai = require('chai')
-const jsonToXml = require('../lib/helpers/jsonToXML')
+const jsonToXml = require('../lib/cjs/helpers/jsonToXML')
 
 const json = {
   line: 1,
diff --git a/packages/mjml-core/tests/mergeOutlookConditionnals-test.js b/packages/mjml-core/tests/mergeOutlookConditionnals-test.js
index d12d7bcb6..4ed351cd8 100644
--- a/packages/mjml-core/tests/mergeOutlookConditionnals-test.js
+++ b/packages/mjml-core/tests/mergeOutlookConditionnals-test.js
@@ -1,5 +1,5 @@
 const chai = require('chai')
-const mergeOutlookConditionnals = require('../lib/helpers/mergeOutlookConditionnals')
+const mergeOutlookConditionnals = require('../lib/cjs/helpers/mergeOutlookConditionnals')
 
 const testValues = [
   {
diff --git a/packages/mjml-core/tests/minifyOutlookConditionnals-test.js b/packages/mjml-core/tests/minifyOutlookConditionnals-test.js
index b1016dcae..e7474488c 100644
--- a/packages/mjml-core/tests/minifyOutlookConditionnals-test.js
+++ b/packages/mjml-core/tests/minifyOutlookConditionnals-test.js
@@ -1,5 +1,5 @@
 const chai = require('chai')
-const minifyOutlookConditionnals = require('../lib/helpers/minifyOutlookConditionnals')
+const minifyOutlookConditionnals = require('../lib/cjs/helpers/minifyOutlookConditionnals')
 
 const testValues = [
   {
diff --git a/packages/mjml-core/tests/shorthandParser-test.js b/packages/mjml-core/tests/shorthandParser-test.js
index 613173da5..c716e731f 100644
--- a/packages/mjml-core/tests/shorthandParser-test.js
+++ b/packages/mjml-core/tests/shorthandParser-test.js
@@ -1,5 +1,5 @@
 const chai = require('chai')
-const helper = require('../lib/helpers/shorthandParser')
+const helper = require('../lib/cjs/helpers/shorthandParser')
 
 const shorthandParser = helper && helper.default
 
diff --git a/packages/mjml-core/tests/widthParser-test.js b/packages/mjml-core/tests/widthParser-test.js
index 885e29a56..d1319b9f2 100644
--- a/packages/mjml-core/tests/widthParser-test.js
+++ b/packages/mjml-core/tests/widthParser-test.js
@@ -1,5 +1,5 @@
 const chai = require('chai')
-const widthParser = require('../lib/helpers/widthParser')
+const widthParser = require('../lib/cjs/helpers/widthParser')
 
 const testValues = [
   {
diff --git a/packages/mjml-divider/src/index.js b/packages/mjml-divider/src/index.js
index dcb5da9ca..7eed10f05 100644
--- a/packages/mjml-divider/src/index.js
+++ b/packages/mjml-divider/src/index.js
@@ -1,6 +1,6 @@
 import { BodyComponent } from 'mjml-core'
 
-import widthParser from 'mjml-core/lib/helpers/widthParser'
+import widthParser from 'mjml-core/lib/esm/helpers/widthParser'
 
 export default class MjDivider extends BodyComponent {
   static componentName = 'mj-divider'
diff --git a/packages/mjml-group/src/index.js b/packages/mjml-group/src/index.js
index 7661eb85c..55f78110c 100644
--- a/packages/mjml-group/src/index.js
+++ b/packages/mjml-group/src/index.js
@@ -1,6 +1,6 @@
 import { BodyComponent } from 'mjml-core'
 
-import widthParser from 'mjml-core/lib/helpers/widthParser'
+import widthParser from 'mjml-core/lib/esm/helpers/widthParser'
 
 export default class MjGroup extends BodyComponent {
   static componentName = 'mj-group'
diff --git a/packages/mjml-hero/src/index.js b/packages/mjml-hero/src/index.js
index 4f8a3b875..00bda6fa5 100644
--- a/packages/mjml-hero/src/index.js
+++ b/packages/mjml-hero/src/index.js
@@ -1,7 +1,7 @@
 import { BodyComponent } from 'mjml-core'
 import { flow, identity, join, filter } from 'lodash/fp'
 
-import widthParser from 'mjml-core/lib/helpers/widthParser'
+import widthParser from 'mjml-core/lib/esm/helpers/widthParser'
 
 const makeBackgroundString = flow(filter(identity), join(' '))
 
diff --git a/packages/mjml-image/src/index.js b/packages/mjml-image/src/index.js
index e44862470..a4db711a0 100644
--- a/packages/mjml-image/src/index.js
+++ b/packages/mjml-image/src/index.js
@@ -2,7 +2,7 @@ import { min } from 'lodash'
 
 import { BodyComponent } from 'mjml-core'
 
-import widthParser from 'mjml-core/lib/helpers/widthParser'
+import widthParser from 'mjml-core/lib/esm/helpers/widthParser'
 
 export default class MjImage extends BodyComponent {
   static componentName = 'mj-image'
diff --git a/packages/mjml-navbar/src/Navbar.js b/packages/mjml-navbar/src/Navbar.js
index eed01da2e..97cb95441 100644
--- a/packages/mjml-navbar/src/Navbar.js
+++ b/packages/mjml-navbar/src/Navbar.js
@@ -3,7 +3,7 @@ import crypto from 'crypto'
 
 import conditionalTag, {
   msoConditionalTag,
-} from 'mjml-core/lib/helpers/conditionalTag'
+} from 'mjml-core/lib/esm/helpers/conditionalTag'
 
 export default class MjNavbar extends BodyComponent {
   static componentName = 'mj-navbar'
diff --git a/packages/mjml-navbar/src/NavbarLink.js b/packages/mjml-navbar/src/NavbarLink.js
index 7bdad6845..299afdab7 100644
--- a/packages/mjml-navbar/src/NavbarLink.js
+++ b/packages/mjml-navbar/src/NavbarLink.js
@@ -1,6 +1,6 @@
 import { BodyComponent, suffixCssClasses } from 'mjml-core'
 
-import conditionalTag from 'mjml-core/lib/helpers/conditionalTag'
+import conditionalTag from 'mjml-core/lib/esm/helpers/conditionalTag'
 
 export default class MjNavbarLink extends BodyComponent {
   static componentName = 'mj-navbar-link'
diff --git a/packages/mjml-parser-xml/test/test-preprocessors.js b/packages/mjml-parser-xml/test/test-preprocessors.js
index b26741f13..d3b6d9078 100644
--- a/packages/mjml-parser-xml/test/test-preprocessors.js
+++ b/packages/mjml-parser-xml/test/test-preprocessors.js
@@ -1,7 +1,7 @@
 const { template } = require('lodash')
-const MJMLParser = require('../lib')
-const mjml2html = require('../../mjml/lib')
-const { components } = require('../../mjml-core/lib')
+const MJMLParser = require('../lib/cjs')
+const mjml2html = require('../../mjml/lib/cjs')
+const { components } = require('../../mjml-core/lib/cjs')
 
 const parse = mjml =>
   MJMLParser(mjml, {
diff --git a/packages/mjml-table/src/index.js b/packages/mjml-table/src/index.js
index 76b856e62..8968f4141 100644
--- a/packages/mjml-table/src/index.js
+++ b/packages/mjml-table/src/index.js
@@ -1,4 +1,4 @@
-import widthParser from 'mjml-core/lib/helpers/widthParser'
+import widthParser from 'mjml-core/lib/esm/helpers/widthParser'
 
 import { BodyComponent } from 'mjml-core'
 import { reduce } from 'lodash'
diff --git a/packages/mjml-text/src/index.js b/packages/mjml-text/src/index.js
index 23e87e11d..6d6f08388 100644
--- a/packages/mjml-text/src/index.js
+++ b/packages/mjml-text/src/index.js
@@ -1,6 +1,6 @@
 import { BodyComponent } from 'mjml-core'
 
-import conditionalTag from 'mjml-core/lib/helpers/conditionalTag'
+import conditionalTag from 'mjml-core/lib/esm/helpers/conditionalTag'
 
 export default class MjText extends BodyComponent {
   static componentName = 'mj-text'