[EXPERIMENTAL] Replace prettier

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 in 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-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 = []
 
@@ -148,8 +147,6 @@ export default function mjml2html(mjml, options = {}) {
     })
   }
 
-  mjml = handleMjml3(mjml, { noMigrateWarn })
-
   const globalData = {
     backgroundColor: '',
     beforeDoctype: '',
@@ -397,31 +394,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 {