@maizzle/framework 4.0.0-alpha.7 → 4.0.0

package/src/transformers/filters/defaultFilters.js

@@ -0,0 +1,126 @@
+const escapeMap = {
+  '&': '&',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&#34;',
+  '\'': '&#39;'
+}
+
+const unescapeMap = {
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&#34;': '"',
+  '&#39;': '\''
+}
+
+const unescape = string => string.replace(/&(amp|lt|gt|#34|#39);/g, m => unescapeMap[m])
+
+const append = (content, attribute) => content + attribute
+const capitalize = content => content.charAt(0).toUpperCase() + content.slice(1)
+const ceil = content => Math.ceil(Number.parseFloat(content))
+const divide = (content, attribute) => Number.parseFloat(content) / Number.parseFloat(attribute)
+const escape = content => content.replace(/["&'<>]/g, m => escapeMap[m])
+const escapeOnce = content => escape(unescape(content))
+const floor = content => Math.floor(Number.parseFloat(content))
+const lowercase = content => content.toLowerCase()
+const lstrip = content => content.replace(/^\s+/, '')
+const minus = (content, attribute) => Number.parseFloat(content) - Number.parseFloat(attribute)
+const modulo = (content, attribute) => Number.parseFloat(content) % Number.parseFloat(attribute)
+const multiply = (content, attribute) => Number.parseFloat(content) * Number.parseFloat(attribute)
+const newlineToBr = content => content.replace(/\n/g, '<br>')
+const plus = (content, attribute) => Number.parseFloat(content) + Number.parseFloat(attribute)
+const prepend = (content, attribute) => attribute + content
+
+const remove = (content, attribute) => {
+  const regex = new RegExp(attribute, 'g')
+  return content.replace(regex, '')
+}
+
+const removeFirst = (content, attribute) => content.replace(attribute, '')
+const replace = (content, attribute) => {
+  const [search, replace] = attribute.split('|')
+  const regex = new RegExp(search, 'g')
+  return content.replace(regex, replace)
+}
+
+const replaceFirst = (content, attribute) => {
+  const [search, replace] = attribute.split('|')
+  return content.replace(search, replace)
+}
+
+const round = content => Math.round(Number.parseFloat(content))
+const rstrip = content => content.replace(/\s+$/, '')
+const uppercase = content => content.toUpperCase()
+const size = content => content.length
+const slice = (content, attribute) => {
+  try {
+    const [start, end] = attribute.split(',')
+    return content.slice(start, end)
+  } catch {
+    return content.slice(attribute)
+  }
+}
+
+const stripNewlines = content => content.replace(/\n/g, '')
+const trim = content => content.trim()
+const truncate = (content, attribute) => {
+  try {
+    const [length, omission] = attribute.split(',')
+    return content.length > Number.parseInt(length, 10) ?
+      content.slice(0, length) + (omission || '...') :
+      content
+  } catch {
+    const length = Number.parseInt(attribute, 10)
+    return content.length > length ? content.slice(0, length) + '...' : content
+  }
+}
+
+const truncateWords = (content, attribute) => {
+  try {
+    const [length, omission] = attribute.split(',')
+    return content.split(' ').slice(0, Number.parseInt(length, 10)).join(' ') + (omission || '...')
+  } catch {
+    const length = Number.parseInt(attribute, 10)
+    return content.split(' ').slice(0, length).join(' ') + '...'
+  }
+}
+
+// eslint-disable-next-line
+const urlDecode = content => content.split('+').map(decodeURIComponent).join(' ')
+// eslint-disable-next-line
+const urlEncode = content => content.split(' ').map(encodeURIComponent).join('+')
+
+exports.append = append
+exports.capitalize = capitalize
+exports.ceil = ceil
+exports['divide-by'] = divide
+exports.divide = divide
+exports.escape = escape
+exports['escape-once'] = escapeOnce
+exports.floor = floor
+exports.lowercase = lowercase
+exports.lstrip = lstrip
+exports.minus = minus
+exports.modulo = modulo
+exports.multiply = multiply
+exports['newline-to-br'] = newlineToBr
+exports.plus = plus
+exports.prepend = prepend
+exports.remove = remove
+exports['remove-first'] = removeFirst
+exports.replace = replace
+exports['replace-first'] = replaceFirst
+exports.round = round
+exports.rstrip = rstrip
+exports.uppercase = uppercase
+exports.size = size
+exports.slice = slice
+exports.strip = trim
+exports['strip-newlines'] = stripNewlines
+exports.times = multiply
+exports.trim = trim
+exports.truncate = truncate
+exports['truncate-words'] = truncateWords
+exports['url-decode'] = urlDecode
+exports['url-encode'] = urlEncode

package/src/transformers/filters/index.js

@@ -0,0 +1,55 @@
+const posthtml = require('posthtml')
+const {get, omit, has, merge} = require('lodash')
+const defaultFilters = require('./defaultFilters')
+const PostCSS = require('../../generators/postcss')
+const posthtmlContent = require('posthtml-content')
+const Tailwind = require('../../generators/tailwindcss')
+const safeClassNames = require('posthtml-safe-class-names')
+
+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', {})
+
+  /**
+   * Compile CSS in <style {post|tailwind}css> tags
+   */
+  const maizzleConfig = omit(config, ['build.tailwind.css', 'css'])
+  const tailwindConfig = get(config, 'build.tailwind.config', 'tailwind.config.js')
+
+  filters.postcss = css => PostCSS.process(css, maizzleConfig)
+  filters.tailwindcss = css => Tailwind.compile(css, html, tailwindConfig, maizzleConfig)
+
+  return posthtml([
+    styleDataEmbed(),
+    posthtmlContent(filters),
+    safeClassNames()
+  ])
+    .process(html, posthtmlOptions)
+    .then(result => result.html)
+}
+
+/**
+ * Prevent CSS inlining
+ *
+ * Add a `data-embed` attribute to <style> tags that we want to preserve.
+ * Can be used for HTML email client targeting hacks.
+ */
+const styleDataEmbed = () => tree => {
+  const process = node => {
+    if (
+      node.tag === 'style'
+      && node.attrs
+      && (has(node.attrs, 'preserve') || has(node.attrs, 'embed'))) {
+      node.attrs = {...node.attrs, 'data-embed': true}
+      node.attrs.preserve = false
+      node.attrs.embed = false
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+}

package/src/transformers/index.js

@@ -1,11 +1,11 @@
 const inline = require('./inlineCss')
 const minify = require('./minify')
+const filters = require('./filters')
 const markdown = require('./markdown')
 const prettify = require('./prettify')
 const ensureSixHEX = require('./sixHex')
-const applyBaseImageUrl = require('./baseUrl')
+const applyBaseUrl = require('./baseUrl')
 const addURLParams = require('./urlParameters')
-const transformContents = require('./transform')
 const preventWidows = require('./preventWidows')
 const replaceStrings = require('./replaceStrings')
 const safeClassNames = require('./safeClassNames')
@@ -14,21 +14,25 @@ const removeAttributes = require('./removeAttributes')
 const attributeToStyle = require('./attributeToStyle')
 const removeInlineSizes = require('./removeInlineSizes')
 const applyExtraAttributes = require('./extraAttributes')
+const shorthandInlineCSS = require('./shorthandInlineCSS')
+const removeInlinedClasses = require('./removeInlinedSelectors')
 const removeInlineBgColor = require('./removeInlineBackgroundColor')
 
 exports.process = async (html, config) => {
   html = await safeClassNames(html, config)
-  html = await transformContents(html, config)
+  html = await filters(html, config)
   html = await markdown(html, config)
   html = await preventWidows(html, config)
   html = await attributeToStyle(html, config)
   html = await inline(html, config)
+  html = await shorthandInlineCSS(html, config)
+  html = await removeInlinedClasses(html, config)
   html = await removeUnusedCSS(html, config)
   html = await removeInlineSizes(html, config)
   html = await removeInlineBgColor(html, config)
   html = await removeAttributes(html, config)
   html = await applyExtraAttributes(html, config)
-  html = await applyBaseImageUrl(html, config)
+  html = await applyBaseUrl(html, config)
   html = await addURLParams(html, config)
   html = await ensureSixHEX(html, config)
   html = await prettify(html, config)
@@ -38,20 +42,22 @@ exports.process = async (html, config) => {
   return html
 }
 
-exports.inlineCSS = (html, config) => inline(html, config, true)
 exports.minify = (html, config) => minify(html, config, true)
+exports.inlineCSS = (html, config) => inline(html, config, true)
 exports.markdown = (html, config) => markdown(html, config, true)
 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.transformContents = (html, config) => transformContents(html, config, true)
 exports.preventWidows = (html, config) => preventWidows(html, config, true)
 exports.replaceStrings = (html, config) => replaceStrings(html, config, true)
 exports.safeClassNames = (html, config) => safeClassNames(html, config, true)
-exports.applyBaseImageUrl = (html, config) => applyBaseImageUrl(html, config, true)
 exports.removeUnusedCSS = (html, config) => removeUnusedCSS(html, config, true)
 exports.removeAttributes = (html, config) => removeAttributes(html, config, true)
+exports.attributeToStyle = (html, config) => attributeToStyle(html, config, true)
 exports.removeInlineSizes = (html, config) => removeInlineSizes(html, config, true)
-exports.applyExtraAttributes = (html, config) => applyExtraAttributes(html, config, true)
+exports.applyBaseUrl = (html, config) => applyBaseUrl(html, config, true)
+exports.removeInlinedClasses = (html, config) => removeInlinedClasses(html, config)
+exports.shorthandInlineCSS = (html, config) => shorthandInlineCSS(html, config, true)
 exports.removeInlineBgColor = (html, config) => removeInlineBgColor(html, config, true)
-exports.attributeToStyle = (html, config) => attributeToStyle(html, config, true)
+exports.applyExtraAttributes = (html, config) => applyExtraAttributes(html, config, true)

package/src/transformers/inlineCss.js

@@ -1,7 +1,5 @@
 const juice = require('juice')
-const posthtml = require('posthtml')
 const {get, isObject, isEmpty} = require('lodash')
-const mergeLonghand = require('posthtml-postcss-merge-longhand')
 
 module.exports = async (html, config = {}, direct = false) => {
   if (get(config, 'inlineCSS') === false) {
@@ -9,7 +7,7 @@ module.exports = async (html, config = {}, direct = false) => {
   }
 
   const options = direct ? config : get(config, 'inlineCSS', {})
-  const removeStyleTags = get(options, 'removeStyleTags', true)
+  const removeStyleTags = get(options, 'removeStyleTags', false)
   const css = get(config, 'customCSS', false)
 
   if (get(config, 'inlineCSS') === true || !isEmpty(options)) {
@@ -32,17 +30,6 @@ module.exports = async (html, config = {}, direct = false) => {
 
     html = css ? juice.inlineContent(html, css, {removeStyleTags}) : juice(html, {removeStyleTags})
 
-    const posthtmlOptions = get(config, 'build.posthtml.options', {})
-    const mergeLonghandConfig = get(options, 'mergeLonghand', [])
-
-    if (typeof mergeLonghandConfig === 'boolean' && mergeLonghandConfig) {
-      html = await posthtml([mergeLonghand()]).process(html, posthtmlOptions).then(result => result.html)
-    }
-
-    if (isObject(mergeLonghandConfig) && !isEmpty(mergeLonghandConfig)) {
-      html = await posthtml([mergeLonghand({tags: mergeLonghandConfig})]).process(html, posthtmlOptions).then(result => result.html)
-    }
-
     return html
   }
 

package/src/transformers/minify.js

@@ -1,5 +1,5 @@
-const {get, isEmpty} = require('lodash')
 const {crush} = require('html-crush')
+const {get, isEmpty} = require('lodash')
 
 module.exports = async (html, config = {}, direct = false) => {
   if (get(config, 'minify') === false) {

package/src/transformers/prettify.js

@@ -1,20 +1,27 @@
-const {get, isEmpty} = require('lodash')
+/* eslint-disable camelcase */
 const pretty = require('pretty')
+const {get, merge, isEmpty, isObject} = require('lodash')
 
 module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'prettify') === false) {
-    return html
+  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', {})
+  config = direct ? config : get(config, 'prettify')
 
-  if (typeof config === 'boolean' && config) {
-    return pretty(html)
+  // Don't prettify if not explicitly enabled in config
+  if (!config || (isObject(config) && isEmpty(config))) {
+    return html
   }
 
-  if (!isEmpty(config)) {
-    return pretty(html, config)
+  if (typeof config === 'boolean' && config) {
+    return pretty(html, defaultConfig)
   }
 
-  return html
+  config = merge(defaultConfig, config)
+
+  return pretty(html, config)
 }

package/src/transformers/removeInlineBackgroundColor.js

@@ -1,5 +1,5 @@
-const {get, isEmpty} = require('lodash')
 const posthtml = require('posthtml')
+const {get, isEmpty} = require('lodash')
 const parseAttrs = require('posthtml-attrs-parser')
 
 module.exports = async (html, config = {}, direct = false) => {

package/src/transformers/removeInlinedSelectors.js

@@ -0,0 +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
+            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)
+}

package/src/transformers/removeUnusedCss.js

@@ -1,20 +1,40 @@
-const {get, isEmpty} = require('lodash')
-const {comb} = require('email-comb')
-
-module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'removeUnusedCSS') === false) {
-    return html
-  }
-
-  const options = direct ? config : get(config, 'removeUnusedCSS', {})
-
-  if (typeof options === 'boolean' && options) {
-    return comb(html).result
-  }
-
-  if (!isEmpty(options)) {
-    return comb(html, options).result
-  }
-
-  return html
-}
+const {comb} = require('email-comb')
+const {get, isEmpty} = require('lodash')
+
+module.exports = async (html, config = {}, direct = false) => {
+  if (get(config, 'removeUnusedCSS') === false) {
+    return html
+  }
+
+  const options = direct ? config : get(config, 'removeUnusedCSS', {})
+
+  const safelist = [
+    '*body*', // Gmail
+    '.gmail*', // Gmail
+    '.apple*', // Apple Mail
+    '.ios*', // Mail on iOS
+    '.ox-*', // Open-Xchange
+    '.outlook*', // Outlook.com
+    '.ogs*', // Outlook.com
+    '.bloop_container', // Airmail
+    '.Singleton', // Apple Mail 10
+    '.unused', // Notes 8
+    '.moz-text-html', // Thunderbird
+    '.mail-detail-content', // Comcast, Libero webmail
+    '*edo*', // Edison (all)
+    '#*', // Freenet uses #msgBody
+    '.lang*' // Fenced code blocks
+  ]
+
+  if (typeof options === 'boolean' && options) {
+    return comb(html, {whitelist: safelist}).result
+  }
+
+  if (!isEmpty(options)) {
+    options.whitelist = [...get(options, 'whitelist', []), ...safelist]
+
+    return comb(html, options).result
+  }
+
+  return html
+}

package/src/transformers/shorthandInlineCSS.js

@@ -0,0 +1,19 @@
+const posthtml = require('posthtml')
+const {get, isObject, isEmpty} = require('lodash')
+const mergeLonghand = require('posthtml-postcss-merge-longhand')
+
+module.exports = async (html, config, direct = false) => {
+  config = direct ? (isObject(config) ? config : true) : get(config, 'shorthandInlineCSS', [])
+
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+  if (typeof config === 'boolean' && config) {
+    html = await posthtml([mergeLonghand()]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  if (isObject(config) && !isEmpty(config)) {
+    html = await posthtml([mergeLonghand(config)]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  return html
+}

package/src/transformers/sixHex.js

@@ -1,4 +1,6 @@
 const {get} = require('lodash')
+const posthtml = require('posthtml')
+const parseAttrs = require('posthtml-attrs-parser')
 const {conv} = require('color-shorthand-hex-to-six-digit')
 
 module.exports = async (html, config = {}) => {
@@ -6,5 +8,26 @@ module.exports = async (html, config = {}) => {
     return html
   }
 
-  return conv(html)
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  return posthtml([sixHex()]).process(html, posthtmlOptions).then(result => result.html)
+}
+
+const sixHex = () => tree => {
+  const process = node => {
+    const attrs = parseAttrs(node.attrs)
+
+    const targets = ['bgcolor', 'color']
+
+    targets.forEach(attribute => {
+      if (attrs[attribute]) {
+        attrs[attribute] = conv(attrs[attribute])
+      }
+    })
+
+    node.attrs = attrs.compose()
+
+    return node
+  }
+
+  return tree.walk(process)
 }

package/test/expected/posthtml/component.html

@@ -0,0 +1,13 @@
+Variable from attribute: Example
+
+Variable from locals attribute: bar
+
+
+Variable from page: maizzle-ci
+
+  Variable from attribute: Nested component
+
+Variable from locals attribute: bar (nested)
+
+
+Variable from page (nested): maizzle-ci

package/test/expected/{inheritance.html → posthtml/extend-template.html}

@@ -1,2 +1,2 @@
-Parent
-    Child in second.html
+Parent
+    Child in second.html

package/test/expected/posthtml/fetch.html

@@ -0,0 +1,5 @@
+Leanne Graham
+
+Ervin Howell
+
+Clementine Bauch

package/test/expected/posthtml/layout.html

@@ -0,0 +1,3 @@
+    Environment: maizzle-ci
+
+    Front matter variable: Hello

package/test/expected/transformers/atimport-in-style.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  <head>
+    <style>div {
+  margin-top: 1px;
+  margin-right: 2px;
+  margin-bottom: 3px;
+  margin-left: 4px;
+}
+    </style>
+  </head>
+  <body>
+    <div>test</div>
+  </body>
+</html>

package/test/expected/transformers/{base-image-url.html → base-url.html}

@@ -56,13 +56,21 @@
 
     <div>
       <!--[if mso]>
-      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image.jpg" style="600px;height:400px;" />
-      <v:rect fill="false" stroke="false" style="position:absolute;600px;height:400px;">
+      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image.jpg" style="width:600px;height:400px;" />
+      <v:rect fill="false" stroke="false" style="position:absolute;width:600px;height:400px;">
       <v:textbox inset="0,0,0,0"><div><![endif]-->
         <div>test</div>
       <!--[if mso]></div></v:textbox></v:rect><![endif]-->
     </div>
 
+    <!--[if mso]>
+      <v:image src="https://example.com/image-2.jpg" xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px;height:400px;" />
+    <![endif]-->
+
+    <!--[if mso]>
+      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image-3.jpg" style="width:600px;height:400px;" />
+    <![endif]-->
+
     <table>
       <tr>
         <td background="https://example.com/image.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
@@ -79,5 +87,13 @@
         </td>
       </tr>
     </table>
+
+    <!--[if mso]>
+      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
+    <![endif]-->
+
+    <!--[if mso]>
+      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
+    <![endif]-->
   </body>
 </html>