@maizzle/framework 5.0.1 → 5.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",

package/src/commands/build.js

@@ -107,7 +107,7 @@ export default async (config = {}) => {
     /**
      * Check that templates to be built, actually exist
      */
-    const contentPaths = get(config, 'build.content', ['src/templates/**/*.html'])
+    const contentPaths = get(config, 'build.content', ['emails/**/*.html'])
 
     const templateFolders = Array.isArray(contentPaths) ? contentPaths : [contentPaths]
     const templatePaths = await fg.glob([...new Set(templateFolders)])
@@ -122,7 +122,7 @@ export default async (config = {}) => {
      *
      * Copies each `build.content` path to the `build.output.path` directory.
      */
-    let from = get(config, 'build.output.from', ['src/templates', 'src'])
+    let from = get(config, 'build.output.from', ['emails'])
 
     const globPathsToCopy = contentPaths.map(glob => {
       // Keep negated paths as they are

package/src/generators/plaintext.js

@@ -150,7 +150,7 @@ export async function writePlaintextFile(plaintext = '', config = {}) {
    * `config.build.output.path`
    */
   const plaintextConfig = get(config, 'plaintext')
-  let plaintextOutputPath = get(plaintextConfig, 'output.path', get(config, 'build.output.path'))
+  let plaintextOutputPath = get(plaintextConfig, 'output.path', '')
   const plaintextExtension = get(plaintextConfig, 'output.extension', 'txt')
 
   /**
@@ -158,7 +158,7 @@ export async function writePlaintextFile(plaintext = '', config = {}) {
    * output plaintext file in the same location as the HTML file.
    */
   if (plaintextConfig === true) {
-    plaintextOutputPath = get(config, 'build.output.path')
+    plaintextOutputPath = ''
   }
 
   /**

package/src/posthtml/plugins/envAttributes.js

@@ -5,7 +5,7 @@ const plugin = (env => tree => {
       return node
     }
 
-    if (node.attrs) {
+    if (node?.attrs) {
       for (const attr in node.attrs) {
         const suffix = `-${env}`
 

package/src/posthtml/plugins/envTags.js

@@ -3,7 +3,7 @@ const plugin = (env => tree => {
     env = env || 'local'
 
     // Return the original node if it doesn't have a tag
-    if (!node.tag) {
+    if (!node?.tag) {
       return node
     }
 

package/src/posthtml/plugins/expandLinkTag.js

@@ -8,7 +8,7 @@ const plugin = (() => tree => {
     /**
      * Don't expand link tags that are not explicitly marked as such
      */
-    if (node.attrs && ![...targets].some(attr => attr in node.attrs)) {
+    if (node?.attrs && ![...targets].some(attr => attr in node.attrs)) {
       for (const attr of targets) {
         node.attrs[attr] = false
       }
@@ -17,7 +17,8 @@ const plugin = (() => tree => {
     }
 
     if (
-      node.tag === 'link'
+      node
+      && node.tag === 'link'
       && node.attrs
       && node.attrs.href
       && node.attrs.rel === 'stylesheet'

package/src/transformers/baseUrl.js

@@ -1,12 +1,12 @@
 import posthtml from 'posthtml'
 import isUrl from 'is-url-superb'
 import get from 'lodash-es/get.js'
-import baseUrl from 'posthtml-base-url'
 import { render } from 'posthtml-render'
 import isEmpty from 'lodash-es/isEmpty.js'
 import isObject from 'lodash-es/isObject.js'
 import { parser as parse } from 'posthtml-parser'
 import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
+import baseUrl, { parseSrcset, stringifySrcset, defaultTags } from 'posthtml-base-url'
 
 const posthtmlOptions = getPosthtmlOptions()
 
@@ -48,11 +48,11 @@ const posthtmlPlugin = url => tree => {
 
 export default posthtmlPlugin
 
-export async function addBaseUrl(html = '', options = {}, posthtmlOptions = {}) {
+export async function addBaseUrl(html = '', options = {}, posthtmlOpts = {}) {
   return posthtml([
     posthtmlPlugin(options)
   ])
-    .process(html, getPosthtmlOptions())
+    .process(html, getPosthtmlOptions(posthtmlOpts))
     .then(result => result.html)
 }
 
@@ -99,5 +99,52 @@ const rewriteVMLs = (html, url) => {
     })
   }
 
+  /**
+   * Handle other sources inside MSO comments
+   */
+
+  // Make a | pipe-separated list of all the default tags and use it to create a regex
+  const uniqueSourceAttributes = [
+    ...new Set(Object.values(defaultTags).flatMap(Object.keys))
+  ].join('|')
+
+  const sourceAttrRegex = new RegExp(`\\b(${uniqueSourceAttributes})="([^"]+)"`, 'g')
+
+  // Replace all the source attributes inside MSO comments
+  html = html.replace(/<!--\[if [^\]]+\]>[\s\S]*?<!\[endif\]-->/g, (msoBlock) => {
+    return msoBlock.replace(sourceAttrRegex, (match, attr, value) => {
+      if (isUrl(value)) {
+        return match
+      }
+
+      const updatedValue = attr === 'srcset'
+        ? processSrcset(value, url)
+        : url + value
+
+      return `${attr}="${updatedValue}"`
+    })
+  })
+
   return html
 }
+
+/**
+ * Add the base URL to the srcset URLs
+ *
+ * @param {*} srcsetValue The value of the srcset attribute
+ * @param {*} url The base URL
+ * @returns {string} The updated srcset attribute value
+ */
+function processSrcset(srcsetValue, url) {
+  const parsed = parseSrcset(srcsetValue)
+
+  parsed.map(p => {
+    if (!isUrl(p.url)) {
+      p.url = url + p.url
+    }
+
+    return p
+  })
+
+  return stringifySrcset(parsed)
+}

package/src/transformers/inline.js

@@ -9,7 +9,6 @@ import isEmpty from 'lodash-es/isEmpty.js'
 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'
 
@@ -166,6 +165,13 @@ export async function inline(html = '', options = {}) {
       }
     })
 
+    /**
+     * CSS optimizations
+     *
+     * 1. `preferUnitlessValues` - Replace unit values with `0` where possible
+     * 2. `removeInlinedSelectors` - Remove inlined selectors from the HTML
+     */
+
     // Loop over selectors that we found in the <style> tags
     selectors.forEach(({ name, prop }) => {
       const elements = $(name).get()
@@ -176,11 +182,16 @@ export async function inline(html = '', options = {}) {
         elements.forEach((el) => {
           // Get a `property|value` list from the inline style attribute
           const styleAttr = $(el).attr('style')
-          let inlineStyles = {}
+          const inlineStyles = {}
 
+          // 1. `preferUnitlessValues`
           if (styleAttr) {
-            inlineStyles = styleAttr.split(';').reduce((acc, i) => {
-              let { property, value } = parseCSSRule(i)
+            // Parse the inline styles using postcss
+            const root = postcss.parse(`* { ${styleAttr} }`)
+
+            root.first.each((decl) => {
+              const property = decl.prop
+              let value = decl.value
 
               if (value && options.preferUnitlessValues) {
                 value = value.replace(
@@ -190,11 +201,9 @@ export async function inline(html = '', options = {}) {
               }
 
               if (property) {
-                acc[property] = value
+                inlineStyles[property] = value
               }
-
-              return acc
-            }, {})
+            })
 
             // Update the element's style attribute with the new value
             $(el).attr(
@@ -206,6 +215,7 @@ export async function inline(html = '', options = {}) {
           // Get the classes from the element's class attribute
           const classes = $(el).attr('class')
 
+          // 2. `removeInlinedSelectors`
           if (options.removeInlinedSelectors && classes) {
             const classList = classes.split(' ')
 

package/src/utils/string.js

@@ -174,27 +174,6 @@ export function getFileExtensionsFromPattern(pattern) {
   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.
  *

package/types/index.d.ts

@@ -9,6 +9,7 @@ import type CSSInlineConfig from './css/inline';
 import type WidowWordsConfig from './widowWords';
 import type { BaseURLConfig } from 'posthtml-base-url';
 import type { HTMLBeautifyOptions } from 'js-beautify'
+import type { Opts as PlaintextOptions } from 'string-strip-html';
 import type { URLParametersConfig } from 'posthtml-url-parameters';
 import type { AttributeToStyleSupportedAttributes } from './css/inline';
 
@@ -188,11 +189,22 @@ declare namespace MaizzleFramework {
   /**
    * Generate a plaintext version of an HTML string.
    * @param {string} html - The HTML string to convert to plaintext.
-   * @param {PlaintextConfig} [options] - A configuration object for the plaintext generator.
-   * @returns {Promise<string>} The plaintext version of the HTML string.
+   * @param {Object} [config={}] - Configuration object.
+   * @param {PostHTMLConfig} [config.posthtml] - PostHTML options.
+   * @param {PlaintextOptions} [config.strip] - Options for `string-strip-html`.
+   * @returns {Promise<string>} A string representing the HTML converted to plaintext.
    * @see https://maizzle.com/docs/plaintext
    */
-  function plaintext(html: string, options?: PlaintextConfig): Promise<string>;
+  function generatePlaintext(
+    html: string,
+    config?: {
+      /**
+       * Configure PostHTML options.
+       */
+      posthtml?: PostHTMLConfig
+    }
+      & PlaintextOptions,
+  ): Promise<string>;
 
   export {
     Config,
@@ -213,7 +225,7 @@ declare namespace MaizzleFramework {
     sixHEX,
     minify,
     replaceStrings,
-    plaintext,
+    generatePlaintext,
   }
 }