@maizzle/framework 5.0.0-beta.3 → 5.0.0-beta.31

package/src/transformers/inline.js

@@ -2,18 +2,21 @@ import juice from 'juice'
 import postcss from 'postcss'
 import get from 'lodash-es/get.js'
 import has from 'lodash-es/has.js'
+import { defu as merge } from 'defu'
+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
@@ -31,6 +34,26 @@ export async function inline(html = '', options = {}) {
   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)
@@ -45,12 +68,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
@@ -96,14 +127,20 @@ 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)
         })
       }
     })
@@ -116,7 +153,7 @@ export async function inline(html = '', options = {}) {
       rule.walkDecls(decl => {
         // Resolve calc() values to static values
         if (options.resolveCalc) {
-          decl.value = decl.value.includes('calc(') ? calc(decl.value) : decl.value
+          decl.value = decl.value.includes('calc(') ? calc(decl.value, { precision: 2 }) : decl.value
         }
 
         declarations.add(decl)
@@ -130,10 +167,10 @@ export async function inline(html = '', options = {}) {
        */
       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
-         *  */
+          /**
+           * 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('--')
@@ -151,12 +188,12 @@ 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()
         }
 
@@ -179,10 +216,10 @@ export async function inline(html = '', options = {}) {
 
           if (styleAttr) {
             inlineStyles = styleAttr.split(';').reduce((acc, i) => {
-              let [property, value] = i.split(':').map(i => i.trim())
+              let { property, value } = parseCSSRule(i)
 
               if (value && options.resolveCalc) {
-                value = value.includes('calc') ? calc(value) : value
+                value = value.includes('calc') ? calc(value, { precision: 2 }) : value
               }
 
               if (value && options.preferUnitlessValues) {
@@ -215,7 +252,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/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

@@ -0,0 +1,26 @@
+const posthtmlPlugin = () => tree => {
+  const process = node => {
+    // Return the original node if it doesn't have a tag
+    if (!node.tag) {
+      return node
+    }
+
+    if (node.tag === 'template') {
+      // Preserve <template> tags marked as such
+      if ('attrs' in node && 'preserve' in node.attrs) {
+        node.attrs.preserve = false
+
+        return node
+      }
+
+      // Remove the <template> tag
+      node.tag = false
+    }
+
+    return node
+  }
+
+  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/string.js

@@ -115,3 +115,92 @@ export function humanFileSize(bytes, si=false, dp=2) {
 
   return bytes.toFixed(dp) + ' ' + units[u]
 }
+
+/**
+ * Get the root directories from a list of glob patterns.
+ *
+ * @param {array} patterns List of glob patterns.
+ * @returns {array} List of root directories.
+ */
+export function getRootDirectories(patterns = []) {
+  if (!Array.isArray(patterns)) {
+    return []
+  }
+
+  if (patterns.length === 0) {
+    return []
+  }
+
+  return [...new Set(
+    patterns
+      .filter(pattern => !pattern.startsWith('!'))
+      .map(pattern => {
+        // If the pattern doesn't include wildcards, use it as is
+        if (!pattern.includes('*')) {
+          return pattern.replace(/\/$/, '') // Remove trailing slash if present
+        }
+        // For patterns with wildcards, get the part before the first wildcard
+        const parts = pattern.split(/[*{]/)[0].split('/')
+        return parts.slice(0, -1).join('/')
+      })
+      .filter(Boolean)
+  )]
+}
+
+/**
+ * Get the file extensions from a glob pattern.
+ * @param {*} pattern
+ * @returns
+ */
+export function getFileExtensionsFromPattern(pattern) {
+  const starExtPattern = /\.([^\*\{\}]+)$/ // Matches .ext but not .* or .{ext}
+  const bracePattern = /\.{([^}]+)}$/ // Matches .{ext} or .{ext,ext}
+  const wildcardPattern = /\.\*$/ // Matches .*
+
+  if (wildcardPattern.test(pattern)) {
+    return ['html'] // We default to 'html' if the pattern is a wildcard
+  }
+
+  const braceMatch = pattern.match(bracePattern);
+  if (braceMatch) {
+    return braceMatch[1].split(',') // Split and return extensions inside braces
+  }
+
+  const starExtMatch = pattern.match(starExtPattern)
+  if (starExtMatch) {
+    return [starExtMatch[1]] // Return single extension
+  }
+
+  return ['html'] // No recognizable extension pattern, default to 'html'
+}
+
+export function parseCSSRule(rule) {
+  // Step 1: Trim the input string
+  rule = rule.trim()
+
+  // Step 2: Find the index of the first colon
+  const colonIndex = rule.indexOf(':')
+
+  // Step 3: Extract property and value parts
+  if (colonIndex === -1) {
+    return {
+      property: '',
+      value: ''
+    }
+  }
+
+  const property = rule.slice(0, colonIndex).trim()
+  const value = rule.slice(colonIndex + 1).trim()
+
+  return { property, value }
+}
+
+/**
+ * Normalize a string by removing extra whitespace.
+ *
+ * @param {String} str The string to clean
+ * @returns {String} The cleaned string
+ */
+export function cleanString(str) {
+  return str.replace(/\s+/g, ' ').trim()
+}