@maizzle/framework 4.8.8 → 5.0.0-beta.0

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)
 }

package/src/transformers/prettify.js

@@ -1,8 +1,10 @@
-/* eslint-disable camelcase */
-const pretty = require('pretty')
-const {get, merge, isEmpty, isObject} = require('lodash')
+import pretty from 'pretty'
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import { render } from 'posthtml-render'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
-module.exports = async (html, config = {}, direct = false) => {
+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
@@ -10,18 +12,17 @@ module.exports = async (html, config = {}, direct = false) => {
     extra_liners: [] // Don't add extra new line before any tag
   }
 
-  config = direct ? config : get(config, 'prettify')
+  const config = merge(options, defaultConfig)
 
-  // Don't prettify if not explicitly enabled in config
-  if (!config || (isObject(config) && isEmpty(config))) {
-    return html
-  }
-
-  if (typeof config === 'boolean' && config) {
-    return pretty(html, defaultConfig)
-  }
+  return pretty(render(tree), config)
+}
 
-  config = merge(defaultConfig, config)
+export default posthtmlPlugin
 
-  return pretty(html, config)
+export async function prettify(html = '', options = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(options)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
 }

package/src/transformers/preventWidows.js

@@ -1,22 +1,13 @@
-const posthtml = require('posthtml')
-const {get, merge, isEmpty} = require('lodash')
-const {removeWidows} = require('string-remove-widows')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import { removeWidows } from 'string-remove-widows'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
-module.exports = async (html, config = {}) => {
-  if (isEmpty(config)) {
-    return removeWidows(html).res
-  }
-
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-
-  return posthtml([removeWidowsPlugin(config)]).process(html, posthtmlOptions).then(result => result.html)
-}
-
-const removeWidowsPlugin = options => tree => {
-  const {attrName = 'prevent-widows', ...removeWidowsOptions} = get(options, 'widowWords', options)
-
-  removeWidowsOptions.minWordCount = removeWidowsOptions.minWordCount || 3
+const posthtmlPlugin = (options = {}) => tree => {
+  options = merge(options, {
+    minWordCount: 3,
+    attrName: 'prevent-widows'
+  })
 
   // Ignore defaults
   const mappings = [
@@ -58,22 +49,19 @@ const removeWidowsPlugin = options => tree => {
     }
   ]
 
-  if (Array.isArray(removeWidowsOptions.ignore)) {
-    for (const pair of removeWidowsOptions.ignore) {
-      mappings.push(pair)
-    }
+  if (Array.isArray(options.ignore)) {
+    options.ignore.forEach(pair => mappings.push(pair))
   }
 
-  if (typeof removeWidowsOptions.ignore !== 'string') {
-    removeWidowsOptions.ignore = mappings
+  if (typeof options.ignore !== 'string') {
+    options.ignore = mappings
   }
 
   const process = node => {
-    if (node.attrs && Object.keys(node.attrs).includes(attrName)) {
-      const widowsRemovedString = removeWidows(tree.render(node.content), removeWidowsOptions).res
-
+    if (node.attrs && Object.keys(node.attrs).includes(options.attrName)) {
+      const widowsRemovedString = removeWidows(tree.render(node.content), options).res
       node.content = tree.render(tree.parser(widowsRemovedString))
-      node.attrs[attrName] = false
+      delete node.attrs[options.attrName]
     }
 
     return node
@@ -81,3 +69,19 @@ const removeWidowsPlugin = options => tree => {
 
   return tree.walk(process)
 }
+
+export default posthtmlPlugin
+
+export async function preventWidows(html = '', options = {}, posthtmlOptions = {}) {
+  // Apply only to elements that contain the `prevent-widows` attribute
+  if (options.withAttributes) {
+    return posthtml([
+      posthtmlPlugin(options)
+    ])
+      .process(html, merge(posthtmlOptions, posthtmlConfig))
+      .then(result => result.html)
+  }
+
+  // Apply to all elements
+  return removeWidows(html, options).res
+}

package/src/transformers/removeAttributes.js

@@ -1,19 +1,7 @@
-const posthtml = require('posthtml')
-const {get, merge} = require('lodash')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const attributes = direct ? (Array.isArray(config) ? [...config] : []) : get(config, 'removeAttributes', [])
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-
-  attributes.push('style', 'class')
-
-  html = await posthtml([
-    removeAttributes(attributes, posthtmlOptions)
-  ]).process(html, posthtmlOptions).then(result => result.html)
-
-  return html
-}
+import posthtml from 'posthtml'
+import get from 'lodash-es/get.js'
+import { defu as merge } from 'defu'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
 /**
  * Remove empty attributes with PostHTML
@@ -26,7 +14,9 @@ module.exports = async (html, config = {}, direct = false) => {
  *
  * Condition 3: same as 2, but for regular expressions
  */
-const removeAttributes = (attributes = {}, posthtmlOptions = {}) => tree => {
+const posthtmlPlugin = (attributes = [], posthtmlOptions = {}) => tree => {
+  attributes.push('style', 'class')
+
   const process = node => {
     const normalizedAttrs = attributes.map(attribute => {
       return {
@@ -36,7 +26,7 @@ const removeAttributes = (attributes = {}, posthtmlOptions = {}) => tree => {
     })
 
     if (node.attrs) {
-      for (const attr of normalizedAttrs) {
+      normalizedAttrs.forEach(attr => {
         const targetAttrValue = get(node.attrs, attr.name)
 
         if (
@@ -46,7 +36,7 @@ const removeAttributes = (attributes = {}, posthtmlOptions = {}) => tree => {
         ) {
           node.attrs[attr.name] = false
         }
-      }
+      })
     }
 
     return node
@@ -54,3 +44,13 @@ const removeAttributes = (attributes = {}, posthtmlOptions = {}) => tree => {
 
   return tree.walk(process)
 }
+
+export default posthtmlPlugin
+
+export async function removeAttributes(html = '', attributes = [], posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(attributes, merge(posthtmlOptions, posthtmlConfig))
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
+}

package/src/transformers/replaceStrings.js

@@ -1,14 +1,35 @@
-const {get, isEmpty} = require('lodash')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const replacements = direct ? config : get(config, 'replaceStrings', {})
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import { render } from 'posthtml-render'
+import isEmpty from 'lodash-es/isEmpty.js'
+import { parser as parse } from 'posthtml-parser'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
+const posthtmlPlugin = (replacements = {}) => tree => {
   if (!isEmpty(replacements)) {
-    for (const [k, v] of Object.entries(replacements)) {
-      const regex = new RegExp(k, 'gi')
-      html = html.replace(regex, v)
-    }
+    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 replacement
+          }
+        }
+      })
+    )
   }
 
-  return html
+  return tree
+}
+
+export default posthtmlPlugin
+
+export async function replaceStrings(html = '', replacements = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(replacements)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
 }

package/src/transformers/safeClassNames.js

@@ -1,29 +1,29 @@
-const posthtml = require('posthtml')
-const {get, merge, isEmpty} = require('lodash')
-const safeClassNames = require('posthtml-safe-class-names')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
+import posthtmlSafeClassNames from 'posthtml-safe-class-names'
 
-module.exports = async (html, config = {}, direct = false) => {
-  /*
-   * Don't run when:
-   * - `config` is falsy or empty
-   * - developing locally and `safeClassNames` is not explicitly `true`
-   * - `safeClassNames` is explicitly `false`
-   */
-  if (
-    !config
-    || isEmpty(config)
-    || (get(config, 'env') === 'local' && get(config, 'safeClassNames') !== true)
-    || get(config, 'safeClassNames') === false
-  ) {
-    return html
+export default function posthtmlPlugin(options = {}) {
+  // If options is boolean, convert to object
+  if (typeof options === 'boolean') {
+    options = {}
   }
 
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-  const replacements = direct ? config : get(config, 'safeClassNames', {
-    '{': '{',
-    '}': '}'
-  })
+  // Default options
+  options = merge({
+    replacements: {
+      '{': '{',
+      '}': '}'
+    }
+  }, options)
 
-  return posthtml([safeClassNames({replacements})]).process(html, posthtmlOptions).then(result => result.html)
+  return posthtmlSafeClassNames(options)
+}
+
+export async function safeClassNames(html = '', options = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(options)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
 }

package/src/transformers/shorthandCss.js

@@ -0,0 +1,22 @@
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
+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, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
+}

package/src/transformers/sixHex.js

@@ -1,28 +1,18 @@
-const posthtml = require('posthtml')
-const {get, merge} = require('lodash')
-const {conv} = require('color-shorthand-hex-to-six-digit')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
+import posthtml from 'posthtml'
+import { defu as merge } from 'defu'
+import { conv } from 'color-shorthand-hex-to-six-digit'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
-module.exports = async (html, config = {}) => {
-  if (get(config, 'sixHex') === false) {
-    return html
-  }
-
-  const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-
-  return posthtml([sixHex()]).process(html, posthtmlOptions).then(result => result.html)
-}
-
-const sixHex = () => tree => {
+const posthtmlPlugin = () => tree => {
   const targets = new Set(['bgcolor', 'color'])
 
   const process = node => {
     if (node.attrs) {
-      for (const [name, value] of Object.entries(node.attrs)) {
+      Object.entries(node.attrs).forEach(([name, value]) => {
         if (targets.has(name) && node.attrs[name]) {
           node.attrs[name] = conv(value)
         }
-      }
+      })
     }
 
     return node
@@ -30,3 +20,13 @@ const sixHex = () => tree => {
 
   return tree.walk(process)
 }
+
+export default posthtmlPlugin
+
+export async function sixHEX(html = '', posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin()
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
+}

package/src/transformers/urlParameters.js

@@ -1,20 +1,22 @@
-const posthtml = require('posthtml')
-const {get, merge, isEmpty} = require('lodash')
-const urlParams = require('posthtml-url-parameters')
-const defaultConfig = require('../generators/posthtml/defaultConfig')
+import posthtml from 'posthtml'
+import get from 'lodash-es/get.js'
+import { defu as merge } from 'defu'
+import urlParameters from 'posthtml-url-parameters'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
 
-module.exports = async (html, config = {}, direct = false) => {
-  const urlParameters = direct ? config : get(config, 'urlParameters', {})
+export default function posthtmlPlugin(options = {}) {
+  const { _options, ...parameters } = options
+  const tags = get(_options, 'tags', ['a'])
+  const strict = get(_options, 'strict', true)
+  const qs = get(_options, 'qs', { encode: false })
 
-  if (!isEmpty(urlParameters)) {
-    const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
-    const {_options, ...parameters} = urlParameters
-    const tags = get(_options, 'tags', ['a'])
-    const strict = get(_options, 'strict', true)
-    const qs = get(_options, 'qs', {encode: false})
-
-    return posthtml([urlParams({parameters, tags, qs, strict})]).process(html, posthtmlOptions).then(result => result.html)
-  }
+  return urlParameters({ parameters, tags, qs, strict })
+}
 
-  return html
+export async function addURLParams(html = '', options = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(options)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
 }

package/src/transformers/useAttributeSizes.js

@@ -0,0 +1,65 @@
+import postcss from 'postcss'
+import posthtml from 'posthtml'
+import get from 'lodash-es/get.js'
+import { defu as merge } from 'defu'
+import posthtmlConfig from '../posthtml/defaultConfig.js'
+
+const posthtmlPlugin = (mappings = {}) => tree => {
+  if (!Object.keys(mappings).length) {
+    return tree
+  }
+
+  // Normalize tags in mappings by lowercasing them
+  for (const key in mappings) {
+    if (Array.isArray(mappings[key])) {
+      mappings[key] = mappings[key].map(value => value.toLowerCase())
+    }
+  }
+
+  const process = node => {
+    // Check if the node is defined in mappings
+    if (
+      get(mappings, 'width', []).includes(node.tag)
+      || get(mappings, 'height', []).includes(node.tag)
+    ) {
+      // Check if the node has an inline CSS property equal to one of the keys in mappings
+      if (node.attrs.style) {
+        const { root } = postcss().process(`${node.attrs.style}`, { from: undefined })
+
+        root.walkDecls(decl => {
+          if (mappings.width.includes(node.tag) && decl.prop === 'width') {
+            // Set its value as an attribute on the node; the attribute name is the key in mappings
+            node.attrs.width = decl.value.replace('px', '')
+            // Remove the inline CSS property from the declaration
+            decl.remove()
+          }
+
+          if (mappings.height.includes(node.tag) && decl.prop === 'height') {
+            // Set its value as an attribute on the node; the attribute name is the key in mappings
+            node.attrs.height = decl.value.replace('px', '')
+            // Remove the inline CSS property from the declaration
+            decl.remove()
+          }
+        })
+
+        // Set the remaining inline CSS as the `style` attribute on the node
+        // If there are no remaining declarations, remove the `style` attribute
+        node.attrs.style = root.toString().trim() || false
+      }
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+}
+
+export default posthtmlPlugin
+
+export async function useAttributeSizes(html = '', mappings = {}, posthtmlOptions = {}) {
+  return posthtml([
+    posthtmlPlugin(mappings)
+  ])
+    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .then(result => result.html)
+}