@maizzle/framework 4.2.1 → 4.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",
@@ -65,12 +65,11 @@
     "posthtml-modules": "^0.9.0",
     "posthtml-mso": "^1.0.4",
     "posthtml-postcss-merge-longhand": "^1.0.2",
-    "posthtml-remove-attributes": "^1.0.0",
     "posthtml-safe-class-names": "^1.0.8",
     "posthtml-url-parameters": "^1.0.4",
     "pretty": "^2.0.0",
-    "prevent-widows": "^1.0.2",
     "query-string": "^7.1.0",
+    "string-remove-widows": "^2.1.0",
     "string-strip-html": "^8.2.0",
     "tailwindcss": "^3.1.0"
   },

package/src/generators/plaintext.js

@@ -1,12 +1,44 @@
 const path = require('path')
-const {get} = require('lodash')
 const posthtml = require('posthtml')
+const {get, merge} = require('lodash')
 const {stripHtml} = require('string-strip-html')
+const defaultConfig = require('./posthtml/defaultConfig')
 
 const self = {
-  handleCustomTags: (html, config = {}) => {
+  removeCustomTags: (tag, html, config = {}) => {
     const posthtmlOptions = get(config, 'build.posthtml.options', {})
 
+    const posthtmlPlugin = () => tree => {
+      const process = node => {
+        if (!node.tag) {
+          return node
+        }
+
+        if (node.tag === tag) {
+          return {
+            tag: false,
+            content: ['']
+          }
+        }
+
+        if (Array.isArray(tag) && tag.includes(node.tag)) {
+          return {
+            tag: false,
+            content: ['']
+          }
+        }
+
+        return node
+      }
+
+      return tree.walk(process)
+    }
+
+    return posthtml([posthtmlPlugin()]).process(html, {...posthtmlOptions, sync: true}).html
+  },
+  handleCustomTags: (html, config = {}) => {
+    const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
+
     const posthtmlPlugin = () => tree => {
       const process = node => {
         if (node.tag === 'plaintext') {
@@ -31,16 +63,18 @@ const self = {
 
     return posthtml([posthtmlPlugin()]).process(html, {...posthtmlOptions, sync: true}).html
   },
-  generate: async (html, destination, config) => {
+  generate: async (html, destination, config = {}) => {
     const configDestinationPath = get(config, 'destination.path')
     const extension = get(config, 'destination.extension', 'txt')
 
-    const plaintext = stripHtml(html, {
+    const strippedHTML = self.removeCustomTags('not-plaintext', html, config)
+
+    const plaintext = stripHtml(strippedHTML, {
       dumpLinkHrefsNearby: {
         enabled: true
       },
-      stripTogetherWithTheirContents: ['script', 'style', 'xml', 'not-plaintext'],
-      ...get(config, 'options', {})
+      stripTogetherWithTheirContents: ['script', 'style', 'xml'],
+      ...config
     }).result
 
     html = self.handleCustomTags(html, config)

package/src/generators/posthtml/defaultConfig.js

@@ -0,0 +1,3 @@
+module.exports = {
+  recognizeNoValueAttribute: true
+}

package/src/generators/{posthtml.js → posthtml/index.js}

@@ -4,6 +4,7 @@ const {get, merge} = require('lodash')
 const fetch = require('posthtml-fetch')
 const layouts = require('posthtml-extend')
 const modules = require('posthtml-modules')
+const defaultConfig = require('./defaultConfig')
 const expressions = require('posthtml-expressions')
 
 module.exports = async (html, config) => {
@@ -14,7 +15,7 @@ module.exports = async (html, config) => {
   const modulesRoot = modulesOptions.root || './'
   const modulesFrom = modulesOptions.from || `${modulesRoot}/fake`
 
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
   const posthtmlPlugins = get(config, 'build.posthtml.plugins', [])
 
   const expressionsOptions = merge({strictMode: false}, get(config, 'build.posthtml.expressions', {}))

package/src/generators/tailwindcss.js

@@ -31,11 +31,19 @@ module.exports = {
     }
 
     // Merge user's Tailwind config on top of a 'base' config
+    const layoutsRoot = get(maizzleConfig, 'build.layouts.root')
+    const componentsRoot = get(maizzleConfig, 'build.components.root')
+
     const config = merge({
       important: true,
       content: {
         files: [
-          './src/**/*.*',
+          typeof layoutsRoot === 'string' && layoutsRoot ?
+            `${layoutsRoot}/**/*.html`.replace(/\/\//g, '/') :
+            './src/layouts/**/*.html',
+          typeof componentsRoot === 'string' && componentsRoot ?
+            `${componentsRoot}/**/*.html`.replace(/\/\//g, '/') :
+            './src/components/**/*.html',
           {raw: html, extension: 'html'}
         ]
       }
@@ -46,7 +54,6 @@ module.exports = {
       config.content = {
         files: [
           ...config.content,
-          './src/**/*.*',
           {raw: html, extension: 'html'}
         ]
       }

package/src/transformers/attributeToStyle.js

@@ -1,9 +1,10 @@
 const posthtml = require('posthtml')
 const parseAttrs = require('posthtml-attrs-parser')
-const {get, forEach, intersection, keys, isEmpty} = require('lodash')
+const defaultConfig = require('../generators/posthtml/defaultConfig')
+const {get, merge, forEach, intersection, keys, isEmpty} = require('lodash')
 
 module.exports = async (html, config = {}, direct = false) => {
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
   const attributes = get(config, 'inlineCSS.attributeToStyle', false)
 
   if (typeof attributes === 'boolean' && attributes) {

package/src/transformers/baseUrl.js

@@ -1,7 +1,33 @@
 const posthtml = require('posthtml')
 const isUrl = require('is-url-superb')
 const baseUrl = require('posthtml-base-url')
-const {get, isObject, isEmpty} = require('lodash')
+const {get, merge, isObject, isEmpty} = require('lodash')
+const defaultConfig = require('../generators/posthtml/defaultConfig')
+
+module.exports = async (html, config = {}, direct = false) => {
+  const url = direct ? config : get(config, 'baseURL')
+  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
+
+  // Handle `baseUrl` as a string
+  if (typeof url === 'string' && url.length > 0) {
+    html = rewriteVMLs(html, url)
+
+    return posthtml([
+      baseUrl({url, allTags: true, styleTag: true, inlineCss: true})
+    ])
+      .process(html, posthtmlOptions)
+      .then(result => result.html)
+  }
+
+  // Handle `baseUrl` as an object
+  if (isObject(url) && !isEmpty(url)) {
+    html = rewriteVMLs(html, url.url)
+
+    return posthtml([baseUrl(url)]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  return html
+}
 
 /**
  * VML backgrounds must be handled with regex because
@@ -42,28 +68,3 @@ const rewriteVMLs = (html, url) => {
 
   return html
 }
-
-module.exports = async (html, config = {}, direct = false) => {
-  const url = direct ? config : get(config, 'baseURL')
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-  // Handle `baseUrl` as a string
-  if (typeof url === 'string' && url.length > 0) {
-    html = rewriteVMLs(html, url)
-
-    return posthtml([
-      baseUrl({url, allTags: true, styleTag: true, inlineCss: true})
-    ])
-      .process(html, posthtmlOptions)
-      .then(result => result.html)
-  }
-
-  // Handle `baseUrl` as an object
-  if (isObject(url) && !isEmpty(url)) {
-    html = rewriteVMLs(html, url.url)
-
-    return posthtml([baseUrl(url)]).process(html, posthtmlOptions).then(result => result.html)
-  }
-
-  return html
-}

package/src/transformers/extraAttributes.js

@@ -1,13 +1,14 @@
 const posthtml = require('posthtml')
-const {get, isObject} = require('lodash')
+const {get, merge, isObject} = require('lodash')
 const addAttributes = require('posthtml-extra-attributes')
+const defaultConfig = require('../generators/posthtml/defaultConfig')
 
 module.exports = async (html, config = {}, direct = false) => {
   if (get(config, 'extraAttributes') === false) {
     return html
   }
 
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
 
   let attributes = {
     table: {

package/src/transformers/filters/index.js

@@ -5,13 +5,14 @@ const PostCSS = require('../../generators/postcss')
 const posthtmlContent = require('posthtml-content')
 const Tailwind = require('../../generators/tailwindcss')
 const safeClassNames = require('posthtml-safe-class-names')
+const defaultConfig = require('../../generators/posthtml/defaultConfig')
 
 module.exports = async (html, config = {}, direct = false) => {
   const filters = direct ?
     merge(defaultFilters, config) :
     merge(defaultFilters, get(config, 'filters', {}))
 
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
 
   /**
    * Compile CSS in <style {post|tailwind}css> tags
@@ -22,11 +23,21 @@ module.exports = async (html, config = {}, direct = false) => {
   filters.postcss = css => PostCSS.process(css, maizzleConfig)
   filters.tailwindcss = css => Tailwind.compile(css, html, tailwindConfig, maizzleConfig)
 
-  return posthtml([
+  const posthtmlPlugins = [
     styleDataEmbed(),
-    posthtmlContent(filters),
-    safeClassNames()
-  ])
+    posthtmlContent(filters)
+  ]
+
+  if (get(config, 'safeClassNames') !== false) {
+    posthtmlPlugins.push(safeClassNames({
+      replacements: {
+        '{': '{',
+        '}': '}'
+      }
+    }))
+  }
+
+  return posthtml(posthtmlPlugins)
     .process(html, posthtmlOptions)
     .then(result => result.html)
 }

package/src/transformers/index.js

@@ -49,10 +49,10 @@ exports.prettify = (html, config) => prettify(html, config, true)
 exports.ensureSixHEX = (html, config) => ensureSixHEX(html, config)
 exports.withFilters = (html, config) => filters(html, config, true)
 exports.addURLParams = (html, config) => addURLParams(html, config, true)
-exports.preventWidows = (html, config) => preventWidows(html, config, true)
+exports.preventWidows = (html, config) => preventWidows(html, config)
 exports.replaceStrings = (html, config) => replaceStrings(html, config, true)
 exports.safeClassNames = (html, config) => safeClassNames(html, config, true)
-exports.removeUnusedCSS = (html, config) => removeUnusedCSS(html, config, true)
+exports.removeUnusedCSS = (html, config) => removeUnusedCSS(html, config)
 exports.removeAttributes = (html, config) => removeAttributes(html, config, true)
 exports.attributeToStyle = (html, config) => attributeToStyle(html, config, true)
 exports.removeInlineSizes = (html, config) => removeInlineSizes(html, config, true)

package/src/transformers/markdown.js

@@ -1,6 +1,7 @@
 const posthtml = require('posthtml')
 const {get, merge} = require('lodash')
 const markdown = require('posthtml-markdownit')
+const defaultConfig = require('../generators/posthtml/defaultConfig')
 
 module.exports = async (html, config = {}, direct = false) => {
   if (get(config, 'markdown') === false) {
@@ -8,7 +9,7 @@ module.exports = async (html, config = {}, direct = false) => {
   }
 
   const userMarkdownOptions = direct ? config : get(config, 'markdown', {})
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
   const markdownOptions = merge({markdownit: {html: true}}, userMarkdownOptions)
 
   return posthtml([

package/src/transformers/posthtmlMso.js

@@ -1,10 +1,11 @@
-const {get} = require('lodash')
 const posthtml = require('posthtml')
+const {get, merge} = require('lodash')
 const outlook = require('posthtml-mso')
+const defaultConfig = require('../generators/posthtml/defaultConfig')
 
 module.exports = async (html, config) => {
   const outlookOptions = get(config, 'build.posthtml.outlook', {})
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
 
   return posthtml([outlook({...outlookOptions})]).process(html, posthtmlOptions).then(result => result.html)
 }

package/src/transformers/preventWidows.js

@@ -1,13 +1,81 @@
-const {get} = require('lodash')
 const posthtml = require('posthtml')
-const preventWidows = require('prevent-widows')
+const {get, merge, isEmpty} = require('lodash')
+const {removeWidows} = require('string-remove-widows')
+const defaultConfig = require('../generators/posthtml/defaultConfig')
 
-module.exports = async (html, config = {}, direct = false) => {
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+module.exports = async (html, config = {}) => {
+  if (isEmpty(config)) {
+    return removeWidows(html).res
+  }
+
+  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
+
+  return posthtml([removeWidowsPlugin(config)]).process(html, posthtmlOptions).then(result => result.html)
+}
+
+const removeWidowsPlugin = options => tree => {
+  const {attrName = 'prevent-widows', ...removeWidowsOptions} = get(options, 'widowWords', options)
+
+  removeWidowsOptions.minWordCount = removeWidowsOptions.minWordCount || 3
+
+  // Ignore defaults
+  const mappings = [
+    // Jinja-like
+    {
+      heads: '{{',
+      tails: '}}'
+    },
+    {
+      heads: ['{% if', '{%- if'],
+      tails: ['{% endif', '{%- endif']
+    },
+    {
+      heads: ['{% for', '{%- for'],
+      tails: ['{% endfor', '{%- endfor']
+    },
+    {
+      heads: ['{%', '{%-'],
+      tails: ['%}', '-%}']
+    },
+    {
+      heads: '{#',
+      tails: '#}'
+    },
+    // ASP/Hexo-like
+    {
+      heads: ['<%', '<%=', '<%-'],
+      tails: ['%>', '=%>', '-%>']
+    },
+    // MSO comments
+    {
+      heads: '<!--[',
+      tails: ']>'
+    },
+    // <![endif]-->
+    {
+      heads: '<![',
+      tails: ']--><'
+    }
+  ]
+
+  if (Array.isArray(removeWidowsOptions.ignore)) {
+    removeWidowsOptions.ignore.forEach(pair => mappings.push(pair))
+  }
+
+  if (typeof removeWidowsOptions.ignore !== 'string') {
+    removeWidowsOptions.ignore = mappings
+  }
+
+  const process = node => {
+    if (node.attrs && Object.keys(node.attrs).includes(attrName)) {
+      const widowsRemovedString = removeWidows(tree.render(node.content), removeWidowsOptions).res
+
+      node.content = tree.render(tree.parser(widowsRemovedString))
+      node.attrs[attrName] = false
+    }
 
-  if (direct) {
-    return preventWidows(html)
+    return node
   }
 
-  return posthtml([preventWidows.posthtml()]).process(html, posthtmlOptions).then(result => result.html)
+  return tree.walk(process)
 }

package/src/transformers/removeAttributes.js

@@ -1,17 +1,56 @@
-const {get} = require('lodash')
 const posthtml = require('posthtml')
-const removeAttributes = require('posthtml-remove-attributes')
+const {get, merge} = require('lodash')
+const defaultConfig = require('../generators/posthtml/defaultConfig')
 
 module.exports = async (html, config = {}, direct = false) => {
   const attributes = direct ? (Array.isArray(config) ? [...config] : []) : get(config, 'removeAttributes', [])
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
 
-  attributes.push({name: 'style'}, {name: 'class'})
+  attributes.push('style', 'class')
 
-  // Allow omitting `value` key when removing empty attributes
-  attributes.forEach(attr => {
-    attr.value = attr.value || ''
-  })
+  html = await posthtml([
+    removeAttributes(attributes, posthtmlOptions)
+  ]).process(html, posthtmlOptions).then(result => result.html)
 
-  return posthtml([removeAttributes(attributes)]).process(html, posthtmlOptions).then(result => result.html)
+  return html
+}
+
+/**
+ * Remove empty attributes with PostHTML
+ *
+ * Condition 1:
+ * `boolean` is for attributes without ="" (respects `recognizeNoValueAttribute` in PostHTML)
+ * `''` if the attribute included ="", i.e. style=""
+ *
+ * Condition 2: attribute value is a string and matches the one on the node
+ *
+ * Condition 3: same as 2, but for regular expressions
+ */
+const removeAttributes = (attributes = {}, posthtmlOptions = {}) => tree => {
+  const process = node => {
+    const normalizedAttrs = attributes.map(attribute => {
+      return {
+        name: get(attribute, 'name', typeof attribute === 'string' ? attribute : false),
+        value: get(attribute, 'value', get(posthtmlOptions, 'recognizeNoValueAttributes', true))
+      }
+    })
+
+    if (node.attrs) {
+      normalizedAttrs.forEach(attr => {
+        const targetAttrValue = get(node.attrs, attr.name)
+
+        if (
+          typeof targetAttrValue === 'boolean' || targetAttrValue === '' ||
+          (typeof attr.value === 'string' && node.attrs[attr.name] === attr.value) ||
+          (attr.value instanceof RegExp && attr.value.test(node.attrs[attr.name]))
+        ) {
+          node.attrs[attr.name] = false
+        }
+      })
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
 }

package/src/transformers/removeInlineBackgroundColor.js

@@ -1,9 +1,11 @@
 const posthtml = require('posthtml')
-const {get, isEmpty} = require('lodash')
+const {get, merge, isEmpty} = require('lodash')
 const parseAttrs = require('posthtml-attrs-parser')
+const {toStyleString} = require('../utils/helpers')
+const defaultConfig = require('../generators/posthtml/defaultConfig')
 
 module.exports = async (html, config = {}, direct = false) => {
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
 
   if (isEmpty(config)) {
     return posthtml([removeInlineBGColor()]).process(html, posthtmlOptions).then(result => result.html)
@@ -40,9 +42,11 @@ const removeInlineBGColor = (options = {}) => tree => {
     })
 
     if (attrs.style && attrs.style['background-color']) {
-      attrs.bgcolor = attrs.style['background-color']
+      node.attrs.bgcolor = attrs.style['background-color']
+
       delete attrs.style['background-color']
-      node.attrs = attrs.compose()
+
+      node.attrs.style = toStyleString(attrs.style)
     }
 
     return node

package/src/transformers/removeInlineSizes.js

@@ -1,12 +1,15 @@
 const posthtml = require('posthtml')
-const {get, isEmpty} = require('lodash')
+const {get, merge, isEmpty} = require('lodash')
 const parseAttrs = require('posthtml-attrs-parser')
+const {toStyleString} = require('../utils/helpers')
+const defaultConfig = require('../generators/posthtml/defaultConfig')
 
 module.exports = async (html, config = {}, direct = false) => {
   const settings = direct ? config : get(config, 'inlineCSS.keepOnlyAttributeSizes', {})
 
   if (!isEmpty(settings)) {
-    const posthtmlOptions = get(config, 'build.posthtml.options', {})
+    const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
+
     return posthtml([removeInlineSizes(settings)]).process(html, posthtmlOptions).then(result => result.html)
   }
 
@@ -26,14 +29,14 @@ const removeInlineSizes = (mappings = {}) => tree => {
       }
 
       tags.forEach(() => {
-        if (attrs.style) {
+        if (get(node, 'attrs.style')) {
           delete attrs.style[attribute]
+
+          node.attrs.style = toStyleString(attrs.style)
         }
       })
     })
 
-    node.attrs = attrs.compose()
-
     return node
   }
 

package/src/transformers/removeInlinedSelectors.js

@@ -1,19 +1,21 @@
-const {get, has, remove} = require('lodash')
 const postcss = require('postcss')
 const posthtml = require('posthtml')
+const {get, merge, has, remove} = require('lodash')
 const parseAttrs = require('posthtml-attrs-parser')
 const matchHelper = require('posthtml-match-helper')
+const defaultConfig = require('../generators/posthtml/defaultConfig')
 
 module.exports = async (html, config = {}) => {
   if (get(config, 'removeInlinedClasses') === false) {
     return html
   }
 
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-  return posthtml([plugin()]).process(html, posthtmlOptions).then(result => result.html)
+  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
+
+  return posthtml([plugin(posthtmlOptions)]).process(html, posthtmlOptions).then(result => result.html)
 }
 
-const plugin = () => tree => {
+const plugin = posthtmlOptions => tree => {
   const process = node => {
     // For each style tag...
     if (node.tag === 'style') {
@@ -57,12 +59,24 @@ const plugin = () => tree => {
 
             n.attrs = parsedAttrs.compose()
 
+            // Fix issue with .compose() automatically quoting attributes with no values
+            Object.entries(n.attrs).forEach(([name, value]) => {
+              if (value === '' && get(posthtmlOptions, 'recognizeNoValueAttribute') === true) {
+                n.attrs[name] = true
+              }
+            })
+
             return n
           })
         } catch {}
       })
 
-      node.content = root.toString()
+      node.content = root.toString().trim()
+
+      // Remove <style> tag if it ends up empty after processing
+      if (node.content.length === 0) {
+        node.tag = false
+      }
     }
 
     return node

package/src/transformers/removeUnusedCss.js

@@ -1,13 +1,11 @@
 const {comb} = require('email-comb')
-const {get, isEmpty} = require('lodash')
+const {get, merge} = require('lodash')
 
-module.exports = async (html, config = {}, direct = false) => {
+module.exports = async (html, config = {}) => {
   if (get(config, 'removeUnusedCSS') === false) {
     return html
   }
 
-  const options = direct ? config : get(config, 'removeUnusedCSS', {})
-
   const safelist = [
     '*body*', // Gmail
     '.gmail*', // Gmail
@@ -26,15 +24,17 @@ module.exports = async (html, config = {}, direct = false) => {
     '.lang*' // Fenced code blocks
   ]
 
-  if (typeof options === 'boolean' && options) {
-    return comb(html, {whitelist: safelist}).result
+  const defaultOptions = {
+    backend: [
+      {heads: '{{', tails: '}}'},
+      {heads: '{%', tails: '%}'}
+    ],
+    whitelist: [...get(config, 'whitelist', []), ...safelist]
   }
 
-  if (!isEmpty(options)) {
-    options.whitelist = [...get(options, 'whitelist', []), ...safelist]
-
-    return comb(html, options).result
-  }
+  const options = typeof config === 'boolean' && config ?
+    defaultOptions :
+    merge(defaultOptions, get(config, 'removeUnusedCSS', config))
 
-  return html
+  return comb(html, options).result
 }

package/src/transformers/replaceStrings.js

@@ -1,4 +1,4 @@
-const {isEmpty, get} = require('lodash')
+const {get, isEmpty} = require('lodash')
 
 module.exports = async (html, config = {}, direct = false) => {
   const replacements = direct ? config : get(config, 'replaceStrings', {})