@maizzle/framework 5.0.0-beta.29 → 5.0.0-beta.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.29",
+  "version": "5.0.0-beta.30",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -97,9 +97,9 @@
     "@biomejs/biome": "1.9.2",
     "@types/js-beautify": "^1.14.3",
     "@types/markdown-it": "^14.1.2",
-    "@vitest/coverage-v8": "^2.1.1",
+    "@vitest/coverage-v8": "^2.1.5",
     "supertest": "^7.0.0",
-    "vitest": "^2.1.1"
+    "vitest": "^2.1.5"
   },
   "engines": {
     "node": ">=18.20"

package/src/transformers/comb.js

@@ -30,7 +30,7 @@ const posthtmlPlugin = options => tree => {
       { heads: '{{', tails: '}}' },
       { heads: '{%', tails: '%}' },
     ],
-    whitelist: [...defaultSafelist, ...get(options, 'whitelist', [])]
+    whitelist: [...defaultSafelist, ...get(options, 'safelist', [])]
   }
 
   options = merge(options, defaultOptions)

package/src/transformers/inline.js

@@ -2,6 +2,7 @@ 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'
@@ -33,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)
@@ -106,26 +127,8 @@ export async function inline(html = '', options = {}) {
         }
       )
 
-    const preservedClasses = new Set([
-      '.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
-    ])
-
     // Precompile a single regex to match any substring from the preservedClasses set
-    const combinedPattern = Array.from(preservedClasses)
+    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' (|)
 
@@ -137,7 +140,7 @@ export async function inline(html = '', options = {}) {
     root.walkAtRules(rule => {
       if (['media', 'supports'].includes(rule.name)) {
         rule.walkRules(rule => {
-          preservedClasses.add(rule.selector)
+          options.safelist.add(rule.selector)
         })
       }
     })
@@ -185,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) && !combinedRegex.test(selector)) {
+        if (!options.safelist.has(selector) && !combinedRegex.test(selector)) {
           rule.remove()
         }
 
@@ -249,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))
               }