@maizzle/framework 4.8.7 → 5.0.0-beta.0

package/src/transformers/index.js

@@ -1,64 +1,269 @@
-const minify = require('./minify')
-const filters = require('./filters')
-const inline = require('./inlineCss')
-const markdown = require('./markdown')
-const prettify = require('./prettify')
-const ensureSixHEX = require('./sixHex')
-const applyBaseUrl = require('./baseUrl')
-const posthtmlMSO = require('./posthtmlMso')
-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 removeUnusedCSS(html, config)
-  html = await removeAttributes(html, config)
-  html = await shorthandInlineCSS(html, config)
-  html = await removeInlineSizes(html, config)
-  html = await removeInlineBgColor(html, config)
-  html = await applyExtraAttributes(html, config)
-  html = await applyBaseUrl(html, config)
-  html = await addURLParams(html, config)
-  html = await ensureSixHEX(html, config)
-  html = await posthtmlMSO(html, config)
-  html = await prettify(html, config)
-  html = await minify(html, config)
-  html = await replaceStrings(html, config)
-
-  return html
-}
+import posthtml from 'posthtml'
+import get from 'lodash-es/get.js'
+import { defu as merge } from 'defu'
+
+import comb from './comb.js'
+import sixHex from './sixHex.js'
+import minify from './minify.js'
+import baseUrl from './baseUrl.js'
+import inlineCSS from './inline.js'
+import prettify from './prettify.js'
+import filters from './filters/index.js'
+import markdown from 'posthtml-markdownit'
+import posthtmlMso from './posthtmlMso.js'
+import shorthandCss from './shorthandCss.js'
+import preventWidows from './preventWidows.js'
+import addAttributes from './addAttributes.js'
+import urlParameters from './urlParameters.js'
+import safeClassNames from './safeClassNames.js'
+import replaceStrings from './replaceStrings.js'
+import attributeToStyle from './attributeToStyle.js'
+import removeAttributes from './removeAttributes.js'
+
+import coreTransformers from './core.js'
+
+import defaultPosthtmlConfig from '../posthtml/defaultConfig.js'
+
+/**
+ * Use Maizzle Transformers on an HTML string.
+ *
+ * Only Transformers that are enabled in the `config` will be used.
+ *
+ * @param {string} html The HTML content
+ * @param {object} config The Maizzle config object
+ * @returns {Promise<{ original: string, config: object, html: string }>}
+ *   A Promise resolving to an object containing the original HTML, modified HTML, and the config
+ */
+export async function run(html = '', config = {}) {
+  const posthtmlPlugins = []
+
+  const posthtmlConfig = merge(
+    get(config, 'posthtml.options', {}),
+    defaultPosthtmlConfig
+  )
+
+  /**
+   * 1. Core transformers
+   *
+   * Transformers that are always enabled
+   *
+   */
+  posthtmlPlugins.push(coreTransformers(config))
+
+  /**
+   * 2. Safe class names
+   *
+   * Rewrite Tailwind CSS class names to email-safe alternatives,
+   * unless explicitly disabled
+   */
+  if (get(config, 'css.safeClassNames') !== false) {
+    posthtmlPlugins.push(
+      safeClassNames(get(config, 'css.safeClassNames', {}))
+    )
+  }
+
+  /**
+   * 3. Filters
+   *
+   * Apply filters to HTML.
+   * Filters are always applied, unless explicitly disabled.
+   */
+  if (get(config, 'filters') !== false) {
+    posthtmlPlugins.push(
+      filters(get(config, 'filters', {}))
+    )
+  }
+
+  /**
+   * 4. Markdown
+   *
+   * Convert Markdown to HTML with Markdown-it, unless explicitly disabled
+   */
+  if (get(config, 'markdown') !== false) {
+    posthtmlPlugins.push(
+      markdown(get(config, 'markdown', {}))
+    )
+  }
+
+  /**
+   * 5. Prevent widow words
+   * Always runs, unless explicitly disabled
+   */
+  if (get(config, 'widowWords') !== false) {
+    posthtmlPlugins.push(
+      preventWidows(get(config, 'widowWords', {}))
+    )
+  }
+
+  /**
+   * 6. Attribute to `style`
+   *
+   * Duplicate HTML attributes to inline CSS.
+   */
+  if (get(config, 'css.inline.attributeToStyle')) {
+    posthtmlPlugins.push(
+      attributeToStyle(get(config, 'css.inline.attributeToStyle', []))
+    )
+  }
+
+  /**
+   * 7. Inline CSS
+   *
+   * Inline CSS into HTML
+   */
+  if (get(config, 'css.inline')) {
+    posthtmlPlugins.push(inlineCSS(
+      merge(
+        get(config, 'css.inline', {}),
+        {
+          removeInlinedSelectors: 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.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.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)
+  /**
+   * 8. Purge CSS
+   *
+   * Remove unused CSS, uglify classes etc.
+   */
+  if (get(config, 'css.purge')) {
+    posthtmlPlugins.push(comb(config.css.purge))
+  }
+
+  /**
+   * 9. Remove attributes
+   *
+   * Remove attributes from HTML tags
+   * If `undefined`, removes empty `style` and `class` attributes
+   */
+  if (get(config, 'attributes.remove') !== false) {
+    posthtmlPlugins.push(
+      removeAttributes(
+        get(config, 'attributes.remove', []),
+        posthtmlConfig
+      )
+    )
+  }
+
+  /**
+   * 10. Shorthand CSS
+   *
+   * Convert longhand CSS properties to shorthand in `style` attributes
+   */
+  if (get(config, 'css.shorthand')) {
+    posthtmlPlugins.push(
+      shorthandCss(get(config, 'css.shorthand', {}))
+    )
+  }
+
+  /**
+   * 11. Add attributes
+   *
+   * Add attributes to HTML tags
+   */
+  if (get(config, 'attributes.add') !== false) {
+    posthtmlPlugins.push(
+      addAttributes(get(config, 'attributes.add', {}))
+    )
+  }
+
+  /**
+   * 12. Base URL
+   *
+   * Add a base URL to relative paths
+   */
+  if (get(config, 'baseURL', get(config, 'baseUrl'))) {
+    posthtmlPlugins.push(
+      baseUrl(get(config, 'baseURL', get(config, 'baseUrl', {})))
+    )
+  } else {
+    /**
+     * Set baseURL to `build.static.destination` if it's not already set
+     */
+    const destination = get(config, 'build.static.destination', '')
+    if (destination && !config._dev) {
+      posthtmlPlugins.push(
+        baseUrl({
+          url: destination,
+          allTags: true,
+          styleTag: true,
+          inlineCss: true,
+        })
+      )
+    }
+  }
+
+  /**
+   * 13. URL parameters
+   *
+   * Add parameters to URLs
+   */
+  if (get(config, 'urlParameters')) {
+    posthtmlPlugins.push(
+      urlParameters(get(config, 'urlParameters', {}))
+    )
+  }
+
+  /**
+   * 14. Six-digit HEX
+   *
+   * Convert three-digit HEX colors to six-digit
+   * Always runs, unless explicitly disabled
+   */
+  if (get(config, 'css.sixHex') !== false) {
+    posthtmlPlugins.push(
+      sixHex()
+    )
+  }
+
+  /**
+   * 15. PostHTML MSO
+   *
+   * Simplify writing MSO conditionals for Outlook
+   */
+  if (get(config, 'outlook') !== false) {
+    posthtmlPlugins.push(
+      posthtmlMso(get(config, 'outlook', {}))
+    )
+  }
+
+  /**
+   * 16. Prettify
+   *
+   * Pretty-print HTML using js-beautify
+   */
+  if (get(config, 'prettify')) {
+    posthtmlPlugins.push(
+      prettify(get(config, 'prettify', {}))
+    )
+  }
+
+  /**
+   * 17. Minify
+   *
+   * Minify HTML using html-crush
+   */
+  if (get(config, 'minify')) {
+    posthtmlPlugins.push(
+      minify(get(config, 'minify', {}))
+    )
+  }
+
+  /**
+   * 18. Replace strings
+   *
+   * Replace strings through regular expressions
+   */
+  if (get(config, 'replaceStrings')) {
+    posthtmlPlugins.push(
+      replaceStrings(get(config, 'replaceStrings', {}))
+    )
+  }
+
+  return posthtml(posthtmlPlugins)
+    .process(html, posthtmlConfig)
+    .then(result => ({
+      html: result.html,
+    }))
+}

package/src/transformers/inline.js

@@ -0,0 +1,240 @@
+import juice from 'juice'
+import postcss from 'postcss'
+import get from 'lodash-es/get.js'
+import has from 'lodash-es/has.js'
+import remove from 'lodash-es/remove.js'
+import { render } from 'posthtml-render'
+import { calc } from '@csstools/css-calc'
+import isEmpty from 'lodash-es/isEmpty.js'
+import * as cheerio from 'cheerio/lib/slim'
+import safeParser from 'postcss-safe-parser'
+import isObject from 'lodash-es/isObject.js'
+import { parser as parse } from 'posthtml-parser'
+import { useAttributeSizes } from './useAttributeSizes.js'
+
+const posthtmlPlugin = (options = {}) => tree => {
+  return inline(render(tree), options).then(html => parse(html))
+}
+
+export default posthtmlPlugin
+
+export async function inline(html = '', options = {}) {
+  // Exit early if no HTML is passed
+  if (typeof html !== 'string' || html === '') {
+    return html
+  }
+
+  const removeStyleTags = get(options, 'removeStyleTags', false)
+  const css = get(options, 'customCSS', false)
+
+  options.resolveCSSVariables = get(options, 'resolveCSSVariables', true)
+  options.removeInlinedSelectors = get(options, 'removeInlinedSelectors', true)
+  options.resolveCalc = get(options, 'resolveCalc', true)
+  options.preferUnitlessValues = get(options, 'preferUnitlessValues', true)
+
+  juice.styleToAttribute = get(options, 'styleToAttribute', {})
+  juice.applyWidthAttributes = get(options, 'applyWidthAttributes', true)
+  juice.applyHeightAttributes = get(options, 'applyHeightAttributes', true)
+  juice.excludedProperties.push(...get(options, 'excludedProperties', []))
+  juice.widthElements = get(options, 'widthElements', ['img', 'video']).map(i => i.toUpperCase())
+  juice.heightElements = get(options, 'heightElements', ['img', 'video']).map(i => i.toUpperCase())
+
+  if (isObject(options.codeBlocks) && !isEmpty(options.codeBlocks)) {
+    Object.entries(options.codeBlocks).forEach(([k, v]) => {
+      juice.codeBlocks[k] = v
+    })
+  }
+
+  const $ = cheerio.load(html, { decodeEntities: false, _useHtmlParser2: true })
+
+  // Add a `data-embed` attribute to style tags that have the embed attribute
+  $('style[embed]').each((i, el) => {
+    $(el).attr('data-embed', '')
+  })
+
+  /**
+   * Inline the CSS
+   *
+   * If customCSS is passed, inline that CSS specifically
+   * Otherwise, use Juice's default inlining
+   */
+  $.root().html(
+    css
+      ? juice.inlineContent($.html(), css, { removeStyleTags, ...options })
+      : juice($.html(), { removeStyleTags, ...options })
+  )
+
+  /**
+   * Prefer attribute sizes
+   *
+   * Prefer HTML `width` and `height` attributes over inline CSS.
+   * Useful for retina images in MSO Outlook, where CSS sizes
+   * aren't respected and will render the image in its
+   * natural size.
+   */
+  if (options.useAttributeSizes) {
+    $.root().html(
+      await useAttributeSizes(html, {
+        width: juice.widthElements,
+        height: juice.heightElements,
+      })
+    )
+  }
+
+  /**
+   * Remove inlined selectors from the HTML
+   */
+  // For each style tag
+  $('style:not([embed])').each((i, el) => {
+    // Parse the CSS
+    const { root } = postcss()
+      .process(
+        $(el).html(),
+        {
+          from: undefined,
+          parser: safeParser
+        }
+      )
+
+    const preservedClasses = new Set()
+    const selectors = new Set()
+
+    // Preserve selectors in at rules
+    root.walkAtRules(rule => {
+      if (['media', 'supports'].includes(rule.name)) {
+        rule.walkRules(rule => {
+          preservedClasses.add(rule.selector)
+        })
+      }
+    })
+
+    // For each rule in the CSS block we're parsing
+    root.walkRules(rule => {
+      // Keep track of declarations in the rule
+      const declarations = new Set()
+
+      rule.walkDecls(decl => {
+        // Resolve calc() values to static values
+        if (options.resolveCalc) {
+          decl.value = decl.value.includes('calc(') ? calc(decl.value) : decl.value
+        }
+
+        declarations.add(decl)
+      })
+
+      /**
+       * Remove duplicate declarations
+       *
+       * Only do so if the `resolveCSSVariables` option is enabled,
+       * otherwise we'll end up removing all declarations that use CSS variables
+       */
+      if (options.resolveCSSVariables) {
+        Array.from(declarations)
+        /**
+         * Consider only declarations with a value that includes any of the other declarations' property
+         * So a decl like color(var(--text-color)) will be removed if there's a decl with a property of --text-color
+         *  */
+          .filter(decl =>
+            Array.from(declarations).some(otherDecl => decl.value.includes(otherDecl.prop))
+            || decl.prop.startsWith('--')
+          )
+          .map(decl => decl.remove())
+      }
+
+      const { selector } = rule
+
+      selectors.add({
+        name: selector,
+        prop: get(rule.nodes[0], 'prop')
+      })
+
+      // Preserve pseudo selectors
+      // TODO: revisit pseudos list
+      if ([':hover', ':active', ':focus', ':visited', ':link', ':before', ':after'].some(i => selector.includes(i))) {
+        preservedClasses.add(selector)
+      }
+
+      if (options.removeInlinedSelectors) {
+        // Remove the rule in the <style> tag as long as it's not a preserved class
+        if (!preservedClasses.has(selector)) {
+          rule.remove()
+        }
+
+        // Update the <style> tag contents
+        $(el).html(root.toString())
+      }
+    })
+
+    // Loop over selectors that we found in the <style> tags
+    selectors.forEach(({ name, prop }) => {
+      const elements = $(name).get()
+
+      // If the property is excluded from inlining, skip
+      if (!juice.excludedProperties.includes(prop)) {
+        // Find the selector in the HTML
+        elements.forEach((el) => {
+          // Get a `property|value` list from the inline style attribute
+          const styleAttr = $(el).attr('style')
+          let inlineStyles = {}
+
+          if (styleAttr) {
+            inlineStyles = styleAttr.split(';').reduce((acc, i) => {
+              let [property, value] = i.split(':').map(i => i.trim())
+
+              if (value && options.resolveCalc) {
+                value = value.includes('calc') ? calc(value) : value
+              }
+
+              if (value && options.preferUnitlessValues) {
+                value = value.replace(
+                  /\b0(px|rem|em|%|vh|vw|vmin|vmax|in|cm|mm|pt|pc|ex|ch)\b/g,
+                  '0'
+                )
+              }
+
+              if (property) {
+                acc[property] = value
+              }
+
+              return acc
+            }, {})
+
+            // Update the element's style attribute with the new value
+            $(el).attr(
+              'style',
+              Object.entries(inlineStyles).map(([property, value]) => `${property}: ${value}`).join('; ')
+            )
+          }
+
+          // Get the classes from the element's class attribute
+          const classes = $(el).attr('class')
+
+          if (options.removeInlinedSelectors && classes) {
+            const classList = classes.split(' ')
+
+            // If the class has been inlined in the style attribute...
+            if (has(inlineStyles, prop)) {
+              // Try to remove the classes that have been inlined
+              if (![...preservedClasses].some(item => item.endsWith(name) || item.startsWith(name))) {
+                remove(classList, classToRemove => name.includes(classToRemove))
+              }
+
+              // Update the class list on the element with the new classes
+              if (classList.length > 0) {
+                $(el).attr('class', classList.join(' '))
+              } else {
+                $(el).removeAttr('class')
+              }
+            }
+          }
+        })
+      }
+    })
+  })
+
+  $('style[embed]').each((i, el) => {
+    $(el).removeAttr('embed')
+  })
+
+  return $.html()
+}

package/src/transformers/markdown.js

@@ -1,20 +1,19 @@
-const posthtml = require('posthtml')
-const {get, merge} = require('lodash')
-const markdown = require('posthtml-markdownit')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import md from 'posthtml-markdownit'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
-module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'markdown') === false) {
-    return html
-  }
-
-  const userMarkdownOptions = direct ? config : get(config, 'markdown', {})
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-  const markdownOptions = merge({markdownit: {html: true}}, userMarkdownOptions)
+export async function markdown(html = '', options = {}, posthtmlOptions = {}) {
+  /**
+   * Automatically wrap in <md> tag, unless manual mode is enabled
+   * With manual mode, user must wrap the markdown content in a <md> tag
+   * https://github.com/posthtml/posthtml-markdownit#usage
+   */
+  html = options.manual ? html : `<md>${html}</md>`
 
   return posthtml([
-    markdown({...markdownOptions})
+    md(options)
   ])
-    .process(html, posthtmlOptions)
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
     .then(result => result.html)
 }

package/src/transformers/minify.js

@@ -1,21 +1,26 @@
-const {crush} = require('html-crush')
-const {get, isEmpty} = require('lodash')
+import posthtml from 'posthtml'
+import { crush } from 'html-crush'
+import { defu as merge } from 'defu'
+import { render } from 'posthtml-render'
+import { parser as parse } from 'posthtml-parser'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
-module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'minify') === false) {
-    return html
-  }
-
-  config = direct ? {
-    lineLengthLimit: 500,
-    removeIndentations: true,
+const posthtmlPlugin = (options = {}) => tree => {
+  options = merge(options, {
     removeLineBreaks: true,
-    ...config
-  } : get(config, 'minify', {})
+  })
+
+  const { result: html } = crush(render(tree), options)
+
+  return parse(html)
+}
 
-  if (!isEmpty(config)) {
-    html = crush(html, {removeLineBreaks: true, ...config}).result
-  }
+export default posthtmlPlugin
 
-  return html
+export async function minify(html = '', options = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(options)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
 }

package/src/transformers/posthtmlMso.js

@@ -1,11 +1,16 @@
-const posthtml = require('posthtml')
-const {get, merge} = require('lodash')
-const outlook = require('posthtml-mso')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import posthtmlMso from 'posthtml-mso'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
-module.exports = async (html, config) => {
-  const outlookOptions = get(config, 'build.posthtml.outlook', {})
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
+export default function posthtmlPlugin(options = {}) {
+  return posthtmlMso(options)
+}
 
-  return posthtml([outlook({...outlookOptions})]).process(html, posthtmlOptions).then(result => result.html)
+export async function useMso(html = '', options = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(options)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
 }