@maizzle/framework 4.0.0-alpha.8 → 4.0.1

package/src/transformers/baseUrl.js

@@ -1,45 +1,69 @@
-const posthtml = require('posthtml')
-const isUrl = require('is-url-superb')
-const baseUrl = require('posthtml-base-url')
-const {get, isObject, isEmpty} = require('lodash')
-
-// VML backgrounds need regex because they're inside HTML comments :(
-const rewriteVMLs = (html, url) => {
-  const vImageMatch = html.match(/(<v:image.+)(src=['"]([^'"]+)['"])/)
-  const vFillMatch = html.match(/(<v:fill.+)(src=['"]([^'"]+)['"])/)
-
-  if (vImageMatch && !isUrl(vImageMatch[3])) {
-    html = html.replace(vImageMatch[0], `${vImageMatch[1]}src="${url}${vImageMatch[3]}"`)
-  }
-
-  if (vFillMatch && !isUrl(vFillMatch[3])) {
-    html = html.replace(vFillMatch[0], `${vFillMatch[1]}src="${url}${vFillMatch[3]}"`)
-  }
-
-  return html
-}
-
-module.exports = async (html, config = {}, direct = false) => {
-  const url = direct ? config : get(config, 'baseURL')
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-  // `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)
-  }
-
-  // `baseUrl: {}`
-  if (isObject(url) && !isEmpty(url)) {
-    html = rewriteVMLs(html, url.url)
-
-    return posthtml([baseUrl(url)]).process(html, posthtmlOptions).then(result => result.html)
-  }
-
-  return html
-}
+const posthtml = require('posthtml')
+const isUrl = require('is-url-superb')
+const baseUrl = require('posthtml-base-url')
+const {get, isObject, isEmpty} = require('lodash')
+
+/**
+ * VML backgrounds must be handled with regex because
+ * they're inside HTML comments.
+ */
+const rewriteVMLs = (html, url) => {
+  // Handle <v:image>
+  const vImageMatches = html.match(/<v:image[^>]+src="?([^"\s]+)"/g)
+
+  if (vImageMatches) {
+    vImageMatches.forEach(match => {
+      const vImage = match.match(/<v:image[^>]+src="?([^"\s]+)"/)
+      const vImageSrc = vImage[1]
+
+      if (!isUrl(vImageSrc)) {
+        const vImageSrcUrl = url + vImageSrc
+        const vImageReplace = vImage[0].replace(vImageSrc, vImageSrcUrl)
+        html = html.replace(vImage[0], vImageReplace)
+      }
+    })
+  }
+
+  // Handle <v:fill>
+  const vFillMatches = html.match(/<v:fill[^>]+src="?([^"\s]+)"/g)
+
+  if (vFillMatches) {
+    vFillMatches.forEach(match => {
+      const vFill = match.match(/<v:fill[^>]+src="?([^"\s]+)"/)
+      const vFillSrc = vFill[1]
+
+      if (!isUrl(vFillSrc)) {
+        const vFillSrcUrl = url + vFillSrc
+        const vFillReplace = vFill[0].replace(vFillSrc, vFillSrcUrl)
+        html = html.replace(vFill[0], vFillReplace)
+      }
+    })
+  }
+
+  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,26 +1,26 @@
-const posthtml = require('posthtml')
-const {get, isObject} = require('lodash')
-const addAttributes = require('posthtml-extra-attributes')
-
-module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'extraAttributes') === false) {
-    return html
-  }
-
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-
-  let attributes = {
-    table: {
-      cellpadding: 0,
-      cellspacing: 0,
-      role: 'presentation'
-    },
-    img: {
-      alt: ''
-    }
-  }
-
-  attributes = direct ? {...attributes, ...config} : (isObject(config.extraAttributes) ? {...attributes, ...config.extraAttributes} : attributes)
-
-  return posthtml([addAttributes({attributes})]).process(html, posthtmlOptions).then(result => result.html)
-}
+const posthtml = require('posthtml')
+const {get, isObject} = require('lodash')
+const addAttributes = require('posthtml-extra-attributes')
+
+module.exports = async (html, config = {}, direct = false) => {
+  if (get(config, 'extraAttributes') === false) {
+    return html
+  }
+
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+  let attributes = {
+    table: {
+      cellpadding: 0,
+      cellspacing: 0,
+      role: 'presentation'
+    },
+    img: {
+      alt: ''
+    }
+  }
+
+  attributes = direct ? {...attributes, ...config} : (isObject(config.extraAttributes) ? {...attributes, ...config.extraAttributes} : attributes)
+
+  return posthtml([addAttributes({attributes})]).process(html, posthtmlOptions).then(result => result.html)
+}

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/{transform.js → filters/index.js}

@@ -1,51 +1,55 @@
-const posthtml = require('posthtml')
-const {get, omit, has} = require('lodash')
-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 replacements = direct ? config : get(config, 'transform', {})
-  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')
-
-  replacements.postcss = css => PostCSS.process(css, maizzleConfig)
-  replacements.tailwindcss = css => Tailwind.compile(css, html, tailwindConfig, maizzleConfig)
-
-  return posthtml([
-    styleDataEmbed(),
-    posthtmlContent(replacements),
-    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)
-}
+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,60 +1,63 @@
-const inline = require('./inlineCss')
-const minify = require('./minify')
-const markdown = require('./markdown')
-const prettify = require('./prettify')
-const ensureSixHEX = require('./sixHex')
-const applyBaseImageUrl = require('./baseUrl')
-const addURLParams = require('./urlParameters')
-const transformContents = require('./transform')
-const preventWidows = require('./preventWidows')
-const replaceStrings = require('./replaceStrings')
-const safeClassNames = require('./safeClassNames')
-const removeUnusedCSS = require('./removeUnusedCss')
-const removeAttributes = require('./removeAttributes')
-const attributeToStyle = require('./attributeToStyle')
-const removeInlineSizes = require('./removeInlineSizes')
-const applyExtraAttributes = require('./extraAttributes')
-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 markdown(html, config)
-  html = await preventWidows(html, config)
-  html = await attributeToStyle(html, config)
-  html = await inline(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 addURLParams(html, config)
-  html = await ensureSixHEX(html, config)
-  html = await prettify(html, config)
-  html = await minify(html, config)
-  html = await replaceStrings(html, config)
-
-  return html
-}
-
-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.addURLParams = (html, config) => addURLParams(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.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.applyBaseImageUrl = (html, config) => applyBaseImageUrl(html, config, true)
-exports.transformContents = (html, config) => transformContents(html, config, true)
-exports.removeInlineBgColor = (html, config) => removeInlineBgColor(html, config, true)
-exports.applyExtraAttributes = (html, config) => applyExtraAttributes(html, config, true)
-exports.removeInlinedClasses = (html, config) => removeInlinedClasses(html, config)
+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 applyBaseUrl = require('./baseUrl')
+const addURLParams = require('./urlParameters')
+const preventWidows = require('./preventWidows')
+const replaceStrings = require('./replaceStrings')
+const safeClassNames = require('./safeClassNames')
+const removeUnusedCSS = require('./removeUnusedCss')
+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 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 applyBaseUrl(html, config)
+  html = await addURLParams(html, config)
+  html = await ensureSixHEX(html, config)
+  html = await prettify(html, config)
+  html = await minify(html, config)
+  html = await replaceStrings(html, config)
+
+  return html
+}
+
+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.preventWidows = (html, config) => preventWidows(html, config, true)
+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.removeAttributes = (html, config) => removeAttributes(html, config, true)
+exports.attributeToStyle = (html, config) => attributeToStyle(html, config, true)
+exports.removeInlineSizes = (html, config) => removeInlineSizes(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.applyExtraAttributes = (html, config) => applyExtraAttributes(html, config, true)

package/src/transformers/inlineCss.js

@@ -1,50 +1,37 @@
-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) {
-    return html
-  }
-
-  const options = direct ? config : get(config, 'inlineCSS', {})
-  const removeStyleTags = get(options, 'removeStyleTags', false)
-  const css = get(config, 'customCSS', false)
-
-  if (get(config, 'inlineCSS') === true || !isEmpty(options)) {
-    juice.styleToAttribute = get(options, 'styleToAttribute', {'vertical-align': 'valign'})
-
-    juice.widthElements = get(options, 'applyWidthAttributes', [])
-    juice.heightElements = get(options, 'applyHeightAttributes', [])
-
-    juice.excludedProperties = ['--tw-shadow']
-
-    if (!isEmpty(options.excludedProperties)) {
-      juice.excludedProperties.push(...get(options, 'excludedProperties', []))
-    }
-
-    if (isObject(options.codeBlocks) && !isEmpty(options.codeBlocks)) {
-      Object.entries(options.codeBlocks).forEach(([k, v]) => {
-        juice.codeBlocks[k] = v
-      })
-    }
-
-    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
-  }
-
-  return html
-}
+const juice = require('juice')
+const {get, isObject, isEmpty} = require('lodash')
+
+module.exports = async (html, config = {}, direct = false) => {
+  if (get(config, 'inlineCSS') === false) {
+    return html
+  }
+
+  const options = direct ? config : get(config, 'inlineCSS', {})
+  const removeStyleTags = get(options, 'removeStyleTags', false)
+  const css = get(config, 'customCSS', false)
+
+  if (get(config, 'inlineCSS') === true || !isEmpty(options)) {
+    juice.styleToAttribute = get(options, 'styleToAttribute', {'vertical-align': 'valign'})
+
+    juice.widthElements = get(options, 'applyWidthAttributes', [])
+    juice.heightElements = get(options, 'applyHeightAttributes', [])
+
+    juice.excludedProperties = ['--tw-shadow']
+
+    if (!isEmpty(options.excludedProperties)) {
+      juice.excludedProperties.push(...get(options, 'excludedProperties', []))
+    }
+
+    if (isObject(options.codeBlocks) && !isEmpty(options.codeBlocks)) {
+      Object.entries(options.codeBlocks).forEach(([k, v]) => {
+        juice.codeBlocks[k] = v
+      })
+    }
+
+    html = css ? juice.inlineContent(html, css, {removeStyleTags}) : juice(html, {removeStyleTags})
+
+    return html
+  }
+
+  return html
+}