@maizzle/framework 5.0.0-beta.8 → 5.0.0

package/src/transformers/inline.js

@@ -2,19 +2,19 @@ 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 { 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 { parseCSSRule } from '../utils/string.js'
 import { useAttributeSizes } from './useAttributeSizes.js'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
 const posthtmlPlugin = (options = {}) => tree => {
-  return inline(render(tree), options).then(html => parse(html))
+  return inline(render(tree), options).then(html => parse(html, getPosthtmlOptions()))
 }
 
 export default posthtmlPlugin
@@ -28,10 +28,28 @@ export async function inline(html = '', options = {}) {
   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)
+  options.safelist = new Set([
+    ...get(options, '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)
+      '#msgBody', // Freenet uses #msgBody
+      '.lang' // Fenced code blocks
+    ],
+  ])
 
   juice.styleToAttribute = get(options, 'styleToAttribute', {})
   juice.applyWidthAttributes = get(options, 'applyWidthAttributes', true)
@@ -46,12 +64,20 @@ export async function inline(html = '', options = {}) {
     })
   }
 
-  const $ = cheerio.load(html, { decodeEntities: false, _useHtmlParser2: true })
+  const $ = cheerio.load(html, {
+    xml: {
+      decodeEntities: false,
+      xmlMode: false,
+    }
+  })
 
   // Add a `data-embed` attribute to style tags that have the embed attribute
-  $('style[embed]').each((i, el) => {
+  $('style[embed]:not([data-embed])').each((i, el) => {
     $(el).attr('data-embed', '')
   })
+  $('style[data-embed]:not([embed])').each((i, el) => {
+    $(el).attr('embed', '')
+  })
 
   /**
    * Inline the CSS
@@ -97,51 +123,26 @@ export async function inline(html = '', options = {}) {
         }
       )
 
-    const preservedClasses = new Set()
+    // 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)
+
     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)
+          options.safelist.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, {precision: 2}) : 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({
@@ -150,14 +151,13 @@ export async function inline(html = '', options = {}) {
       })
 
       // Preserve pseudo selectors
-      // TODO: revisit pseudos list
       if ([':hover', ':active', ':focus', ':visited', ':link', ':before', ':after'].some(i => selector.includes(i))) {
-        preservedClasses.add(selector)
+        options.safelist.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)) {
+        if (!options.safelist.has(selector) && !combinedRegex.test(selector)) {
           rule.remove()
         }
 
@@ -182,10 +182,6 @@ export async function inline(html = '', options = {}) {
             inlineStyles = styleAttr.split(';').reduce((acc, i) => {
               let { property, value } = parseCSSRule(i)
 
-              if (value && options.resolveCalc) {
-                value = value.includes('calc') ? calc(value, {precision: 2}) : 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,
@@ -216,7 +212,7 @@ export async function inline(html = '', options = {}) {
             // 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))) {
+              if (![...options.safelist].some(item => item.includes(name))) {
                 remove(classList, classToRemove => name.includes(classToRemove))
               }
 

package/src/transformers/markdown.js

@@ -1,19 +1,26 @@
 import posthtml from 'posthtml'
-import { defu as merge } from 'defu'
 import md from 'posthtml-markdownit'
-import posthtmlConfig from '../posthtml/defaultConfig.js'
 
-export async function markdown(html = '', options = {}, posthtmlOptions = {}) {
+export async function markdown(input = '', 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
+   * 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
    */
-  html = options.manual ? html : `<md>${html}</md>`
+  input = options.manual ? input : `<md>${input}</md>`
 
   return posthtml([
     md(options)
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(input, posthtmlOptions)
     .then(result => result.html)
 }

package/src/transformers/minify.js

@@ -3,16 +3,17 @@ 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'
+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)
+  return parse(html, posthtmlConfig)
 }
 
 export default posthtmlPlugin
@@ -21,6 +22,6 @@ export async function minify(html = '', options = {}, posthtmlOptions = {}) {
   return posthtml([
     posthtmlPlugin(options)
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(html, posthtmlOptions)
     .then(result => result.html)
 }

package/src/transformers/posthtmlMso.js

@@ -1,7 +1,5 @@
 import posthtml from 'posthtml'
-import { defu as merge } from 'defu'
 import posthtmlMso from 'posthtml-mso'
-import posthtmlConfig from '../posthtml/defaultConfig.js'
 
 export default function posthtmlPlugin(options = {}) {
   return posthtmlMso(options)
@@ -11,6 +9,6 @@ export async function useMso(html = '', options = {}, posthtmlOptions = {}) {
   return posthtml([
     posthtmlPlugin(options)
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(html, posthtmlOptions)
     .then(result => result.html)
 }

package/src/transformers/prettify.js

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

package/src/transformers/preventWidows.js

@@ -1,87 +1,37 @@
 import posthtml from 'posthtml'
+import posthtmlWidows from 'posthtml-widows'
 import { defu as merge } from 'defu'
-import { removeWidows } from 'string-remove-widows'
-import posthtmlConfig from '../posthtml/defaultConfig.js'
 
-const posthtmlPlugin = (options = {}) => tree => {
+export default function posthtmlPlugin(options = {}) {
   options = merge(options, {
-    minWordCount: 3,
-    attrName: 'prevent-widows'
+    minWords: 3
   })
 
-  // Ignore defaults
+  // Custom ignores
   const mappings = [
-    // Jinja-like
-    {
-      heads: '{{',
-      tails: '}}'
-    },
-    {
-      heads: ['{% if', '{%- if'],
-      tails: ['{% endif', '{%- endif']
-    },
-    {
-      heads: ['{% for', '{%- for'],
-      tails: ['{% endfor', '{%- endfor']
-    },
-    {
-      heads: ['{%', '{%-'],
-      tails: ['%}', '-%}']
-    },
-    {
-      heads: '{#',
-      tails: '#}'
-    },
-    // ASP/Hexo-like
-    {
-      heads: ['<%', '<%=', '<%-'],
-      tails: ['%>', '=%>', '-%>']
-    },
     // MSO comments
     {
-      heads: '<!--[',
-      tails: ']>'
+      start: '<!--[',
+      end: ']>'
     },
     // <![endif]-->
     {
-      heads: '<![',
-      tails: ']--><'
+      start: '<![',
+      end: ']--><'
     }
   ]
 
   if (Array.isArray(options.ignore)) {
-    options.ignore.forEach(pair => mappings.push(pair))
-  }
-
-  if (typeof options.ignore !== 'string') {
-    options.ignore = mappings
-  }
-
-  const process = node => {
-    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))
-      delete node.attrs[options.attrName]
-    }
-
-    return node
+    options.ignore = options.ignore.concat(mappings)
   }
 
-  return tree.walk(process)
+  return posthtmlWidows(options)
 }
 
-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
+  return posthtml([
+    posthtmlPlugin(options)
+  ])
+    .process(html, posthtmlOptions)
+    .then(result => result.html)
 }

package/src/transformers/{comb.js → purge.js}

@@ -1,10 +1,10 @@
 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 { comb as emailComb } from 'email-comb'
 import { parser as parse } from 'posthtml-parser'
-import posthtmlConfig from '../posthtml/defaultConfig.js'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
 const posthtmlPlugin = options => tree => {
   const defaultSafelist = [
@@ -30,22 +30,23 @@ const posthtmlPlugin = options => tree => {
       { heads: '{{', tails: '}}' },
       { heads: '{%', tails: '%}' },
     ],
-    whitelist: [...defaultSafelist, ...get(options, 'whitelist', [])]
+    whitelist: [...defaultSafelist, ...get(options, 'safelist', [])]
   }
 
   options = merge(options, defaultOptions)
 
-  const { result: html } = emailComb(render(tree), options)
+  const posthtmlConfig = getPosthtmlOptions()
+  const { result: html } = comb(render(tree), options)
 
-  return parse(html)
+  return parse(html, posthtmlConfig)
 }
 
 export default posthtmlPlugin
 
-export async function comb(html = '', options = {}, posthtmlOptions = {}) {
+export async function purge(html = '', pluginOptions = {}, posthtmlOptions = {}) {
   return posthtml([
-    posthtmlPlugin(options)
+    posthtmlPlugin(pluginOptions)
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(html, posthtmlOptions)
     .then(result => result.html)
 }

package/src/transformers/removeAttributes.js

@@ -1,7 +1,6 @@
 import posthtml from 'posthtml'
 import get from 'lodash-es/get.js'
-import { defu as merge } from 'defu'
-import posthtmlConfig from '../posthtml/defaultConfig.js'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
 /**
  * Remove empty attributes with PostHTML
@@ -49,8 +48,8 @@ export default posthtmlPlugin
 
 export async function removeAttributes(html = '', attributes = [], posthtmlOptions = {}) {
   return posthtml([
-    posthtmlPlugin(attributes, merge(posthtmlOptions, posthtmlConfig))
+    posthtmlPlugin(attributes, getPosthtmlOptions(posthtmlOptions))
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(html, getPosthtmlOptions())
     .then(result => result.html)
 }

package/src/transformers/replaceStrings.js

@@ -1,9 +1,8 @@
 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'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
 const posthtmlPlugin = (replacements = {}) => tree => {
   if (!isEmpty(replacements)) {
@@ -14,10 +13,13 @@ const posthtmlPlugin = (replacements = {}) => tree => {
       render(tree).replace(patterns, matched => {
         for (const [regex, replacement] of regexes) {
           if (regex.test(matched)) {
-            return replacement
+            return matched.replace(regex, replacement)
           }
         }
-      })
+
+        return matched
+      }),
+      getPosthtmlOptions()
     )
   }
 
@@ -30,6 +32,6 @@ export async function replaceStrings(html = '', replacements = {}, posthtmlOptio
   return posthtml([
     posthtmlPlugin(replacements)
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(html, posthtmlOptions)
     .then(result => result.html)
 }

package/src/transformers/safeClassNames.js

@@ -1,6 +1,5 @@
 import posthtml from 'posthtml'
 import { defu as merge } from 'defu'
-import posthtmlConfig from '../posthtml/defaultConfig.js'
 import posthtmlSafeClassNames from 'posthtml-safe-class-names'
 
 export default function posthtmlPlugin(options = {}) {
@@ -24,6 +23,6 @@ export async function safeClassNames(html = '', options = {}, posthtmlOptions =
   return posthtml([
     posthtmlPlugin(options)
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(html, posthtmlOptions)
     .then(result => result.html)
 }

package/src/transformers/shorthandCss.js

@@ -1,6 +1,4 @@
 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 = {}) {
@@ -17,6 +15,6 @@ export async function shorthandCSS(html = '', options = {}, posthtmlOptions = {}
   return posthtml([
     posthtmlPlugin(options)
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(html, posthtmlOptions)
     .then(result => result.html)
 }

package/src/transformers/sixHex.js

@@ -1,7 +1,5 @@
 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'
 
 const posthtmlPlugin = () => tree => {
   const targets = new Set(['bgcolor', 'color'])
@@ -27,6 +25,6 @@ export async function sixHEX(html = '', posthtmlOptions = {}) {
   return posthtml([
     posthtmlPlugin()
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(html, posthtmlOptions)
     .then(result => result.html)
 }

package/src/transformers/template.js

@@ -1,19 +1,19 @@
-const posthtmlPlugin = (() => tree => {
+const posthtmlPlugin = () => tree => {
   const process = node => {
     // Return the original node if it doesn't have a tag
     if (!node.tag) {
       return node
     }
 
-    // Preserve <template> tags marked as such
-    if (node.tag === 'template' && node.attrs?.preserve) {
-      node.attrs.preserve = false
+    if (node.tag === 'template') {
+      // Preserve <template> tags marked as such
+      if ('attrs' in node && 'preserve' in node.attrs) {
+        node.attrs.preserve = false
 
-      return node
-    }
+        return node
+      }
 
-    // Replace <template> tags with their content
-    if (node.tag === 'template') {
+      // Remove the <template> tag
       node.tag = false
     }
 
@@ -21,6 +21,6 @@ const posthtmlPlugin = (() => tree => {
   }
 
   return tree.walk(process)
-})
+}
 
 export default posthtmlPlugin

package/src/transformers/urlParameters.js

@@ -1,8 +1,6 @@
 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'
 
 export default function posthtmlPlugin(options = {}) {
   const { _options, ...parameters } = options
@@ -17,6 +15,6 @@ export async function addURLParams(html = '', options = {}, posthtmlOptions = {}
   return posthtml([
     posthtmlPlugin(options)
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(html, posthtmlOptions)
     .then(result => result.html)
 }

package/src/transformers/useAttributeSizes.js

@@ -1,8 +1,6 @@
 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) {
@@ -60,6 +58,6 @@ export async function useAttributeSizes(html = '', mappings = {}, posthtmlOption
   return posthtml([
     posthtmlPlugin(mappings)
   ])
-    .process(html, merge(posthtmlOptions, posthtmlConfig))
+    .process(html, posthtmlOptions)
     .then(result => result.html)
 }

package/src/utils/getConfigByFilePath.js

@@ -117,6 +117,16 @@ export async function readFileConfig(config) {
       }
     }
 
+    /**
+     * Override the `content` key in `baseConfig` with the one in `envConfig`.
+     *
+     * This is done so that each build uses its own `content` paths, in
+     * order to avoid compiling unnecessary files.
+     */
+    if (Array.isArray(envConfig.content)) {
+      baseConfig.content = []
+    }
+
     return merge(envConfig, baseConfig)
   } catch (error) {
     throw new Error('Could not compute config')

package/src/utils/node.js

@@ -1,13 +1,7 @@
-import path from 'pathe'
 import os from 'node:os'
 import gm from 'gray-matter'
 import pico from 'picocolors'
 import { humanFileSize } from './string.js'
-import {
-  copyFile,
-  mkdir,
-  readdir
-} from 'node:fs/promises'
 
 // Return a local IP address
 export function getLocalIP() {
@@ -72,20 +66,3 @@ export function parseFrontMatter(html) {
   const { content, data, matter, stringify } = gm(html, {})
   return { content, data, matter, stringify }
 }
-
-export async function copyDirectory(src, dest) {
-  await mkdir(dest, { recursive: true })
-
-  const entries = await readdir(src, { withFileTypes: true })
-
-  for (const entry of entries) {
-    const srcPath = path.join(src, entry.name)
-    const destPath = path.join(dest, entry.name)
-
-    if (entry.isDirectory()) {
-      await copyDirectory(srcPath, destPath) // Recursively copy subdirectories
-    } else {
-      await copyFile(srcPath, destPath) // Copy files
-    }
-  }
-}