MJML5.0 Replace html-minifier and js-beautify

.github/workflows/mjml-workflow.yml

@@ -5,15 +5,15 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [ 16.x, 18.x, 20.x]
+        node-version: [20.x, 22.x]
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
       - name: Run linting & tests
-        run:  |
+        run: |
           yarn install
           yarn build
           yarn lint

lerna.json

@@ -9,5 +9,5 @@
   },
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "4.15.3"
+  "version": "5.0.0-alpha.6"
 }

packages/mjml-accordion/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-accordion",
   "description": "mjml-accordion",
-  "version": "4.15.3",
+  "version": "5.0.0-alpha.6",
   "main": "lib/index.js",
   "files": [
     "lib"
@@ -23,7 +23,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "lodash": "^4.17.21",
-    "mjml-core": "4.15.3"
+    "mjml-core": "5.0.0-alpha.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

packages/mjml-body/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-body",
   "description": "mjml-body",
-  "version": "4.15.3",
+  "version": "5.0.0-alpha.6",
   "main": "lib/index.js",
   "files": [
     "lib"
@@ -23,7 +23,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "lodash": "^4.17.21",
-    "mjml-core": "4.15.3"
+    "mjml-core": "5.0.0-alpha.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

packages/mjml-browser/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-browser",
   "description": "MJML: the only framework that makes responsive-email easy",
-  "version": "4.15.3",
+  "version": "5.0.0-alpha.6",
   "main": "lib/index.js",
   "files": [
     "lib"

packages/mjml-button/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-button",
   "description": "mjml-button",
-  "version": "4.15.3",
+  "version": "5.0.0-alpha.6",
   "main": "lib/index.js",
   "files": [
     "lib"
@@ -23,7 +23,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "lodash": "^4.17.21",
-    "mjml-core": "4.15.3"
+    "mjml-core": "5.0.0-alpha.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

packages/mjml-carousel/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-carousel",
   "description": "mjml-carousel",
-  "version": "4.15.3",
+  "version": "5.0.0-alpha.6",
   "main": "lib/index.js",
   "files": [
     "lib"
@@ -23,7 +23,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "lodash": "^4.17.21",
-    "mjml-core": "4.15.3"
+    "mjml-core": "5.0.0-alpha.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

packages/mjml-cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-cli",
   "description": "MJML: the only framework that makes responsive-email easy",
-  "version": "4.15.3",
+  "version": "5.0.0-alpha.6",
   "main": "bin/mjml",
   "bin": {
     "mjml-cli": "bin/mjml"
@@ -28,14 +28,11 @@
     "@babel/runtime": "^7.23.9",
     "chokidar": "^3.0.0",
     "glob": "^10.3.10",
-    "html-minifier": "^4.0.0",
-    "js-beautify": "^1.6.14",
     "lodash": "^4.17.21",
     "minimatch": "^9.0.3",
-    "mjml-core": "4.15.3",
-    "mjml-migrate": "4.15.3",
-    "mjml-parser-xml": "4.15.3",
-    "mjml-validator": "4.15.3",
+    "mjml-core": "5.0.0-alpha.6",
+    "mjml-parser-xml": "5.0.0-alpha.6",
+    "mjml-validator": "5.0.0-alpha.6",
     "yargs": "^17.7.2"
   },
   "devDependencies": {

packages/mjml-cli/src/client.js

@@ -1,12 +1,9 @@
 import path from 'path'
 import yargs from 'yargs'
 import { flow, pick, isNil, negate, pickBy } from 'lodash/fp'
-import { isArray, isEmpty, map, get, omit } from 'lodash'
-import { html as htmlBeautify } from 'js-beautify'
-import { minify as htmlMinify } from 'html-minifier'
+import { isArray, isEmpty, map, get } from 'lodash'
 
 import mjml2html, { components, initializeType } from 'mjml-core'
-import migrate from 'mjml-migrate'
 import validate, { dependencies } from 'mjml-validator'
 import MJMLParser from 'mjml-parser-xml'
 
@@ -60,11 +57,6 @@ export default async () => {
         describe: 'Compile MJML File(s)',
         type: 'array',
       },
-      m: {
-        alias: 'migrate',
-        describe: 'Migrate MJML3 File(s) (deprecated)',
-        type: 'array',
-      },
       v: {
         alias: 'validate',
         describe: 'Run validator on File(s)',
@@ -212,13 +204,11 @@ export default async () => {
   const convertedStream = []
   const failedStream = []
 
-  inputs.forEach((i) => {
+  // eslint-disable-next-line guard-for-in
+  for (const i of inputs) {
     try {
       let compiled
       switch (inputOpt) {
-        case 'm':
-          compiled = { html: migrate(i.mjml, { beautify: true }) }
-          break
         case 'v': // eslint-disable-next-line no-case-declarations
           const mjmlJson = MJMLParser(i.mjml, {
             components,
@@ -238,20 +228,16 @@ export default async () => {
           const beautify = config.beautify && config.beautify !== 'false'
           const minify = config.minify && config.minify !== 'false'
 
-          compiled = mjml2html(i.mjml, {
-            ...omit(config, ['minify', 'beautify']),
+          // eslint-disable-next-line no-await-in-loop
+          compiled = await mjml2html(i.mjml, {
+            ...config,
+            minify,
+            beautify,
+            beautifyConfig,
+            minifyConfig,
             filePath: filePath || i.file,
             actualPath: i.file,
           })
-          if (beautify) {
-            compiled.html = htmlBeautify(compiled.html, beautifyConfig)
-          }
-          if (minify) {
-            compiled.html = htmlMinify(compiled.html, {
-              ...minifyConfig,
-              ...config.minifyOptions,
-            })
-          }
         }
       }
 
@@ -260,7 +246,7 @@ export default async () => {
       EXIT_CODE = 2
       failedStream.push({ file: i.file, error: e })
     }
-  })
+  }
 
   convertedStream.forEach((s) => {
     if (get(s, 'compiled.errors.length')) {

packages/mjml-cli/src/commands/watchFiles.js

@@ -5,9 +5,6 @@ import { match } from 'minimatch'
 import path from 'path'
 import mjml2html from 'mjml-core'
 import { flow, pickBy, flatMap, uniq, difference, remove } from 'lodash/fp'
-import { omit } from 'lodash'
-import { html as htmlBeautify } from 'js-beautify'
-import { minify as htmlMinify } from 'html-minifier'
 
 import readFile from './readFile'
 import makeOutputToFile from './outputToFile'
@@ -51,25 +48,18 @@ export default (input, options) => {
   }
   const readAndCompile = flow(
     (file) => ({ file, content: readFile(file).mjml }),
-    (args) => {
-      const { config, beautifyConfig, minifyConfig } = options
+    async (args) => {
+      const { config } = options
       const beautify = config.beautify && config.beautify !== 'false'
       const minify = config.minify && config.minify !== 'false'
 
-      const compiled = mjml2html(args.content, {
+      const compiled = await mjml2html(args.content, {
+        ...config,
+        beautify,
+        minify,
         filePath: args.file,
         actualPath: args.file,
-        ...omit(config, ['minify', 'beautify']),
       })
-      if (beautify) {
-        compiled.html = htmlBeautify(compiled.html, beautifyConfig)
-      }
-      if (minify) {
-        compiled.html = htmlMinify(compiled.html, {
-          ...minifyConfig,
-          ...config.minifyOptions,
-        })
-      }
 
       return {
         ...args,

packages/mjml-column/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-column",
   "description": "mjml-column",
-  "version": "4.15.3",
+  "version": "5.0.0-alpha.6",
   "main": "lib/index.js",
   "files": [
     "lib"
@@ -23,7 +23,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "lodash": "^4.17.21",
-    "mjml-core": "4.15.3"
+    "mjml-core": "5.0.0-alpha.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

packages/mjml-core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-core",
   "description": "mjml-core",
-  "version": "4.15.3",
+  "version": "5.0.0-alpha.6",
   "main": "lib/index.js",
   "files": [
     "lib"
@@ -24,14 +24,15 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "cheerio": "1.0.0-rc.12",
+    "cssnano": "^7.0.1",
     "detect-node": "^2.0.4",
-    "html-minifier": "^4.0.0",
-    "js-beautify": "^1.6.14",
-    "juice": "^10.0.0",
+    "htmlnano": "^2.1.1",
+    "juice": "^11.0.0",
     "lodash": "^4.17.21",
-    "mjml-migrate": "4.15.3",
-    "mjml-parser-xml": "4.15.3",
-    "mjml-validator": "4.15.3"
+    "mjml-parser-xml": "5.0.0-alpha.6",
+    "mjml-validator": "5.0.0-alpha.6",
+    "postcss": "^8.4.33",
+    "prettier": "^3.2.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

packages/mjml-core/src/index.js

@@ -12,16 +12,15 @@ import {
 } from 'lodash'
 import path from 'path'
 import juice from 'juice'
-import { html as htmlBeautify } from 'js-beautify'
-import { minify as htmlMinify } from 'html-minifier'
 import { load } from 'cheerio'
+import prettier from 'prettier'
+import minifier from 'htmlnano'
 
 import MJMLParser from 'mjml-parser-xml'
 import MJMLValidator, {
   dependencies as globalDependencies,
   assignDependencies,
 } from 'mjml-validator'
-import { handleMjml3 } from 'mjml-migrate'
 
 import { initComponent } from './createComponent'
 import globalComponents, {
@@ -51,7 +50,7 @@ class ValidationError extends Error {
   }
 }
 
-export default function mjml2html(mjml, options = {}) {
+export default async function mjml2html(mjml, options = {}) {
   let content = ''
   let errors = []
 
@@ -118,7 +117,6 @@ export default function mjml2html(mjml, options = {}) {
     validationLevel = 'soft',
     filePath = '.',
     actualPath = '.',
-    noMigrateWarn = false,
     preprocessors,
     presets = [],
     printerSupport = false,
@@ -148,8 +146,6 @@ export default function mjml2html(mjml, options = {}) {
     })
   }
 
-  mjml = handleMjml3(mjml, { noMigrateWarn })
-
   const globalData = {
     backgroundColor: '',
     beforeDoctype: '',
@@ -397,31 +393,21 @@ export default function mjml2html(mjml, options = {}) {
   content = mergeOutlookConditionnals(content)
 
   if (beautify) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      '"beautify" option is deprecated in mjml-core and only available in mjml cli.',
-    )
-    content = htmlBeautify(content, {
-      indent_size: 2,
-      wrap_attributes_indent_size: 2,
-      max_preserve_newline: 0,
-      preserve_newlines: false,
+    content = await prettier.format(content, {
+      parser: 'html',
+      printWidth: 240,
     })
   }
 
   if (minify) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      '"minify" option is deprecated in mjml-core and only available in mjml cli.',
-    )
-
-    content = htmlMinify(content, {
-      collapseWhitespace: true,
-      minifyCSS: false,
-      caseSensitive: true,
-      removeEmptyAttributes: true,
-      ...minifyOptions,
-    })
+    content = await minifier
+      .process(content, {
+        collapseWhitespace: true,
+        minifyCSS: false,
+        removeEmptyAttributes: true,
+        ...minifyOptions,
+      })
+      .then((res) => res.html)
   }
 
   return {