@maizzle/framework 4.0.0-alpha.8 → 4.0.1

package/src/transformers/markdown.js

@@ -1,19 +1,19 @@
-const posthtml = require('posthtml')
-const {get, merge} = require('lodash')
-const markdown = require('posthtml-markdownit')
-
-module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'markdown') === false) {
-    return html
-  }
-
-  const userMarkdownOptions = direct ? config : get(config, 'markdown', {})
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-  const markdownOptions = merge({markdownit: {html: true}}, userMarkdownOptions)
-
-  return posthtml([
-    markdown({...markdownOptions})
-  ])
-    .process(html, posthtmlOptions)
-    .then(result => result.html)
-}
+const posthtml = require('posthtml')
+const {get, merge} = require('lodash')
+const markdown = require('posthtml-markdownit')
+
+module.exports = async (html, config = {}, direct = false) => {
+  if (get(config, 'markdown') === false) {
+    return html
+  }
+
+  const userMarkdownOptions = direct ? config : get(config, 'markdown', {})
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const markdownOptions = merge({markdownit: {html: true}}, userMarkdownOptions)
+
+  return posthtml([
+    markdown({...markdownOptions})
+  ])
+    .process(html, posthtmlOptions)
+    .then(result => result.html)
+}

package/src/transformers/minify.js

@@ -1,21 +1,21 @@
-const {crush} = require('html-crush')
-const {get, isEmpty} = require('lodash')
-
-module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'minify') === false) {
-    return html
-  }
-
-  config = direct ? {
-    lineLengthLimit: 500,
-    removeIndentations: true,
-    removeLineBreaks: true,
-    ...config
-  } : get(config, 'minify', {})
-
-  if (!isEmpty(config)) {
-    html = crush(html, {removeLineBreaks: true, ...config}).result
-  }
-
-  return html
-}
+const {crush} = require('html-crush')
+const {get, isEmpty} = require('lodash')
+
+module.exports = async (html, config = {}, direct = false) => {
+  if (get(config, 'minify') === false) {
+    return html
+  }
+
+  config = direct ? {
+    lineLengthLimit: 500,
+    removeIndentations: true,
+    removeLineBreaks: true,
+    ...config
+  } : get(config, 'minify', {})
+
+  if (!isEmpty(config)) {
+    html = crush(html, {removeLineBreaks: true, ...config}).result
+  }
+
+  return html
+}

package/src/transformers/plaintext.js

@@ -1,23 +1,23 @@
-const {get} = require('lodash')
-const posthtml = require('posthtml')
-
-module.exports = (html, config = {}) => {
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-  return posthtml([plaintext()]).process(html, {...posthtmlOptions, sync: true}).html
-}
-
-const plaintext = () => tree => {
-  const process = node => {
-    if (node.tag === 'plaintext') {
-      return {
-        tag: false,
-        content: ['']
-      }
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-}
+const {get} = require('lodash')
+const posthtml = require('posthtml')
+
+module.exports = (html, config = {}) => {
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+  return posthtml([plaintext()]).process(html, {...posthtmlOptions, sync: true}).html
+}
+
+const plaintext = () => tree => {
+  const process = node => {
+    if (node.tag === 'plaintext') {
+      return {
+        tag: false,
+        content: ['']
+      }
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+}

package/src/transformers/posthtmlMso.js

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

package/src/transformers/prettify.js

@@ -1,20 +1,27 @@
-const pretty = require('pretty')
-const {get, isEmpty} = require('lodash')
-
-module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'prettify') === false) {
-    return html
-  }
-
-  config = direct ? config : get(config, 'prettify', {})
-
-  if (typeof config === 'boolean' && config) {
-    return pretty(html)
-  }
-
-  if (!isEmpty(config)) {
-    return pretty(html, config)
-  }
-
-  return html
-}
+/* eslint-disable camelcase */
+const pretty = require('pretty')
+const {get, merge, isEmpty, isObject} = require('lodash')
+
+module.exports = async (html, config = {}, direct = false) => {
+  const defaultConfig = {
+    space_around_combinator: true, // Preserve space around CSS selector combinators
+    newline_between_rules: false, // Remove empty lines between CSS rules
+    indent_inner_html: false, // Helps reduce file size
+    extra_liners: [] // Don't add extra new line before any tag
+  }
+
+  config = direct ? config : get(config, 'prettify')
+
+  // Don't prettify if not explicitly enabled in config
+  if (!config || (isObject(config) && isEmpty(config))) {
+    return html
+  }
+
+  if (typeof config === 'boolean' && config) {
+    return pretty(html, defaultConfig)
+  }
+
+  config = merge(defaultConfig, config)
+
+  return pretty(html, config)
+}

package/src/transformers/preventWidows.js

@@ -1,13 +1,13 @@
-const {get} = require('lodash')
-const posthtml = require('posthtml')
-const preventWidows = require('prevent-widows')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-  if (direct) {
-    return preventWidows(html)
-  }
-
-  return posthtml([preventWidows.posthtml()]).process(html, posthtmlOptions).then(result => result.html)
-}
+const {get} = require('lodash')
+const posthtml = require('posthtml')
+const preventWidows = require('prevent-widows')
+
+module.exports = async (html, config = {}, direct = false) => {
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+  if (direct) {
+    return preventWidows(html)
+  }
+
+  return posthtml([preventWidows.posthtml()]).process(html, posthtmlOptions).then(result => result.html)
+}

package/src/transformers/removeAttributes.js

@@ -1,17 +1,17 @@
-const {get} = require('lodash')
-const posthtml = require('posthtml')
-const removeAttributes = require('posthtml-remove-attributes')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const attributes = direct ? (Array.isArray(config) ? [...config] : []) : get(config, 'removeAttributes', [])
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-  attributes.push({name: 'style'}, {name: 'class'})
-
-  // Allow omitting `value` key when removing empty attributes
-  attributes.forEach(attr => {
-    attr.value = attr.value || ''
-  })
-
-  return posthtml([removeAttributes(attributes)]).process(html, posthtmlOptions).then(result => result.html)
-}
+const {get} = require('lodash')
+const posthtml = require('posthtml')
+const removeAttributes = require('posthtml-remove-attributes')
+
+module.exports = async (html, config = {}, direct = false) => {
+  const attributes = direct ? (Array.isArray(config) ? [...config] : []) : get(config, 'removeAttributes', [])
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+  attributes.push({name: 'style'}, {name: 'class'})
+
+  // Allow omitting `value` key when removing empty attributes
+  attributes.forEach(attr => {
+    attr.value = attr.value || ''
+  })
+
+  return posthtml([removeAttributes(attributes)]).process(html, posthtmlOptions).then(result => result.html)
+}

package/src/transformers/removeInlineBackgroundColor.js

@@ -1,52 +1,52 @@
-const posthtml = require('posthtml')
-const {get, isEmpty} = require('lodash')
-const parseAttrs = require('posthtml-attrs-parser')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-  if (isEmpty(config)) {
-    return posthtml([removeInlineBGColor()]).process(html, posthtmlOptions).then(result => result.html)
-  }
-
-  if (get(config, 'inlineCSS.preferBgColorAttribute') === true) {
-    return posthtml([removeInlineBGColor()]).process(html, posthtmlOptions).then(result => result.html)
-  }
-
-  const tags = direct ? (Array.isArray(config) ? config : false) : get(config, 'inlineCSS.preferBgColorAttribute', false)
-
-  if (Array.isArray(tags)) {
-    return posthtml([removeInlineBGColor({tags})]).process(html, posthtmlOptions).then(result => result.html)
-  }
-
-  return html
-}
-
-const removeInlineBGColor = (options = {}) => tree => {
-  options.tags = options.tags || ['body', 'marquee', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr']
-
-  const process = node => {
-    if (!options.tags.includes(node.tag)) {
-      return node
-    }
-
-    const attrs = parseAttrs(node.attrs, {
-      rules: {
-        bgcolor: {
-          delimiter: /\s+/,
-          glue: ' '
-        }
-      }
-    })
-
-    if (attrs.style && attrs.style['background-color']) {
-      attrs.bgcolor = attrs.style['background-color']
-      delete attrs.style['background-color']
-      node.attrs = attrs.compose()
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-}
+const posthtml = require('posthtml')
+const {get, isEmpty} = require('lodash')
+const parseAttrs = require('posthtml-attrs-parser')
+
+module.exports = async (html, config = {}, direct = false) => {
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+  if (isEmpty(config)) {
+    return posthtml([removeInlineBGColor()]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  if (get(config, 'inlineCSS.preferBgColorAttribute') === true) {
+    return posthtml([removeInlineBGColor()]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  const tags = direct ? (Array.isArray(config) ? config : false) : get(config, 'inlineCSS.preferBgColorAttribute', false)
+
+  if (Array.isArray(tags)) {
+    return posthtml([removeInlineBGColor({tags})]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  return html
+}
+
+const removeInlineBGColor = (options = {}) => tree => {
+  options.tags = options.tags || ['body', 'marquee', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr']
+
+  const process = node => {
+    if (!options.tags.includes(node.tag)) {
+      return node
+    }
+
+    const attrs = parseAttrs(node.attrs, {
+      rules: {
+        bgcolor: {
+          delimiter: /\s+/,
+          glue: ' '
+        }
+      }
+    })
+
+    if (attrs.style && attrs.style['background-color']) {
+      attrs.bgcolor = attrs.style['background-color']
+      delete attrs.style['background-color']
+      node.attrs = attrs.compose()
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+}

package/src/transformers/removeInlineSizes.js

@@ -1,41 +1,41 @@
-const posthtml = require('posthtml')
-const {get, isEmpty} = require('lodash')
-const parseAttrs = require('posthtml-attrs-parser')
-
-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', {})
-    return posthtml([removeInlineSizes(settings)]).process(html, posthtmlOptions).then(result => result.html)
-  }
-
-  return html
-}
-
-const removeInlineSizes = (mappings = {}) => tree => {
-  const process = node => {
-    const attrs = parseAttrs(node.attrs)
-    const tag = node.tag ? node.tag.toUpperCase() : ''
-
-    Object.entries(mappings).forEach(([attribute, tags]) => {
-      tags = Object.values(tags)
-
-      if (!tags.includes(tag)) {
-        return node
-      }
-
-      tags.forEach(() => {
-        if (attrs.style) {
-          delete attrs.style[attribute]
-        }
-      })
-    })
-
-    node.attrs = attrs.compose()
-
-    return node
-  }
-
-  return tree.walk(process)
-}
+const posthtml = require('posthtml')
+const {get, isEmpty} = require('lodash')
+const parseAttrs = require('posthtml-attrs-parser')
+
+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', {})
+    return posthtml([removeInlineSizes(settings)]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  return html
+}
+
+const removeInlineSizes = (mappings = {}) => tree => {
+  const process = node => {
+    const attrs = parseAttrs(node.attrs)
+    const tag = node.tag ? node.tag.toUpperCase() : ''
+
+    Object.entries(mappings).forEach(([attribute, tags]) => {
+      tags = Object.values(tags)
+
+      if (!tags.includes(tag)) {
+        return node
+      }
+
+      tags.forEach(() => {
+        if (attrs.style) {
+          delete attrs.style[attribute]
+        }
+      })
+    })
+
+    node.attrs = attrs.compose()
+
+    return node
+  }
+
+  return tree.walk(process)
+}

package/src/transformers/removeInlinedSelectors.js

@@ -1,71 +1,70 @@
-const {get, has, remove} = require('lodash')
-const postcss = require('postcss')
-const posthtml = require('posthtml')
-const parseAttrs = require('posthtml-attrs-parser')
-const matchHelper = require('posthtml-match-helper')
-
-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 plugin = () => tree => {
-  const process = node => {
-    // For each style tag...
-    if (node.tag === 'style') {
-      const {root} = postcss().process(node.content)
-
-      root.walkRules(rule => {
-        // Skip media queries and such...
-        if (rule.parent.type === 'atrule') {
-          return
-        }
-
-        const {selector} = rule
-        const prop = get(rule.nodes[0], 'prop')
-
-        // If we find the selector in the HTML...
-        tree.match(matchHelper(selector), n => {
-          const parsedAttrs = parseAttrs(n.attrs)
-          const classAttr = get(parsedAttrs, 'class', [])
-          const styleAttr = get(parsedAttrs, 'style', {})
-
-          // If the class is in the style attribute (inlined), remove it
-          if (has(styleAttr, prop)) {
-            // Remove the class attribute
-            // console.log(styleAttr, prop, classAttr)
-            remove(classAttr, s => selector.includes(s))
-
-            // Remove the rule in the <style> tag
-            rule.remove()
-          }
-
-          /**
-           * Remove from <style> selectors that were used to create shorthand declarations
-           * like `margin: 0 0 0 16px` (transformed with mergeLonghand when inlining).
-           */
-          Object.keys(styleAttr).forEach(key => {
-            if (prop.includes(key)) {
-              rule.remove()
-              remove(classAttr, s => selector.includes(s))
-            }
-          })
-
-          n.attrs = parsedAttrs.compose()
-
-          return n
-        })
-      })
-
-      node.content = root.toString()
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-}
+const {get, has, remove} = require('lodash')
+const postcss = require('postcss')
+const posthtml = require('posthtml')
+const parseAttrs = require('posthtml-attrs-parser')
+const matchHelper = require('posthtml-match-helper')
+
+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 plugin = () => tree => {
+  const process = node => {
+    // For each style tag...
+    if (node.tag === 'style') {
+      const {root} = postcss().process(node.content)
+
+      root.walkRules(rule => {
+        // Skip media queries and such...
+        if (rule.parent.type === 'atrule') {
+          return
+        }
+
+        const {selector} = rule
+        const prop = get(rule.nodes[0], 'prop')
+
+        // If we find the selector in the HTML...
+        tree.match(matchHelper(selector), n => {
+          const parsedAttrs = parseAttrs(n.attrs)
+          const classAttr = get(parsedAttrs, 'class', [])
+          const styleAttr = get(parsedAttrs, 'style', {})
+
+          // If the class is in the style attribute (inlined), remove it
+          if (has(styleAttr, prop)) {
+            // Remove the class attribute
+            remove(classAttr, s => selector.includes(s))
+
+            // Remove the rule in the <style> tag
+            rule.remove()
+          }
+
+          /**
+           * Remove from <style> selectors that were used to create shorthand declarations
+           * like `margin: 0 0 0 16px` (transformed with mergeLonghand when inlining).
+           */
+          Object.keys(styleAttr).forEach(key => {
+            if (prop.includes(key)) {
+              rule.remove()
+              remove(classAttr, s => selector.includes(s))
+            }
+          })
+
+          n.attrs = parsedAttrs.compose()
+
+          return n
+        })
+      })
+
+      node.content = root.toString()
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+}