@maizzle/framework 4.8.7 → 5.0.0-beta.0

package/src/transformers/inlineCss.js

@@ -1,42 +0,0 @@
-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', {})
-  // Default `removeStyleTags` to false so we can preserve
-  // CSS selectors that are not present in the HTML
-  const removeStyleTags = get(options, 'removeStyleTags', false)
-  const css = get(config, 'customCSS', false)
-
-  if (get(config, 'inlineCSS') === true || !isEmpty(options)) {
-    options.applyAttributesTableElements = true
-    juice.styleToAttribute = get(options, 'styleToAttribute', {})
-
-    juice.widthElements = get(options, 'applyWidthAttributes', []).map(i => i.toUpperCase())
-    juice.heightElements = get(options, 'applyHeightAttributes', []).map(i => i.toUpperCase())
-
-    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, ...options}) :
-      juice(html, {removeStyleTags, ...options})
-
-    return html
-  }
-
-  return html
-}

package/src/transformers/removeInlineBackgroundColor.js

@@ -1,56 +0,0 @@
-const posthtml = require('posthtml')
-const {get, merge, isEmpty} = require('lodash')
-const parseAttrs = require('posthtml-attrs-parser')
-const {toStyleString} = require('../utils/helpers')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const posthtmlOptions = merge(defaultConfig, 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']) {
-      node.attrs.bgcolor = attrs.style['background-color']
-
-      delete attrs.style['background-color']
-
-      node.attrs.style = toStyleString(attrs.style)
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-}

package/src/transformers/removeInlineSizes.js

@@ -1,43 +0,0 @@
-const posthtml = require('posthtml')
-const {get, merge, isEmpty} = require('lodash')
-const parseAttrs = require('posthtml-attrs-parser')
-const {toStyleString} = require('../utils/helpers')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const settings = direct ? config : get(config, 'inlineCSS.keepOnlyAttributeSizes', {})
-
-  if (!isEmpty(settings)) {
-    const posthtmlOptions = merge(defaultConfig, 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 => {
-    Object.entries(mappings).forEach(([attribute, tags]) => {
-      tags = Object.values(tags).map(tag => tag.toLowerCase())
-
-      if (!tags.includes(node.tag)) {
-        return node
-      }
-
-      const attrs = parseAttrs(node.attrs)
-
-      tags.forEach(() => {
-        if (get(node, 'attrs.style')) {
-          delete attrs.style[attribute]
-
-          node.attrs.style = toStyleString(attrs.style)
-        }
-      })
-    })
-
-    return node
-  }
-
-  return tree.walk(process)
-}

package/src/transformers/removeInlinedSelectors.js

@@ -1,100 +0,0 @@
-const postcss = require('postcss')
-const posthtml = require('posthtml')
-const {get, merge, has, remove} = require('lodash')
-const parseAttrs = require('posthtml-attrs-parser')
-const matchHelper = require('posthtml-match-helper')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
-
-module.exports = async (html, config = {}) => {
-  if (get(config, 'removeInlinedSelectors') === false) {
-    return html
-  }
-
-  const options = {
-    posthtml: merge(defaultConfig, get(config, 'build.posthtml.options', {})),
-    removeUnusedCSS: config
-  }
-
-  return posthtml([plugin(options)]).process(html, options.posthtml).then(result => result.html)
-}
-
-const plugin = (options = {}) => tree => {
-  const process = node => {
-    // For each style tag...
-    if (node.tag === 'style') {
-      const {root} = postcss().process(node.content)
-      const preservedClasses = []
-
-      // Preserve selectors in at rules
-      root.walkAtRules(rule => {
-        if (['media', 'supports'].includes(rule.name)) {
-          rule.walkRules(rule => {
-            preservedClasses.push(rule.selector)
-          })
-        }
-      })
-
-      root.walkRules(rule => {
-        const {selector} = rule
-        const prop = get(rule.nodes[0], 'prop')
-
-        // Preserve pseudo selectors
-        if (selector.includes(':')) {
-          preservedClasses.push(selector)
-        }
-
-        try {
-          const safelist = get(options.removeUnusedCSS, 'whitelist', [])
-
-          // If we find the selector in the HTML...
-          tree.match(matchHelper(selector), n => {
-            // If the selector is safelisted, preserve it
-            if (safelist.some(item => item.endsWith(selector) || item.startsWith(selector))) {
-              preservedClasses.push(selector)
-              return 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 as long as it's not a preserved class
-              if (!preservedClasses.some(item => item.endsWith(selector) || item.startsWith(selector))) {
-                remove(classAttr, classToRemove => selector.includes(classToRemove))
-              }
-
-              // Remove the rule in the <style> tag
-              if (rule.parent.type !== 'atrule') {
-                rule.remove()
-              }
-            }
-
-            n.attrs = parsedAttrs.compose()
-
-            // Fix issue with .compose() automatically quoting attributes with no values
-            Object.entries(n.attrs).forEach(([name, value]) => {
-              if (value === '' && get(options.posthtml, 'recognizeNoValueAttribute') === true) {
-                n.attrs[name] = true
-              }
-            })
-
-            return n
-          })
-        } catch {}
-      })
-
-      node.content = root.toString().trim()
-
-      // Remove <style> tag if it ends up empty after processing
-      if (node.content.length === 0) {
-        node.tag = false
-      }
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-}

package/src/transformers/removeUnusedCss.js

@@ -1,48 +0,0 @@
-const {comb} = require('email-comb')
-const {get, merge, isEmpty, isObject} = require('lodash')
-const removeInlinedClasses = require('./removeInlinedSelectors')
-
-module.exports = async (html, config = {}, direct = false) => {
-  config = direct ? config : get(config, 'removeUnusedCSS')
-
-  // Don't purge CSS if `removeUnusedCSS` is not set
-  if (!config || (isObject(config) && isEmpty(config))) {
-    return html
-  }
-
-  const safelist = [
-    '*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
-    '*edo*', // Edison (all)
-    '#*', // Freenet uses #msgBody
-    '.lang*' // Fenced code blocks
-  ]
-
-  const defaultOptions = {
-    backend: [
-      {heads: '{{', tails: '}}'},
-      {heads: '{%', tails: '%}'}
-    ],
-    whitelist: get(config, 'whitelist', safelist)
-  }
-
-  const options = merge(defaultOptions, config)
-
-  /**
-   * Remove possibly inlined selectors, as long as we're not calling
-   * this function directly, i.e. Maizzle.removeUnusedCSS()
-   *  */
-  html = direct ? html : await removeInlinedClasses(html, options)
-
-  return comb(html, options).result
-}

package/src/transformers/shorthandInlineCSS.js

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

package/src/utils/helpers.js

@@ -1,13 +0,0 @@
-module.exports = {
-  requireUncached: module => {
-    try {
-      delete require.cache[require.resolve(module)]
-      return require(module)
-    } catch {
-      throw new Error(`could not load ${module}`)
-    }
-  },
-  // https://github.com/lukeed/console-clear
-  clearConsole: () => process.stdout.write('\x1B[H\x1B[2J'),
-  toStyleString: (object = {}) => Object.entries(object).map(([k, v]) => `${k}: ${v}`).join('; ')
-}

package/types/baseUrl.d.ts

@@ -1,79 +0,0 @@
-export default interface BaseURLConfig {
-  /**
-  The URL to prepend.
-
-  @default undefined
-  */
-  url: string;
-
-  /**
-  Tags to apply the `url` to. When using this option, the `url` will only be prepended to the specified tags.
-
-  Maizzle uses a [custom set of tags](https://github.com/posthtml/posthtml-base-url/blob/main/lib/index.js#L6-L60) by default.
-
-  @example
-
-  Prepend `url` to all 'source'-like attribute values on image tags, like `src` and `srcset`:
-
-  ```
-  module.exports = {
-    baseURL: {
-      url: 'https://cdn.example.com/',
-      tags: ['img'],
-    },
-  }
-  ```
-
-  With more granular control:
-
-  ```
-  module.exports = {
-    baseURL: {
-      url: 'https://cdn.example.com/',
-      tags: {
-        img: {
-          src: true, // use the value of `url` above
-          srcset: 'https://bar.com/',
-        },
-      },
-    },
-  }
-  ```
-  */
-  tags?: string[] | Record<string, unknown>;
-
-  /**
-  Key-value pairs of attributes and the string to prepend to their existing value.
-
-  @default {}
-
-  @example
-
-  Prepend `https://example.com/` to all `data-url` attribute values:
-
-  ```
-  module.exports = {
-    baseURL: {
-      attributes: {
-        'data-url': 'https://example.com/',
-      },
-    },
-  }
-  ```
-  */
-  attributes?: Record<string, unknown>;
-
-  /**
-  Whether the string defined in `url` should be prepended to `url()` values in CSS `<style>` tags.
-
-  @default true
-  */
-  styleTag?: boolean;
-
-  /**
-  Whether the string defined in `url` should be prepended to `url()` values in inline CSS.
-
-  @default true
-  */
-  inlineCss?: boolean;
-}

package/types/fetch.d.ts

@@ -1,143 +0,0 @@
-import type {Options as GotOptions} from 'got';
-import type ExpressionsConfig from './expressions';
-
-export default interface PostHTMLFetchConfig {
-  /**
-  Supported tag names.
-  Only tags from this array will be processed by the plugin.
-
-  @default ['fetch', 'remote']
-
-  @example
-  ```
-  module.exports = {
-    build: {
-      posthtml: {
-        fetch: {
-          tags: ['get']
-        }
-      }
-    }
-  }
-  ```
-  */
-  tags?: string[];
-
-  /**
-  String representing the attribute name containing the URL to fetch.
-
-  @default 'url'
-
-  @example
-  ```
-  module.exports = {
-    build: {
-      posthtml: {
-        fetch: {
-          attribute: 'from'
-        }
-      }
-    }
-  }
-  ```
-  */
-  attribute?: string;
-
-  /**
-  `posthtml-fetch` uses `got` to fetch data.
-  You can pass options directly to it, inside the `got` object.
-
-  @default {}
-
-  @example
-  ```
-  module.exports = {
-    build: {
-      posthtml: {
-        got: {
-          prefixUrl: '...'
-        }
-      }
-    }
-  }
-  ```
-  */
-  got?: GotOptions;
-
-  /**
-  When set to `true`, this option will preserve the `tag`, i.e. `<fetch>` around the response body.
-
-  @default false
-
-  @example
-  ```
-  module.exports = {
-    build: {
-      posthtml: {
-        fetch: {
-          preserveTag: true
-        }
-      }
-    }
-  }
-  ```
-  */
-  preserveTag?: boolean;
-
-  /**
-  Pass options to `posthtml-expressions`.
-
-  @default {}
-
-  @example
-  ```
-  module.exports = {
-    build: {
-      posthtml: {
-        fetch: {
-          expressions: {
-            delimiters: ['[[', ']]']
-          }
-        }
-      }
-    }
-  }
-  ```
-  */
-  expressions?: ExpressionsConfig;
-
-  /**
-  List of plugins that will be called after/before receiving and processing `locals`.
-
-  @default {}
-
-  @example
-  ```
-  module.exports = {
-    build: {
-      posthtml: {
-        fetch: {
-          plugins: {
-            after(tree) {
-              // Your plugin implementation
-            },
-            before: [
-              tree => {
-                // Your plugin implementation
-              },
-              tree => {
-                // ..
-              }
-            ]
-          }
-        }
-      }
-    }
-  }
-  ```
-  */
-  plugins?: {
-    after?: (tree: any) => void;
-    before?: Array<(tree: any) => void>;
-  };
-}