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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.23",
+  "version": "5.0.0-beta.24",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -48,9 +48,9 @@
     "html-emails"
   ],
   "dependencies": {
-    "@csstools/css-calc": "^1.2.4",
+    "@csstools/css-calc": "^2.0.1",
     "@maizzle/cli": "next",
-    "cheerio": "1.0.0-rc.12",
+    "cheerio": "^1.0.0",
     "chokidar": "^3.6.0",
     "cli-table3": "^0.6.5",
     "color-shorthand-hex-to-six-digit": "^5.0.16",
@@ -62,13 +62,13 @@
     "html-crush": "^6.0.18",
     "is-url-superb": "^6.1.0",
     "istextorbinary": "^9.5.0",
-    "juice": "^10.0.1",
+    "juice": "^11.0.0",
     "lodash-es": "^4.17.21",
     "morphdom": "^2.7.4",
-    "ora": "^8.0.1",
+    "ora": "^8.1.0",
     "pathe": "^1.1.2",
     "postcss": "^8.4.39",
-    "postcss-custom-properties": "^13.3.12",
+    "postcss-custom-properties": "^14.0.1",
     "postcss-import": "^16.1.0",
     "postcss-safe-parser": "^7.0.0",
     "posthtml": "^0.16.6",
@@ -90,7 +90,7 @@
     "pretty": "^2.0.0",
     "string-remove-widows": "^4.0.22",
     "string-strip-html": "^13.4.8",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "^3.4.10",
     "ws": "^8.17.0"
   },
   "devDependencies": {
@@ -102,6 +102,6 @@
     "vitest": "^2.0.1"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=18.20"
   }
 }

package/src/generators/render.js

@@ -70,7 +70,9 @@ export async function render(html = '', config = {}) {
     })) ?? content
   }
 
-  //  Compile PostHTML
+  /**
+   * Compile PostHTML
+   */
   const compiled = await compilePostHTML(content, templateConfig)
 
   /**
@@ -86,11 +88,10 @@ export async function render(html = '', config = {}) {
     compiled.html = await templateConfig.afterRender(({
       html: compiled.html,
       matter: matterData,
-      config: templateConfig,
+      config: compiled.config,
     })) ?? compiled.html
   }
 
-  // Run Transformers
   /**
    * Run Transformers
    *
@@ -101,10 +102,9 @@ export async function render(html = '', config = {}) {
    * @returns {string} - The transformed HTML
    */
   if (templateConfig.useTransformers !== false) {
-    compiled.html = await useTransformers(compiled.html, templateConfig).then(({ html }) => html)
+    compiled.html = await useTransformers(compiled.html, compiled.config).then(({ html }) => html)
   }
 
-  // Run `afterTransformers` event
   /**
    * Run `afterTransformers` event
    *
@@ -118,12 +118,12 @@ export async function render(html = '', config = {}) {
     compiled.html = await templateConfig.afterTransformers(({
       html: compiled.html,
       matter: matterData,
-      config: templateConfig,
+      config: compiled.config,
     })) ?? compiled.html
   }
 
   return {
-    config: templateConfig,
+    config: compiled.config,
     html: compiled.html,
   }
 }

package/src/posthtml/index.js

@@ -41,7 +41,7 @@ export async function process(html = '', config = {}) {
   const componentsUserOptions = get(config, 'components', {})
 
   const expressionsOptions = merge(
-    get(config, 'build.expressions', get(config, 'posthtml.expressions', {})),
+    get(config, 'expressions', get(config, 'posthtml.expressions', {})),
     get(componentsUserOptions, 'expressions', {}),
   )
 
@@ -94,7 +94,7 @@ export async function process(html = '', config = {}) {
   ])
     .process(html, posthtmlOptions)
     .then(result => ({
-      config,
+      config: merge(config, { page: config }),
       html: result.html,
     }))
     .catch(error => {

package/src/server/index.js

@@ -128,7 +128,7 @@ export default async (config = {}) => {
    * Initialize WebSocket server
    * Used to send messages between the server and the browser
    */
-  initWebSockets(wss, { scrollSync: shouldScroll, hmr: useHmr })
+  initWebSockets(wss, { shouldScroll, useHmr })
 
   // Register routes
   templatePaths = await getUpdatedRoutes(app, config)

package/src/transformers/inline.js

@@ -2,11 +2,11 @@ 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'
@@ -47,7 +47,12 @@ 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) => {

package/src/transformers/prettify.js

@@ -2,6 +2,7 @@ import pretty from 'pretty'
 import posthtml from 'posthtml'
 import { defu as merge } from 'defu'
 import { render } from 'posthtml-render'
+import { parser as parse } from 'posthtml-parser'
 import posthtmlConfig from '../posthtml/defaultConfig.js'
 
 const posthtmlPlugin = (options = {}) => tree => {
@@ -14,7 +15,7 @@ const posthtmlPlugin = (options = {}) => tree => {
 
   const config = merge(options, defaultConfig)
 
-  return pretty(render(tree), config)
+  return parse(pretty(render(tree), config), posthtmlConfig)
 }
 
 export default posthtmlPlugin

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/types/build.d.ts

@@ -1,5 +1,4 @@
 import type { SpinnerName } from 'cli-spinners';
-import type { PostHTMLExpressions } from 'posthtml-expressions';
 
 export default interface BuildConfig {
   /**
@@ -18,11 +17,6 @@ export default interface BuildConfig {
    */
   content?: string[];
 
-  /**
-  Configure [posthtml-expressions](https://github.com/posthtml/posthtml-expressions) options.
-  */
-  expressions?: PostHTMLExpressions;
-
   /**
    * Define the output path for compiled Templates, and what file extension they should use.
    *

package/types/config.d.ts

@@ -13,9 +13,9 @@ import type { CoreBeautifyOptions } from 'js-beautify';
 import type { BaseURLConfig } from 'posthtml-base-url';
 import type URLParametersConfig from './urlParameters';
 import type { PostHTMLFetchConfig } from 'posthtml-fetch';
-import type { PostHTMLComponents } from 'posthtml-component';
-
 import type { Config as TailwindConfig } from 'tailwindcss';
+import type { PostHTMLComponents } from 'posthtml-component';
+import type { PostHTMLExpressions } from 'posthtml-expressions';
 
 export default interface Config {
   /**
@@ -170,6 +170,11 @@ export default interface Config {
     tailwind?: TailwindConfig;
   }
 
+  /**
+  Configure [posthtml-expressions](https://github.com/posthtml/posthtml-expressions) options.
+  */
+  expressions?: PostHTMLExpressions;
+
   /**
    * Configure the [`<fetch>`](https://maizzle.com/docs/tags#fetch) tag.
    */
@@ -370,11 +375,11 @@ export default interface Config {
     hmr?: boolean;
 
     /**
-     * Enable synchronized scrolling across devices.
+     * Enable synchronized scrolling across browser tabs.
      *
      * @default false
      */
-    syncScroll?: boolean;
+    scrollSync?: boolean;
 
     /**
      * Paths to watch for changes.