@maizzle/framework 6.0.0-7 → 6.0.0-9

package/CHANGELOG.md

@@ -4,6 +4,26 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [6.0.0-9] - 2025-07-16
+
+### Changed
+
+- refactor: resolving css props acacc14
+
+## [6.0.0-8] - 2025-07-16
+
+### Changed
+
+- refactor: css inlining  d443c31
+
+## [6.0.0-7] - 2025-07-15
+
+This release integrates the `v5.2.2` patch release, which fixes an issue where both local and production `build.content` paths were used when building for production. When specified in a `config.{env}.js` file, build.content must not be merged with the one in the base `config.js`.
+
+### Fixed
+
+- fix: ensure content paths are unique to each build environment 46c292b
+
 ## [6.0.0-6] - 2025-07-14
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "6.0.0-7",
+  "version": "6.0.0-9",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -71,8 +71,7 @@
     "ora": "^8.1.0",
     "pathe": "^2.0.0",
     "postcss": "^8.4.49",
-    "postcss-calc": "^10.0.2",
-    "postcss-css-variables": "^0.19.0",
+    "postcss-custom-properties": "^14.0.6",
     "postcss-safe-parser": "^7.0.0",
     "postcss-sort-media-queries": "^5.2.0",
     "posthtml": "^0.16.6",

package/src/posthtml/plugins/combineMediaQueries.js

@@ -4,7 +4,7 @@ import sortMediaQueries from 'postcss-sort-media-queries'
 const plugin = (options = {}) => tree => {
   const process = node => {
     // Check if this is a style tag with content
-    if (node.tag === 'style' && node.content && Array.isArray(node.content)) {
+    if (node && node.tag === 'style' && node.content && Array.isArray(node.content)) {
       // Get the CSS content from the style tag
       const cssContent = node.content.join('')
 

package/src/posthtml/plugins/postcss/compileCss.js

@@ -1,13 +1,10 @@
 import postcss from 'postcss'
 import get from 'lodash-es/get.js'
 import { defu as merge } from 'defu'
-import postcssCalc from 'postcss-calc'
 import { transform } from 'lightningcss'
 import tailwindcss from '@tailwindcss/postcss'
-import cssVariables from 'postcss-css-variables'
 import postcssSafeParser from 'postcss-safe-parser'
-import removeDuplicateSelectors from './removeDuplicateSelectors.js'
-import cleanupTailwindArtifacts from './cleanupTailwindArtifacts.js'
+import customProperties from 'postcss-custom-properties'
 
 const attributes = new Set([
   'raw',
@@ -24,8 +21,8 @@ export const validAttributeNames = attributes
  * PostHTML plugin to process Tailwind CSS within style tags.
  *
  * This plugin processes CSS content in `<style>` tags and
- * compiles it with PostCSS. `<style>` tags marked as
- * `no-process` will be skipped.
+ * compiles it with PostCSS. Tags marked with attribute
+ * names found in `attributes` will be skipped.
  */
 export function compileCss(config = {}) {
   return tree => {
@@ -33,7 +30,7 @@ export function compileCss(config = {}) {
       const stylePromises = []
 
       tree.walk(node => {
-        if (node.tag === 'style' && node.content) {
+        if (node && node.tag === 'style' && node.content) {
           if (node.attrs && Object.keys(node.attrs).some(attr => attributes.has(attr))) {
             return node
           }
@@ -69,31 +66,26 @@ async function processCss(css, config) {
    * will apply to all `<style>` tags in the HTML,
    * unless marked to be excluded.
    */
-  const resolveCSSProps = get(config, 'css.resolveProps')
-  const resolveCalc = get(config, 'css.resolveCalc') !== false
-    ? get(config, 'css.resolveCalc', { precision: 2 })
-    : false
-
-  const lightningCssOptions = merge(
-    get(config, 'css.lightning', {}),
-    {
-      targets: {
-        ie: 1,
-      },
-    }
-  )
+  const resolveCSSProps = merge(get(config, 'css.resolveProps', {}), {preseve: false})
+
+  let lightningCssOptions = get(config, 'css.lightning')
+  if (lightningCssOptions !== false) {
+    lightningCssOptions = merge(
+      lightningCssOptions,
+      {
+        targets: {
+          ie: 1,
+        },
+      }
+    )
+  }
 
   try {
-    const processor = postcss([
+    const result = await postcss([
       tailwindcss(get(config, 'css.tailwind', {})),
-      resolveCSSProps !== false && cssVariables(resolveCSSProps),
-      resolveCalc !== false && postcssCalc(resolveCalc),
-      removeDuplicateSelectors(),
-      cleanupTailwindArtifacts(get(config, 'css.cleanup', {})),
+      customProperties(resolveCSSProps),
       ...get(config, 'postcss.plugins', []),
-    ].filter(Boolean))
-
-    const result = await processor.process(css, merge(
+    ]).process(css, merge(
       get(config, 'postcss.options', {}),
       {
         from: config.cwd || './',
@@ -108,7 +100,7 @@ async function processCss(css, config) {
      * to be more email-friendly.
      */
 
-    if (result.css?.trim()) {
+    if (result.css?.trim() && lightningCssOptions !== false) {
       try {
         const { code } = transform(
           merge(

package/src/posthtml/plugins/removeRawStyleAttributes.js

@@ -1,8 +1,16 @@
 import { validAttributeNames } from './postcss/compileCss.js'
 
+/**
+ * Remove specific attributes from `<style>` tags in PostHTML.
+ *
+ * Use to clean up <style> tag attributes after proccessing
+ * has taken place. A "raw" attribute is used to indicate
+ * that the content should not be compiled.
+ * @returns {Function} PostHTML plugin
+ */
 const plugin = () => tree => {
   const process = node => {
-    if (node.tag === 'style') {
+    if (node && node.tag === 'style') {
       if (node.attrs && Object.keys(node.attrs).some(attr => validAttributeNames.has(attr))) {
         // Remove the attribute
         for (const attr of Object.keys(node.attrs)) {

package/src/transformers/inline.js

@@ -6,18 +6,29 @@ import * as cheerio from 'cheerio/slim'
 import remove from 'lodash-es/remove.js'
 import { render } from 'posthtml-render'
 import isEmpty from 'lodash-es/isEmpty.js'
+import { match } from 'posthtml/lib/api.js'
 import safeParser from 'postcss-safe-parser'
 import isObject from 'lodash-es/isObject.js'
 import { parser as parse } from 'posthtml-parser'
 import { useAttributeSizes } from './useAttributeSizes.js'
 import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
-const posthtmlPlugin = (options = {}) => tree => {
-  return inline(render(tree), options).then(html => parse(html, getPosthtmlOptions()))
+/**
+ * PostHTML plugin to inline CSS
+ * @param {*} options `css.inline` object from config
+ * @returns {Function} PostHTML tree
+ */
+export default (options = {}) => tree => {
+  return inline(render(tree), options)
 }
 
-export default posthtmlPlugin
-
+/**
+ * Function to inline CSS styles with Posthtml and Juice.
+ *
+ * @param {*} html  HTML string to process
+ * @param {*} options Options for Juice
+ * @returns {string} HTML with inlined styles
+ */
 export async function inline(html = '', options = {}) {
   // Exit early if no HTML is passed
   if (typeof html !== 'string' || html === '') {
@@ -68,32 +79,34 @@ export async function inline(html = '', options = {}) {
     })
   }
 
-  const $ = cheerio.load(html, {
-    xml: {
-      decodeEntities: false,
-      xmlMode: false,
-    }
-  })
-
-  // Add a `data-embed` attribute to style tags that have the embed attribute
-  $('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
    *
    * If customCSS is passed, inline that CSS specifically
    * Otherwise, use Juice's default inlining
    */
-  $.root().html(
-    css
-      ? juice.inlineContent($.html(), css, { removeStyleTags, ...options })
-      : juice($.html(), { removeStyleTags, ...options })
-  )
+  const tree = parse(html, getPosthtmlOptions())
+  tree.match = match
+
+  /**
+   * Add a `data-embed` attribute to style tags that have the `embed`
+   * attribute, so that Juice can skip them.
+   */
+  tree.match({ tag: 'style' }, (node) => {
+    if (node.attrs && node.attrs.embed !== undefined) {
+      node.attrs['data-embed'] = true
+    }
+
+    if (node.attrs && node.attrs['data-embed'] !== undefined) {
+      node.attrs.embed = true
+    }
+
+    return node
+  })
+
+  let inlined_html = css
+    ? juice.inlineContent(render(tree), css, { removeStyleTags, ...options })
+    : juice(render(tree), { removeStyleTags, ...options })
 
   /**
    * Prefer attribute sizes
@@ -104,23 +117,34 @@ export async function inline(html = '', options = {}) {
    * natural size.
    */
   if (options.useAttributeSizes) {
-    $.root().html(
-      await useAttributeSizes(html, {
-        width: juice.widthElements,
-        height: juice.heightElements,
-      })
-    )
+    inlined_html = await useAttributeSizes(inlined_html, {
+      width: juice.widthElements,
+      height: juice.heightElements,
+    }, getPosthtmlOptions())
   }
 
   /**
-   * Remove inlined selectors from the HTML
-   */
-  // For each style tag
-  $('style:not([embed])').each((_i, el) => {
+  * Remove inlined selectors from the HTML
+ *
+ */
+  const inlined_tree = parse(inlined_html, getPosthtmlOptions())
+  inlined_tree.match = match
+
+  const preservedAtRules = get(options, 'preservedAtRules', ['media'])
+  const selectors = new Set()
+
+  inlined_tree.match({ tag: 'style' }, node => {
+    // If this is an embedded style tag, exit early
+    if (node.attrs && ('data-embed' in node.attrs || 'embed' in node.attrs)) {
+      return node
+    }
+
     // Parse the CSS
     const { root } = postcss()
       .process(
-        $(el).html(),
+        Array.isArray(node.content)
+          ? node.content.join('')
+          : node.content,
         {
           from: undefined,
           parser: safeParser
@@ -134,14 +158,15 @@ export async function inline(html = '', options = {}) {
 
     const combinedRegex = new RegExp(combinedPattern)
 
-    const selectors = new Set()
-
-    // Preserve selectors in at rules
+    // Preserve selectors in predefined at-rules
     root.walkAtRules(rule => {
-      if (['media', 'supports'].includes(rule.name)) {
+      if (preservedAtRules.includes(rule.name)) {
         rule.walkRules(rule => {
           options.safelist.add(rule.selector)
         })
+      } else {
+        // Remove the at rule if it's not predefined
+        rule.remove()
       }
     })
 
@@ -157,11 +182,12 @@ export async function inline(html = '', options = {}) {
           prop: get(rule.nodes[0], 'prop')
         })
       }
-      // Preserve pseudo selectors
       else {
+        // Preserve pseudo selectors
         options.safelist.add(selector)
       }
 
+
       if (options.removeInlinedSelectors) {
         // Remove the rule in the <style> tag as long as it's not a preserved class
         if (!options.safelist.has(selector) && !combinedRegex.test(selector)) {
@@ -169,90 +195,112 @@ export async function inline(html = '', options = {}) {
         }
 
         // Update the <style> tag contents
-        $(el).html(root.toString())
+        node.content = root.toString()
       }
     })
 
-    /**
-     * 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 }) => {
-      try {
-        const elements = $(name).get()
-
-        // If the property is excluded from inlining, skip
-        if (!juice.excludedProperties.includes(prop)) {
-          // Find the selector in the HTML
-          elements.forEach((el) => {
-            // Get a `property|value` list from the inline style attribute
-            const styleAttr = $(el).attr('style')
-            const inlineStyles = {}
-
-            // 1. `preferUnitlessValues`
-            if (styleAttr) {
-              try {
-                const root = postcss.parse(`* { ${styleAttr} }`)
-
-                root.first.each((decl) => {
-                  const property = decl.prop
-                  let value = decl.value
-
-                  if (value && options.preferUnitlessValues) {
-                    value = value.replace(
-                      /\b0(px|rem|em|%|vh|vw|vmin|vmax|in|cm|mm|pt|pc|ex|ch)\b/g,
-                      '0'
-                    )
-                  }
-
-                  if (property) {
-                    inlineStyles[property] = value
-                  }
-                })
-
-                // Update the element's style attribute with the new value
-                $(el).attr(
-                  'style',
-                  Object.entries(inlineStyles).map(([property, value]) => `${property}: ${value}`).join('; ')
-                )
-              } catch {}
-            }
+    // This is inlined_tree
+    return node
+  })
 
-            // Get the classes from the element's class attribute
-            const classes = $(el).attr('class')
+  /**
+   * CSS optimizations
+   *
+   * `preferUnitlessValues` - Replace unit values with `0` where possible
+   * `removeInlinedSelectors` - Remove inlined selectors from the HTML
+   */
 
-            // 2. `removeInlinedSelectors`
-            if (options.removeInlinedSelectors && classes) {
-              const classList = classes.split(' ')
+  const $ = cheerio.load(render(inlined_tree), {
+    xml: {
+      decodeEntities: false,
+      xmlMode: false,
+    }
+  })
 
-              // If the class has been inlined in the style attribute...
-              if (has(inlineStyles, prop)) {
-                // Try to remove the classes that have been inlined
-                if (![...options.safelist].some(item => item.includes(name))) {
-                  remove(classList, classToRemove => name.includes(classToRemove))
+  // Loop over selectors that we found in the <style> tags
+  selectors.forEach(({ name, prop }) => {
+    try {
+      const elements = $(name).get()
+      // If the property is excluded from inlining, skip
+      if (!juice.excludedProperties.includes(prop)) {
+        // Find the selector in the HTML
+        elements.forEach((el) => {
+          // Get a `property|value` list from the inline style attribute
+          const styleAttr = $(el).attr('style')
+          // Store the element's inline styles
+          const inlineStyles = {}
+
+          // `preferUnitlessValues`
+          if (styleAttr) {
+            try {
+              const root = postcss.parse(`* { ${styleAttr} }`)
+
+              root.first.each((decl) => {
+                const property = decl.prop
+                let value = decl.value
+
+                if (value && options.preferUnitlessValues) {
+                  value = value.replace(
+                    /\b0(px|rem|em|%|vh|vw|vmin|vmax|in|cm|mm|pt|pc|ex|ch)\b/g,
+                    '0'
+                  )
                 }
 
-                // Update the class list on the element with the new classes
-                if (classList.length > 0) {
-                  $(el).attr('class', classList.join(' '))
-                } else {
-                  $(el).removeAttr('class')
+                if (property) {
+                  inlineStyles[property] = value
                 }
+              })
+
+              // Update the element's style attribute with the new value
+              $(el).attr(
+                'style',
+                Object.entries(inlineStyles).map(([property, value]) => `${property}: ${value}`).join('; ')
+              )
+            } catch { }
+          }
+
+          // Get the classes from the element's class attribute
+          const classes = $(el).attr('class')
+
+          // `removeInlinedSelectors`
+          if (options.removeInlinedSelectors && classes) {
+            const classList = classes.split(' ')
+
+            // If the class has been inlined in the style attribute...
+            if (has(inlineStyles, prop)) {
+              // Try to remove the classes that have been inlined
+              if (![...options.safelist].some(item => item.includes(name))) {
+                remove(classList, classToRemove => name.includes(classToRemove))
+              }
+
+              // Update the class list on the element with the new classes
+              if (classList.length > 0) {
+                $(el).attr('class', classList.join(' '))
+              } else {
+                $(el).removeAttr('class')
               }
             }
-          })
-        }
-      } catch {}
-    })
+          }
+        })
+      }
+    } catch { }
   })
 
-  $('style[embed]').each((_i, el) => {
-    $(el).removeAttr('embed')
+  const optimized_tree = parse($.html(), getPosthtmlOptions())
+  optimized_tree.match = match
+
+  /**
+   * Remove the `embed` attribute from style tags
+   */
+  optimized_tree.match({ tag: 'style' }, (node) => {
+    // If this is an embedded style tag, exit early
+    if (node.attrs && node.attrs.embed !== undefined) {
+      delete node.attrs.embed
+    }
+
+    return node
   })
 
-  return $.html()
+  // Finally, return the inlined html
+  return render(optimized_tree)
 }

package/src/posthtml/plugins/postcss/cleanupTailwindArtifacts.js

@@ -1,78 +0,0 @@
-/**
- * PostCSS plugin to clean up Tailwind CSS artifacts and leftovers.
- *
- * This plugin safely removes unused Tailwind-specific CSS that
- * may be left behind after processing, while preserving
- * any CSS that might be intentionally used.
- */
-export default function cleanupTailwindArtifacts(options = {}) {
-  const opts = {
-    removeEmptyLayers: true,
-    removeUnusedTwProperties: true,
-    removeEmptyRules: false,
-    preserveCustomProperties: [], // Array of custom property names to preserve
-    ...options
-  }
-
-  return {
-    postcssPlugin: 'cleanup-tailwind-artifacts',
-    OnceExit(root) {
-      const usedCustomProperties = new Set()
-      const rulesToRemove = []
-
-      // First pass: collect all custom properties usage
-      root.walkDecls(decl => {
-        // Check if any declaration uses custom properties
-        if (decl.value.includes('var(--')) {
-          const matches = decl.value.match(/var\(--[\w-]+\)/g)
-          if (matches) {
-            matches.forEach(match => {
-              const propName = match.replace(/var\(|-|\)/g, '')
-              usedCustomProperties.add(propName)
-            })
-          }
-        }
-      })
-
-      // Second pass: find unused @property declarations and empty @layer rules
-      root.walkAtRules(rule => {
-        // Handle @property declarations
-        if (rule.name === 'property' && opts.removeUnusedTwProperties) {
-          const propertyName = rule.params.replace(/^--/, '')
-
-          // Only remove Tailwind-specific custom properties that aren't used
-          if (propertyName.startsWith('tw-') && !usedCustomProperties.has(propertyName)) {
-            // Check if it's in the preserve list
-            if (!opts.preserveCustomProperties.includes(propertyName)) {
-              rulesToRemove.push(rule)
-            }
-          }
-        }
-
-        // Handle @layer rules
-        if (rule.name === 'layer' && opts.removeEmptyLayers) {
-          // Only remove @layer rules that have no nodes
-          if (!rule.nodes || rule.nodes.length === 0) {
-            rulesToRemove.push(rule)
-          }
-        }
-      })
-
-      // Third pass: remove empty rules (optional, off by default)
-      if (opts.removeEmptyRules) {
-        root.walkRules(rule => {
-          if (!rule.nodes || rule.nodes.length === 0) {
-            rulesToRemove.push(rule)
-          }
-        })
-      }
-
-      // Remove all identified artifacts
-      rulesToRemove.forEach(rule => {
-        rule.remove()
-      })
-    }
-  }
-}
-
-cleanupTailwindArtifacts.postcss = true

package/src/posthtml/plugins/postcss/removeDuplicateSelectors.js

@@ -1,35 +0,0 @@
-/**
- * PostCSS plugin to remove duplicate selectors, keeping only the last occurrence.
- * This is useful when CSS contains multiple rules with the same selector,
- * and we want to keep only the most recent one.
- */
-export default function removeDuplicateSelectors() {
-  return {
-    postcssPlugin: 'remove-duplicate-selectors',
-    OnceExit(root) {
-      const selectorMap = new Map()
-      const rulesToRemove = []
-
-      // First pass: collect all rules and their selectors
-      root.walkRules(rule => {
-        const selector = rule.selector
-
-        // If we've seen this selector before, mark the previous one for removal
-        if (selectorMap.has(selector)) {
-          const previousRule = selectorMap.get(selector)
-          rulesToRemove.push(previousRule)
-        }
-
-        // Update the map with the current rule (latest occurrence)
-        selectorMap.set(selector, rule)
-      })
-
-      // Second pass: remove all the duplicate rules
-      rulesToRemove.forEach(rule => {
-        rule.remove()
-      })
-    }
-  }
-}
-
-removeDuplicateSelectors.postcss = true