@maizzle/framework 6.0.0-9 → 6.0.0-rc.1

package/src/transformers/inline.js

@@ -1,306 +0,0 @@
-import juice from 'juice'
-import postcss from 'postcss'
-import get from 'lodash-es/get.js'
-import has from 'lodash-es/has.js'
-import * as cheerio from 'cheerio/slim'
-import remove from 'lodash-es/remove.js'
-import { render } from 'posthtml-render'
-import isEmpty from 'lodash-es/isEmpty.js'
-import { match } from 'posthtml/lib/api.js'
-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'
-import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
-
-/**
- * PostHTML plugin to inline CSS
- * @param {*} options `css.inline` object from config
- * @returns {Function} PostHTML tree
- */
-export default (options = {}) => tree => {
-  return inline(render(tree), options)
-}
-
-/**
- * Function to inline CSS styles with Posthtml and Juice.
- *
- * @param {*} html  HTML string to process
- * @param {*} options Options for Juice
- * @returns {string} HTML with inlined styles
- */
-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.removeInlinedSelectors = get(options, 'removeInlinedSelectors', true)
-  options.preferUnitlessValues = get(options, 'preferUnitlessValues', true)
-  options.safelist = new Set([
-    ...get(options, 'safelist', []),
-    ...[
-      'body', // Gmail
-      'gmail', // Gmail
-      'apple', // Apple Mail
-      'ios', // Mail on iOS
-      'ox-', // Open-Xchange
-      'yahoo', // Yahoo! Mail
-      'outlook', // Outlook Mac and Android
-      '[data-ogs', // Outlook.com
-      'bloop_container', // Airmail
-      'Singleton', // Apple Mail 10
-      'unused', // Notes 8
-      'moz-text-html', // Thunderbird
-      'mail-detail-content', // Comcast, Libero webmail
-      'mail-content', // Notion
-      'edo', // Edison (all)
-      '#msgBody', // Freenet uses #msgBody
-      'lang', // Fenced code blocks
-      'ShadowHTML', // Superhuman
-      'spark', // Spark
-      'at-', // Safe class names for container queries
-    ],
-  ])
-
-  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
-    })
-  }
-
-  /**
-   * Inline the CSS
-   *
-   * If customCSS is passed, inline that CSS specifically
-   * Otherwise, use Juice's default inlining
-   */
-  const tree = parse(html, getPosthtmlOptions())
-  tree.match = match
-
-  /**
-   * Add a `data-embed` attribute to style tags that have the `embed`
-   * attribute, so that Juice can skip them.
-   */
-  tree.match({ tag: 'style' }, (node) => {
-    if (node.attrs && node.attrs.embed !== undefined) {
-      node.attrs['data-embed'] = true
-    }
-
-    if (node.attrs && node.attrs['data-embed'] !== undefined) {
-      node.attrs.embed = true
-    }
-
-    return node
-  })
-
-  let inlined_html = css
-    ? juice.inlineContent(render(tree), css, { removeStyleTags, ...options })
-    : juice(render(tree), { 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) {
-    inlined_html = await useAttributeSizes(inlined_html, {
-      width: juice.widthElements,
-      height: juice.heightElements,
-    }, getPosthtmlOptions())
-  }
-
-  /**
-  * Remove inlined selectors from the HTML
- *
- */
-  const inlined_tree = parse(inlined_html, getPosthtmlOptions())
-  inlined_tree.match = match
-
-  const preservedAtRules = get(options, 'preservedAtRules', ['media'])
-  const selectors = new Set()
-
-  inlined_tree.match({ tag: 'style' }, node => {
-    // If this is an embedded style tag, exit early
-    if (node.attrs && ('data-embed' in node.attrs || 'embed' in node.attrs)) {
-      return node
-    }
-
-    // Parse the CSS
-    const { root } = postcss()
-      .process(
-        Array.isArray(node.content)
-          ? node.content.join('')
-          : node.content,
-        {
-          from: undefined,
-          parser: safeParser
-        }
-      )
-
-    // Precompile a single regex to match any substring from the preservedClasses set
-    const combinedPattern = Array.from(options.safelist)
-      .map(pattern => pattern.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'))  // Escape special regex chars
-      .join('|')  // Combine all patterns into a single regex pattern with 'OR' (|)
-
-    const combinedRegex = new RegExp(combinedPattern)
-
-    // Preserve selectors in predefined at-rules
-    root.walkAtRules(rule => {
-      if (preservedAtRules.includes(rule.name)) {
-        rule.walkRules(rule => {
-          options.safelist.add(rule.selector)
-        })
-      } else {
-        // Remove the at rule if it's not predefined
-        rule.remove()
-      }
-    })
-
-    // For each rule in the CSS block we're parsing
-    root.walkRules(rule => {
-      // Create a set of selectors
-      const { selector } = rule
-
-      // Add the selector to the set as long as it's not a pseudo selector
-      if (!/.+[^\\\s]::?\w+/.test(selector)) {
-        selectors.add({
-          name: selector,
-          prop: get(rule.nodes[0], 'prop')
-        })
-      }
-      else {
-        // Preserve pseudo selectors
-        options.safelist.add(selector)
-      }
-
-
-      if (options.removeInlinedSelectors) {
-        // Remove the rule in the <style> tag as long as it's not a preserved class
-        if (!options.safelist.has(selector) && !combinedRegex.test(selector)) {
-          rule.remove()
-        }
-
-        // Update the <style> tag contents
-        node.content = root.toString()
-      }
-    })
-
-    // This is inlined_tree
-    return node
-  })
-
-  /**
-   * CSS optimizations
-   *
-   * `preferUnitlessValues` - Replace unit values with `0` where possible
-   * `removeInlinedSelectors` - Remove inlined selectors from the HTML
-   */
-
-  const $ = cheerio.load(render(inlined_tree), {
-    xml: {
-      decodeEntities: false,
-      xmlMode: false,
-    }
-  })
-
-  // Loop over selectors that we found in the <style> tags
-  selectors.forEach(({ name, prop }) => {
-    try {
-      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')
-          // Store the element's inline styles
-          const inlineStyles = {}
-
-          // `preferUnitlessValues`
-          if (styleAttr) {
-            try {
-              const root = postcss.parse(`* { ${styleAttr} }`)
-
-              root.first.each((decl) => {
-                const property = decl.prop
-                let value = decl.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) {
-                  inlineStyles[property] = value
-                }
-              })
-
-              // Update the element's style attribute with the new value
-              $(el).attr(
-                'style',
-                Object.entries(inlineStyles).map(([property, value]) => `${property}: ${value}`).join('; ')
-              )
-            } catch { }
-          }
-
-          // Get the classes from the element's class attribute
-          const classes = $(el).attr('class')
-
-          // `removeInlinedSelectors`
-          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 (![...options.safelist].some(item => item.includes(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')
-              }
-            }
-          }
-        })
-      }
-    } catch { }
-  })
-
-  const optimized_tree = parse($.html(), getPosthtmlOptions())
-  optimized_tree.match = match
-
-  /**
-   * Remove the `embed` attribute from style tags
-   */
-  optimized_tree.match({ tag: 'style' }, (node) => {
-    // If this is an embedded style tag, exit early
-    if (node.attrs && node.attrs.embed !== undefined) {
-      delete node.attrs.embed
-    }
-
-    return node
-  })
-
-  // Finally, return the inlined html
-  return render(optimized_tree)
-}

package/src/transformers/markdown.js

@@ -1,26 +0,0 @@
-import posthtml from 'posthtml'
-import md from 'posthtml-markdownit'
-
-export async function markdown(input = '', options = {}, posthtmlOptions = {}) {
-  /**
-   * If no input is provided, return an empty string.
-   */
-  if (!input) {
-    return ''
-  }
-
-  /**
-   * Automatically wrap in <md> tag, unless manual mode is enabled.
-   *
-   * With manual mode, user must wrap the input in a <md> tag.
-   *
-   * https://github.com/posthtml/posthtml-markdownit#usage
-   */
-  input = options.manual ? input : `<md>${input}</md>`
-
-  return posthtml([
-    md(options)
-  ])
-    .process(input, posthtmlOptions)
-    .then(result => result.html)
-}

package/src/transformers/minify.js

@@ -1,27 +0,0 @@
-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 { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
-
-const posthtmlPlugin = (options = {}) => tree => {
-  options = merge(options, {
-    removeLineBreaks: true,
-  })
-
-  const posthtmlConfig = getPosthtmlOptions()
-  const { result: html } = crush(render(tree), options)
-
-  return parse(html, posthtmlConfig)
-}
-
-export default posthtmlPlugin
-
-export async function minify(html = '', options = {}, posthtmlOptions = {}) {
-  return posthtml([
-    posthtmlPlugin(options)
-  ])
-    .process(html, posthtmlOptions)
-    .then(result => result.html)
-}

package/src/transformers/posthtmlMso.js

@@ -1,14 +0,0 @@
-import posthtml from 'posthtml'
-import posthtmlMso from 'posthtml-mso'
-
-export default function posthtmlPlugin(options = {}) {
-  return posthtmlMso(options)
-}
-
-export async function useMso(html = '', options = {}, posthtmlOptions = {}) {
-  return posthtml([
-    posthtmlPlugin(options)
-  ])
-    .process(html, posthtmlOptions)
-    .then(result => result.html)
-}

package/src/transformers/prettify.js

@@ -1,29 +0,0 @@
-import pretty from 'pretty'
-import posthtml from 'posthtml'
-import { defu as merge } from 'defu'
-import { render } from 'posthtml-render'
-import { parser as parse } from 'posthtml-parser'
-import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
-
-const posthtmlPlugin = (options = {}) => tree => {
-  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
-  }
-
-  const config = merge(options, defaultConfig)
-
-  return parse(pretty(render(tree), config), getPosthtmlOptions())
-}
-
-export default posthtmlPlugin
-
-export async function prettify(html = '', options = {}, posthtmlOptions = {}) {
-  return posthtml([
-    posthtmlPlugin(options)
-  ])
-    .process(html, posthtmlOptions)
-    .then(result => result.html)
-}

package/src/transformers/preventWidows.js

@@ -1,37 +0,0 @@
-import posthtml from 'posthtml'
-import posthtmlWidows from 'posthtml-widows'
-import { defu as merge } from 'defu'
-
-export default function posthtmlPlugin(options = {}) {
-  options = merge(options, {
-    minWords: 3
-  })
-
-  // Custom ignores
-  const mappings = [
-    // MSO comments
-    {
-      start: '<!--[',
-      end: ']>'
-    },
-    // <![endif]-->
-    {
-      start: '<![',
-      end: ']--><'
-    }
-  ]
-
-  if (Array.isArray(options.ignore)) {
-    options.ignore = options.ignore.concat(mappings)
-  }
-
-  return posthtmlWidows(options)
-}
-
-export async function preventWidows(html = '', options = {}, posthtmlOptions = {}) {
-  return posthtml([
-    posthtmlPlugin(options)
-  ])
-    .process(html, posthtmlOptions)
-    .then(result => result.html)
-}

package/src/transformers/purge.js

@@ -1,56 +0,0 @@
-import posthtml from 'posthtml'
-import { comb } from 'email-comb'
-import get from 'lodash-es/get.js'
-import { defu as merge } from 'defu'
-import { render } from 'posthtml-render'
-import { parser as parse } from 'posthtml-parser'
-import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
-
-const posthtmlPlugin = options => tree => {
-  const defaultSafelist = [
-    '*body*', // Gmail
-    '*gmail*', // Gmail
-    '*apple*', // Apple Mail
-    '*ios*', // Mail on iOS
-    '*ox-*', // Open-Xchange
-    '*outlook*', // Outlook.com
-    '[data-ogs*', // Outlook.com
-    '*bloop_container*', // Airmail
-    '*Singleton*', // Apple Mail 10
-    '*unused', // Notes 8
-    '*moz-text-html*', // Thunderbird
-    '*mail-detail-content*', // Comcast, Libero webmail
-    '*mail-content-*', // Notion
-    '*edo*', // Edison (all)
-    '#*', // Freenet uses #msgBody
-    '*lang*', // Fenced code blocks
-    '*ShadowHTML*', // Superhuman
-    '*spark*', // Spark
-    '*at-*', // Safe class names for container queries
-  ]
-
-  const defaultOptions = {
-    backend: [
-      { heads: '{{', tails: '}}' },
-      { heads: '{%', tails: '%}' },
-    ],
-    whitelist: [...defaultSafelist, ...get(options, 'safelist', [])]
-  }
-
-  options = merge(options, defaultOptions)
-
-  const posthtmlConfig = getPosthtmlOptions()
-  const { result: html } = comb(render(tree), options)
-
-  return parse(html, posthtmlConfig)
-}
-
-export default posthtmlPlugin
-
-export async function purge(html = '', pluginOptions = {}, posthtmlOptions = {}) {
-  return posthtml([
-    posthtmlPlugin(pluginOptions)
-  ])
-    .process(html, posthtmlOptions)
-    .then(result => result.html)
-}

package/src/transformers/removeAttributes.js

@@ -1,55 +0,0 @@
-import posthtml from 'posthtml'
-import get from 'lodash-es/get.js'
-import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
-
-/**
- * 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 posthtmlPlugin = (attributes = [], posthtmlOptions = {}) => tree => {
-  attributes.push('style', 'class')
-
-  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)
-}
-
-export default posthtmlPlugin
-
-export async function removeAttributes(html = '', attributes = [], posthtmlOptions = {}) {
-  return posthtml([
-    posthtmlPlugin(attributes, getPosthtmlOptions(posthtmlOptions))
-  ])
-    .process(html, getPosthtmlOptions())
-    .then(result => result.html)
-}

package/src/transformers/replaceStrings.js

@@ -1,37 +0,0 @@
-import posthtml from 'posthtml'
-import { render } from 'posthtml-render'
-import isEmpty from 'lodash-es/isEmpty.js'
-import { parser as parse } from 'posthtml-parser'
-import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
-
-const posthtmlPlugin = (replacements = {}) => tree => {
-  if (!isEmpty(replacements)) {
-    const regexes = Object.entries(replacements).map(([k, v]) => [new RegExp(k, 'gi'), v])
-    const patterns = new RegExp(Object.keys(replacements).join('|'), 'gi')
-
-    return parse(
-      render(tree).replace(patterns, matched => {
-        for (const [regex, replacement] of regexes) {
-          if (regex.test(matched)) {
-            return matched.replace(regex, replacement)
-          }
-        }
-
-        return matched
-      }),
-      getPosthtmlOptions()
-    )
-  }
-
-  return tree
-}
-
-export default posthtmlPlugin
-
-export async function replaceStrings(html = '', replacements = {}, posthtmlOptions = {}) {
-  return posthtml([
-    posthtmlPlugin(replacements)
-  ])
-    .process(html, posthtmlOptions)
-    .then(result => result.html)
-}

package/src/transformers/safeClassNames.js

@@ -1,29 +0,0 @@
-import posthtml from 'posthtml'
-import { defu as merge } from 'defu'
-import posthtmlSafeClassNames from 'posthtml-safe-class-names'
-
-export default function posthtmlPlugin(options = {}) {
-  // If options is boolean, convert to object
-  if (typeof options === 'boolean') {
-    options = {}
-  }
-
-  // Default options
-  options = merge({
-    replacements: {
-      '{': '{',
-      '}': '}',
-      '&': '&',
-    }
-  }, options)
-
-  return posthtmlSafeClassNames(options)
-}
-
-export async function safeClassNames(html = '', options = {}, posthtmlOptions = {}) {
-  return posthtml([
-    posthtmlPlugin(options)
-  ])
-    .process(html, posthtmlOptions)
-    .then(result => result.html)
-}

package/src/transformers/shorthandCss.js

@@ -1,20 +0,0 @@
-import posthtml from 'posthtml'
-import posthtmlMergeLonghand from 'posthtml-postcss-merge-longhand'
-
-export default function posthtmlPlugin(options = {}) {
-  if (Array.isArray(options.tags)) {
-    return posthtmlMergeLonghand({
-      tags: options.tags,
-    })
-  }
-
-  return posthtmlMergeLonghand()
-}
-
-export async function shorthandCSS(html = '', options = {}, posthtmlOptions = {}) {
-  return posthtml([
-    posthtmlPlugin(options)
-  ])
-    .process(html, posthtmlOptions)
-    .then(result => result.html)
-}

package/src/transformers/sixHex.js

@@ -1,30 +0,0 @@
-import posthtml from 'posthtml'
-import { conv } from 'color-shorthand-hex-to-six-digit'
-
-const posthtmlPlugin = () => tree => {
-  const targets = new Set(['bgcolor', 'color'])
-
-  const process = node => {
-    if (node.attrs) {
-      Object.entries(node.attrs).forEach(([name, value]) => {
-        if (targets.has(name) && node.attrs[name]) {
-          node.attrs[name] = conv(value)
-        }
-      })
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-}
-
-export default posthtmlPlugin
-
-export async function sixHEX(html = '', posthtmlOptions = {}) {
-  return posthtml([
-    posthtmlPlugin()
-  ])
-    .process(html, posthtmlOptions)
-    .then(result => result.html)
-}