[CHORE] Long overdue dep update

package.json

@@ -24,11 +24,11 @@
     "babel-plugin-lodash": "^3.3.4",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.1.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.21.1",
     "lerna": "^3.22.1",
     "open": "^7.3.0",
-    "prettier": "^2.0.5",
+    "prettier": "^3.2.4",
     "rimraf": "^3.0.2"
   }
 }

packages/mjml-accordion/src/Accordion.js

@@ -92,8 +92,8 @@ export default class MjAccordion extends BodyComponent {
     return `
       <table
         ${this.htmlAttributes({
-          'cellspacing': '0',
-          'cellpadding': '0',
+          cellspacing: '0',
+          cellpadding: '0',
           class: 'mj-accordion',
           style: 'table',
         })}

packages/mjml-accordion/src/AccordionText.js

@@ -71,8 +71,8 @@ export default class MjAccordionText extends BodyComponent {
       >
         <table
           ${this.htmlAttributes({
-            'cellspacing': '0',
-            'cellpadding': '0',
+            cellspacing: '0',
+            cellpadding: '0',
             style: 'table',
           })}
         >

packages/mjml-accordion/src/AccordionTitle.js

@@ -100,17 +100,18 @@ export default class MjAccordionTitle extends BodyComponent {
 
   render() {
     const contentElements = [this.renderTitle(), this.renderIcons()]
-    const content = (this.getAttribute('icon-position') === 'right'
-      ? contentElements
-      : contentElements.reverse()
+    const content = (
+      this.getAttribute('icon-position') === 'right'
+        ? contentElements
+        : contentElements.reverse()
     ).join('\n')
 
     return `
       <div ${this.htmlAttributes({ class: 'mj-accordion-title' })}>
         <table
           ${this.htmlAttributes({
-            'cellspacing': '0',
-            'cellpadding': '0',
+            cellspacing: '0',
+            cellpadding: '0',
             style: 'table',
           })}
         >

packages/mjml-carousel/src/Carousel.js

@@ -186,9 +186,9 @@ export default class MjCarousel extends BodyComponent {
           }
 
           .mj-carousel-${carouselId}-radio-1:checked ${repeat(
-      '+ *',
-      length - 1,
-    )}+ .mj-carousel-content .mj-carousel-${carouselId}-thumbnail-1 {
+            '+ *',
+            length - 1,
+          )}+ .mj-carousel-content .mj-carousel-${carouselId}-thumbnail-1 {
               border-color: transparent;
           }
       }
@@ -344,8 +344,8 @@ export default class MjCarousel extends BodyComponent {
         ${this.htmlAttributes({
           style: 'carousel.table',
           border: '0',
-          'cellpadding': '0',
-          'cellspacing': '0',
+          cellpadding: '0',
+          cellspacing: '0',
           width: '100%',
           role: 'presentation',
           class: 'mj-carousel-main',

packages/mjml-carousel/src/CarouselImage.js

@@ -142,7 +142,7 @@ export default class MjCarouselImage extends BodyComponent {
       >
         ${
           href
-            ? `<a ${this.htmlAttributes({ href, rel, target: "_blank" })}>${image}</a>`
+            ? `<a ${this.htmlAttributes({ href, rel, target: '_blank' })}>${image}</a>`
             : image
         }
       </div>

packages/mjml-cli/package.json

@@ -27,15 +27,15 @@
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "chokidar": "^3.0.0",
-    "glob": "^7.1.1",
+    "glob": "^10.3.10",
     "html-minifier": "^4.0.0",
     "js-beautify": "^1.6.14",
     "lodash": "^4.17.21",
     "mjml-core": "4.14.1",
     "mjml-migrate": "4.14.1",
     "mjml-parser-xml": "4.14.1",
     "mjml-validator": "4.13.0",
-    "yargs": "^16.1.0"
+    "yargs": "^17.7.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

packages/mjml-cli/src/client.js

@@ -322,7 +322,11 @@ export default async () => {
     }
     case 's': {
       const addFileHeaderComment = !argv.noStdoutFileComment
-      Promise.all(convertedStream.map(converted => outputToConsole(converted, addFileHeaderComment)))
+      Promise.all(
+        convertedStream.map((converted) =>
+          outputToConsole(converted, addFileHeaderComment),
+        ),
+      )
         .then(() => (process.exitCode = EXIT_CODE)) // eslint-disable-line no-return-assign
         .catch(() => (process.exitCode = 1)) // eslint-disable-line no-return-assign
       break

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

@@ -1,7 +1,7 @@
 export default ({ compiled: { html }, file }, addFileHeaderComment) =>
   new Promise((resolve) => {
     let output = ''
-    if(addFileHeaderComment) {
+    if (addFileHeaderComment) {
       output = `<!-- FILE: ${file} -->\n`
     }
     output += `${html}\n`

packages/mjml-cli/src/helpers/fileContext.js

@@ -1,11 +1,12 @@
 import fs from 'fs'
 import path from 'path'
 
-const includeRegexp = /<mj-include[^<>]+path=['"](.*(?:\.mjml|\.css|\.html))['"]\s*[^<>]*(\/>|>\s*<\/mj-include>)/gi
+const includeRegexp =
+  /<mj-include[^<>]+path=['"](.*(?:\.mjml|\.css|\.html))['"]\s*[^<>]*(\/>|>\s*<\/mj-include>)/gi
 
-const ensureIncludeIsSupportedFile = (file) => 
+const ensureIncludeIsSupportedFile = (file) =>
   path.extname(file).match(/\.mjml|\.css|\.html/) ? file : `${file}.mjml`
-  
+
 const error = (e) => console.error(e.stack || e) // eslint-disable-line no-console
 
 export default (baseFile, filePath) => {

packages/mjml-column/src/index.js

@@ -138,7 +138,7 @@ export default class MjColumn extends BodyComponent {
         return width
       case 'px':
       default:
-        return `${parsedWidth / parseInt(containerWidth, 10) * 100}%`
+        return `${(parsedWidth / parseInt(containerWidth, 10)) * 100}%`
     }
   }
 
@@ -267,9 +267,8 @@ export default class MjColumn extends BodyComponent {
                       padding: component.getAttribute('padding'),
                       'padding-top': component.getAttribute('padding-top'),
                       'padding-right': component.getAttribute('padding-right'),
-                      'padding-bottom': component.getAttribute(
-                        'padding-bottom',
-                      ),
+                      'padding-bottom':
+                        component.getAttribute('padding-bottom'),
                       'padding-left': component.getAttribute('padding-left'),
                       'word-break': 'break-word',
                     },

packages/mjml-core/package.json

@@ -27,7 +27,7 @@
     "detect-node": "^2.0.4",
     "html-minifier": "^4.0.0",
     "js-beautify": "^1.6.14",
-    "juice": "^9.0.0",
+    "juice": "^10.0.0",
     "lodash": "^4.17.21",
     "mjml-migrate": "4.14.1",
     "mjml-parser-xml": "4.14.1",

packages/mjml-core/src/createComponent.js

@@ -99,7 +99,7 @@ class Component {
         ignoreIncludes: true,
       })
       return partialMjml.children
-        .map(child => this.context.processing(child, this.context))
+        .map((child) => this.context.processing(child, this.context))
         .join('')
     }
 
@@ -158,7 +158,7 @@ export class BodyComponent extends Component {
 
   htmlAttributes(attributes) {
     const specialAttributes = {
-      style: v => this.styles(v),
+      style: (v) => this.styles(v),
       default: identity,
     }
 
@@ -199,28 +199,30 @@ export class BodyComponent extends Component {
   renderChildren(children, options = {}) {
     const {
       props = {},
-      renderer = component => component.render(),
+      renderer = (component) => component.render(),
       attributes = {},
       rawXML = false,
     } = options
 
     children = children || this.props.children
 
     if (rawXML) {
-      return children.map(child => jsonToXML(child)).join('\n')
+      return children.map((child) => jsonToXML(child)).join('\n')
     }
 
     const sibling = children.length
 
-    const rawComponents = filter(this.context.components, c => c.isRawElement())
+    const rawComponents = filter(this.context.components, (c) =>
+      c.isRawElement(),
+    )
     const nonRawSiblings = children.filter(
-      child => !find(rawComponents, c => c.getTagName() === child.tagName),
+      (child) => !find(rawComponents, (c) => c.getTagName() === child.tagName),
     ).length
 
     let output = ''
     let index = 0
 
-    forEach(children, children => {
+    forEach(children, (children) => {
       const component = initComponent({
         name: children.tagName,
         initialDatas: {
@@ -260,7 +262,7 @@ export class HeadComponent extends Component {
   handlerChildren() {
     const { children } = this.props
 
-    return children.map(children => {
+    return children.map((children) => {
       const component = initComponent({
         name: children.tagName,
         initialDatas: {

packages/mjml-core/src/helpers/mediaQueries.js

@@ -1,15 +1,16 @@
 import { map, isEmpty } from 'lodash'
 
 // eslint-disable-next-line import/prefer-default-export
-export default function buildMediaQueriesTags(breakpoint, mediaQueries = {}, options = {}) {
+export default function buildMediaQueriesTags(
+  breakpoint,
+  mediaQueries = {},
+  options = {},
+) {
   if (isEmpty(mediaQueries)) {
     return ''
   }
 
-  const { 
-    forceOWADesktop = false, 
-    printerSupport = false,
-  } = options
+  const { forceOWADesktop = false, printerSupport = false } = options
 
   const baseMediaQueries = map(
     mediaQueries,
@@ -31,7 +32,7 @@ export default function buildMediaQueriesTags(breakpoint, mediaQueries = {}, opt
       ${thunderbirdMediaQueries.join('\n')}
     </style>
     ${
-      printerSupport 
+      printerSupport
         ? `<style type="text/css">
             @media only print {
               ${baseMediaQueries.join('\n')}

packages/mjml-core/src/helpers/mjmlconfig.js

@@ -8,22 +8,21 @@ export function readMjmlConfig(configPathOrDir = process.cwd()) {
   let componentRootPath = process.cwd()
   let mjmlConfigPath = configPathOrDir
   try {
-    mjmlConfigPath =
-      path.basename(configPathOrDir).match(/^\.mjmlconfig(\.js)?$/)
-        ? path.resolve(configPathOrDir)
-        : path.resolve(configPathOrDir, '.mjmlconfig')
+    mjmlConfigPath = path
+      .basename(configPathOrDir)
+      .match(/^\.mjmlconfig(\.js)?$/)
+      ? path.resolve(configPathOrDir)
+      : path.resolve(configPathOrDir, '.mjmlconfig')
     componentRootPath = path.dirname(mjmlConfigPath)
-    
+
     const fullPath = path.resolve(mjmlConfigPath)
 
     let mjmlConfig
     if (path.extname(mjmlConfigPath) === '.js') {
       delete require.cache[fullPath]
       mjmlConfig = require(fullPath) // eslint-disable-line global-require, import/no-dynamic-require
     } else {
-      mjmlConfig = JSON.parse(
-        fs.readFileSync(fullPath, 'utf8'),
-      )
+      mjmlConfig = JSON.parse(fs.readFileSync(fullPath, 'utf8'))
     }
 
     return { mjmlConfig, componentRootPath }

packages/mjml-core/src/helpers/shorthandParser.js

@@ -1,7 +1,7 @@
 import { get } from 'lodash'
 
 export default function (cssValue, direction) {
-  const splittedCssValue = cssValue.trim().replace(/\s+/g,' ').split(' ', 4)
+  const splittedCssValue = cssValue.trim().replace(/\s+/g, ' ').split(' ', 4)
   let directions = {}
 
   switch (splittedCssValue.length) {

packages/mjml-core/src/index.js

@@ -58,9 +58,11 @@ export default function mjml2html(mjml, options = {}) {
   if (isNode && typeof options.skeleton === 'string') {
     /* eslint-disable global-require */
     /* eslint-disable import/no-dynamic-require */
-    options.skeleton = require(options.skeleton.charAt(0) === '.'
-      ? path.resolve(process.cwd(), options.skeleton)
-      : options.skeleton)
+    options.skeleton = require(
+      options.skeleton.charAt(0) === '.'
+        ? path.resolve(process.cwd(), options.skeleton)
+        : options.skeleton,
+    )
     /* eslint-enable global-require */
     /* eslint-enable import/no-dynamic-require */
   }
@@ -186,7 +188,7 @@ export default function mjml2html(mjml, options = {}) {
       if (errors.length > 0) {
         throw new ValidationError(
           `ValidationError: \n ${errors
-            .map(e => e.formattedMessage)
+            .map((e) => e.formattedMessage)
             .join('\n')}`,
           errors,
         )
@@ -227,7 +229,7 @@ export default function mjml2html(mjml, options = {}) {
     }
   }
 
-  const applyAttributes = mjml => {
+  const applyAttributes = (mjml) => {
     const parse = (mjml, parentMjClass = '') => {
       const { attributes, tagName, children } = mjml
       const classes = get(mjml.attributes, 'mj-class', '').split(' ')
@@ -272,7 +274,7 @@ export default function mjml2html(mjml, options = {}) {
         globalAttributes: {
           ...globalData.defaultAttributes['mj-all'],
         },
-        children: map(children, mjml => parse(mjml, nextParentMjClass)),
+        children: map(children, (mjml) => parse(mjml, nextParentMjClass)),
       }
     }
 
@@ -283,17 +285,16 @@ export default function mjml2html(mjml, options = {}) {
     components,
     globalData,
     addMediaQuery(className, { parsedWidth, unit }) {
-      globalData.mediaQueries[
-        className
-      ] = `{ width:${parsedWidth}${unit} !important; max-width: ${parsedWidth}${unit}; }`
+      globalData.mediaQueries[className] =
+        `{ width:${parsedWidth}${unit} !important; max-width: ${parsedWidth}${unit}; }`
     },
     addHeadStyle(identifier, headStyle) {
       globalData.headStyle[identifier] = headStyle
     },
     addComponentHeadSyle(headStyle) {
       globalData.componentsHeadStyle.push(headStyle)
     },
-    setBackgroundColor: color => {
+    setBackgroundColor: (color) => {
       globalData.backgroundColor = color
     },
     processing: (node, context) => processing(node, context, applyAttributes),
@@ -344,12 +345,12 @@ export default function mjml2html(mjml, options = {}) {
 
   if (mjOutsideRaws.length) {
     const toAddBeforeDoctype = mjOutsideRaws.filter(
-      elt =>
+      (elt) =>
         elt.attributes.position && elt.attributes.position === 'file-start',
     )
     if (toAddBeforeDoctype.length) {
       globalData.beforeDoctype = toAddBeforeDoctype
-        .map(elt => elt.content)
+        .map((elt) => elt.content)
         .join('\n')
     }
   }