@maizzle/framework 5.0.0-beta.24 → 5.0.0-beta.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.24",
+  "version": "5.0.0-beta.26",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -56,10 +56,10 @@
     "color-shorthand-hex-to-six-digit": "^5.0.16",
     "defu": "^6.1.4",
     "email-comb": "^7.0.21",
-    "express": "^4.19.2",
+    "express": "^4.21.0",
     "fast-glob": "^3.3.2",
     "gray-matter": "^4.0.3",
-    "html-crush": "^6.0.18",
+    "html-crush": "^6.0.19",
     "is-url-superb": "^6.1.0",
     "istextorbinary": "^9.5.0",
     "juice": "^11.0.0",
@@ -67,7 +67,7 @@
     "morphdom": "^2.7.4",
     "ora": "^8.1.0",
     "pathe": "^1.1.2",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.47",
     "postcss-custom-properties": "^14.0.1",
     "postcss-import": "^16.1.0",
     "postcss-safe-parser": "^7.0.0",
@@ -81,7 +81,7 @@
     "posthtml-fetch": "^4.0.0",
     "posthtml-markdownit": "^3.1.0",
     "posthtml-mso": "^3.1.0",
-    "posthtml-parser": "^0.12.0",
+    "posthtml-parser": "^0.12.1",
     "posthtml-postcss": "^1.0.2",
     "posthtml-postcss-merge-longhand": "^3.1.2",
     "posthtml-render": "^3.0.0",
@@ -90,16 +90,16 @@
     "pretty": "^2.0.0",
     "string-remove-widows": "^4.0.22",
     "string-strip-html": "^13.4.8",
-    "tailwindcss": "^3.4.10",
-    "ws": "^8.17.0"
+    "tailwindcss": "^3.4.13",
+    "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
+    "@biomejs/biome": "1.9.2",
     "@types/js-beautify": "^1.14.3",
-    "@types/markdown-it": "^14.1.1",
-    "@vitest/coverage-v8": "^2.0.1",
+    "@types/markdown-it": "^14.1.2",
+    "@vitest/coverage-v8": "^2.1.1",
     "supertest": "^7.0.0",
-    "vitest": "^2.0.1"
+    "vitest": "^2.1.1"
   },
   "engines": {
     "node": ">=18.20"

package/src/server/index.js

@@ -63,7 +63,7 @@ async function renderUpdatedFile(file, config) {
 
     // beforeCreate event
     if (typeof config.beforeCreate === 'function') {
-      await config.beforeCreate(config)
+      await config.beforeCreate({ config })
     }
 
     // Read the file
@@ -164,11 +164,11 @@ export default async (config = {}) => {
     app.get(routePattern, async (req, res, next) => {
       // Run beforeCreate event
       if (typeof config.beforeCreate === 'function') {
-        config.beforeCreate(config)
+        await config.beforeCreate({ config })
       }
 
       try {
-        const filePath = templatePaths.find(t => t.endsWith(req.url.slice(1)))
+        const filePath = templatePaths.find(t => t.endsWith(decodeURI(req.url.slice(1))))
 
         // Set the file being viewed
         viewing = filePath
@@ -288,7 +288,7 @@ export default async (config = {}) => {
 
       // Run beforeCreate event
       if (typeof config.beforeCreate === 'function') {
-        await config.beforeCreate(config)
+        await config.beforeCreate({ config })
       }
 
       // Read the file

package/src/server/routes/index.js

@@ -27,7 +27,7 @@ function groupFilesByDirectories(globs, files) {
         const fileName = parts[parts.length - 1]
         current[fileName] = {
           name: fileName,
-          href: file,
+          href: encodeURI(file),
         }
       }
     })

package/src/server/views/index.html

@@ -79,6 +79,11 @@
       border-left: 1px solid #64748B;
     }
 
+    li.folder.nested > strong {
+      cursor: pointer;
+      display: block;
+    }
+
     li.folder.root {
       padding-top: 3rem;
       border: none;
@@ -92,6 +97,15 @@
       line-height: 2.25rem;
     }
 
+    li.file.nested.collapsed {
+      display: none;
+    }
+
+    li.file.nested.collapsed + .folder.nested {
+      padding-top: 0;
+    }
+
+
     li.file.nested a {
       padding-bottom: 0.75rem;
       margin-left: -1.5rem;
@@ -143,5 +157,16 @@
   </ul>
 
   <svg fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 993 483" class="insignia"><mask id="a" style="mask-type:alpha;" maskUnits="userSpaceOnUse" x="0" y="0" width="993" height="483"><path fill="#D9D9D9" d="M0 0h993v483H0z"></path></mask><g mask="url(#a)" stroke="#e2e8f0" stroke-miterlimit="10"><path d="M954.124 81.816c0-45.163-39.678-81.774-88.624-81.774-48.945 0-88.624 36.611-88.624 81.774v436.13c0 45.163 39.679 81.775 88.624 81.775 48.946 0 88.624-36.612 88.624-81.775V81.816ZM583.379 81.816c0-45.163-39.678-81.774-88.624-81.774-48.945 0-88.624 36.611-88.624 81.774v436.13c0 45.163 39.679 81.775 88.624 81.775 48.946 0 88.624-36.612 88.624-81.775V81.816Z"></path><path d="M935.39 132.185c30.161-35.57 23.362-86.965-15.187-114.795S825.954-4.165 795.794 31.404L425.713 467.848c-30.161 35.57-23.361 86.965 15.187 114.795 38.549 27.829 94.249 21.555 124.41-14.014l370.08-436.444ZM564.288 132.196c30.161-35.569 23.362-86.964-15.187-114.794S454.852-4.154 424.692 31.416L54.611 467.86c-30.16 35.569-23.361 86.965 15.187 114.794 38.549 27.83 94.249 21.556 124.41-14.013l370.08-436.445Z"></path></g></svg>
+  <script>
+    document.querySelectorAll('.folder.nested').forEach(folder => {
+      folder.addEventListener('click', function() {
+        let nextElement = this.nextElementSibling;
+        while (nextElement && nextElement.classList.contains('file') && nextElement.classList.contains('nested')) {
+          nextElement.classList.toggle('collapsed');
+          nextElement = nextElement.nextElementSibling;
+        }
+      });
+    });
+  </script>
 </body>
 </html>

package/src/transformers/index.js

@@ -124,16 +124,7 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 8. Purge CSS
-   *
-   * Remove unused CSS, uglify classes etc.
-   */
-  if (get(config, 'css.purge')) {
-    posthtmlPlugins.push(comb(config.css.purge))
-  }
-
-  /**
-   * 9. Remove attributes
+   * 8. Remove attributes
    *
    * Remove attributes from HTML tags
    * If `undefined`, removes empty `style` and `class` attributes
@@ -148,7 +139,7 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 10. Shorthand CSS
+   * 9. Shorthand CSS
    *
    * Convert longhand CSS properties to shorthand in `style` attributes.
    */
@@ -159,7 +150,7 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 11. Add attributes
+   * 10. Add attributes
    *
    * Add attributes to HTML tags.
    */
@@ -170,7 +161,7 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 12. Base URL
+   * 11. Base URL
    *
    * Add a base URL to relative paths.
    */
@@ -181,7 +172,7 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 13. URL parameters
+   * 12. URL parameters
    *
    * Add parameters to URLs.
    */
@@ -192,7 +183,7 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 14. Six-digit HEX
+   * 13. Six-digit HEX
    *
    * Enabled by default, converts three-digit HEX colors to six-digit.
    */
@@ -203,7 +194,7 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 15. PostHTML MSO
+   * 14. PostHTML MSO
    *
    * Enabled by default, simplifies writing MSO conditionals for Outlook.
    */
@@ -214,7 +205,23 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 16. Prettify
+   * 15. Purge CSS
+   *
+   * Remove unused CSS, uglify classes etc.
+   */
+  if (get(config, 'css.purge')) {
+    posthtmlPlugins.push(comb(config.css.purge))
+  }
+
+  /**
+   * 16. <template> tags
+   *
+   * Replace <template> tags with their content.
+   */
+  posthtmlPlugins.push(templateTag())
+
+  /**
+   * 17. Prettify
    *
    * Pretty-print HTML using js-beautify.
    */
@@ -225,7 +232,7 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 17. Minify
+   * 18. Minify
    *
    * Minify HTML using html-crush.
    */
@@ -235,13 +242,6 @@ export async function run(html = '', config = {}) {
     )
   }
 
-  /**
-   * 18. <template> tags
-   *
-   * Replace <template> tags with their content.
-   */
-  posthtmlPlugins.push(templateTag())
-
   /**
    * 19. Replace strings
    *

package/src/transformers/inline.js

@@ -55,9 +55,12 @@ export async function inline(html = '', options = {}) {
   })
 
   // 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
@@ -103,7 +106,31 @@ export async function inline(html = '', options = {}) {
         }
       )
 
-    const preservedClasses = new Set()
+    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)
+      .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
@@ -163,7 +190,7 @@ export async function inline(html = '', options = {}) {
 
       if (options.removeInlinedSelectors) {
         // Remove the rule in the <style> tag as long as it's not a preserved class
-        if (!preservedClasses.has(selector)) {
+        if (!preservedClasses.has(selector) && !combinedRegex.test(selector)) {
           rule.remove()
         }
 

package/src/transformers/markdown.js

@@ -3,17 +3,26 @@ 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, merge(posthtmlOptions, posthtmlConfig))
     .then(result => result.html)
 }

package/src/utils/string.js

@@ -194,3 +194,13 @@ export function parseCSSRule(rule) {
 
   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()
+}

package/types/index.d.ts

@@ -37,10 +37,11 @@ declare namespace MaizzleFramework {
    *
    * @param {string} input The Markdown string to compile.
    * @param {MarkdownConfig} [options] A configuration object for the Markdown compiler.
-   * @returns {string} The compiled HTML string.
-   * @see https://maizzle.com/docs/transformers/markdown
+   * @param {PostHTMLConfig} [posthtmlOptions] A configuration object for PostHTML.
+   * @returns {Promise<string>} The compiled HTML string.
+   * @see https://maizzle.com/docs/markdown#api
    */
-  function markdown(input: string, options?: MarkdownConfig): string;
+  function markdown(input: string, options?: MarkdownConfig, posthtmlOptions?: PostHTMLConfig): Promise<string>;
 
   /**
    * Prevent widow words inside a tag by adding a `&nbsp;` between its last two words.