@maizzle/framework 6.0.0-1 → 6.0.0-11

package/CHANGELOG.md

@@ -4,6 +4,91 @@ 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-11] - 2025-07-16
+
+### Fixed
+
+- fix: return posthtml tree from inliner 5d78370
+
+## [6.0.0-10] - 2025-07-16
+
+### Fixed
+
+- fix: resolve props default options typo 8673a1e
+
+## [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
+
+- use extension when importing file 99835d3
+
+## [6.0.0-5] - 2025-07-14
+
+### Changed
+
+- run css compilation before components too 272bbdb
+
+## [6.0.0-4] - 2025-07-14
+
+### Added
+
+- added support for skipping CSS compilation on individual `<style>` tags by adding any of the following attributes: `raw`, `plain`, `as-is`, `uncompiled`, `unprocessed`
+
+### Changed
+
+- refactored CSS compilation into a custom PostHTML plugin
+
+### Removed
+
+- removed `posthtml-postcss` dependency
+
+## [6.0.0-3] - 2025-07-14
+
+### Added
+
+- safelist spark targeting selectors f29efb8
+- safelist targeting for superhuman beb6b41
+- safelist notion mail targeting 5cfd68f
+
+### Changed
+
+- safelisting outlook targeting b8b21f3
+- safelisting selectors acb7b80
+
+### Fixed
+
+- safelist class names for container queries b828c44
+- purge safelisting patterns d6b9c48
+- safelisting comcast targeting selector 9677421
+- preserve yahoo mail targeting selectors 2f3429f
+
+## [6.0.0-2] - 2025-07-11
+
+### Fixed
+
+- fixed an issue with duplicate CSS selectors for utilities that cannot be disabled in Tailwind CSS v4, like `text-decoration`
+- fixed an issue where some Tailwind directives like `@layer` or `@property` were still present in the final build, even though they were not used
+
 ## [6.0.0-1] - 2025-07-11
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "6.0.0-1",
+  "version": "6.0.0-11",
   "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",
@@ -86,7 +85,6 @@
     "posthtml-markdownit": "^3.1.0",
     "posthtml-mso": "^3.1.0",
     "posthtml-parser": "^0.12.1",
-    "posthtml-postcss": "^1.0.2",
     "posthtml-postcss-merge-longhand": "^3.1.2",
     "posthtml-render": "^3.0.0",
     "posthtml-safe-class-names": "^4.1.0",

package/src/posthtml/index.js

@@ -6,47 +6,17 @@ import posthtml from 'posthtml'
 import posthtmlFetch from 'posthtml-fetch'
 import envTags from './plugins/envTags.js'
 import components from 'posthtml-component'
-import posthtmlPostcss from 'posthtml-postcss'
 import expandLinkTag from './plugins/expandLinkTag.js'
 import envAttributes from './plugins/envAttributes.js'
 import { getPosthtmlOptions } from './defaultConfig.js'
-import lowerCssSyntax from './plugins/lowerCssSyntax.js'
 import combineMediaQueries from './plugins/combineMediaQueries.js'
+import defaultComponentsConfig from './defaultComponentsConfig.js'
+import removeRawStyleAttributes from './plugins/removeRawStyleAttributes.js'
 
 // PostCSS
-import tailwindcss from '@tailwindcss/postcss'
-import postcssCalc from 'postcss-calc'
-import cssVariables from 'postcss-css-variables'
-import postcssSafeParser from 'postcss-safe-parser'
-
-import defaultComponentsConfig from './defaultComponentsConfig.js'
+import { compileCss } from './plugins/postcss/compileCss.js'
 
 export async function process(html = '', config = {}) {
-  /**
-   * Configure PostCSS pipeline. Plugins defined and added here
-   * will apply to all `<style>` tags in the HTML.
-   */
-  const resolveCSSProps = get(config, 'css.resolveProps')
-  const resolveCalc = get(config, 'css.resolveCalc') !== false
-    ? get(config, 'css.resolveCalc', { precision: 2 }) // it's true by default, use default precision 2
-    : false
-
-  const postcssPlugin = posthtmlPostcss(
-    [
-      tailwindcss(get(config, 'css.tailwind', {})),
-      resolveCSSProps !== false && cssVariables(resolveCSSProps),
-      resolveCalc !== false && postcssCalc(resolveCalc),
-      ...get(config, 'postcss.plugins', []),
-    ],
-    merge(
-      get(config, 'postcss.options', {}),
-      {
-        from: config.cwd || './',
-        parser: postcssSafeParser
-      }
-    )
-  )
-
   /**
    * Define PostHTML options by merging user-provided ones
    * on top of a default configuration.
@@ -102,18 +72,17 @@ export async function process(html = '', config = {}) {
 
   return posthtml([
     ...beforePlugins,
-    envTags(config.env),
-    envAttributes(config.env),
-    expandLinkTag(),
-    postcssPlugin,
+    compileCss(config),
     fetchPlugin,
     components(componentsConfig),
+    fetchPlugin,
     expandLinkTag(),
-    postcssPlugin,
     envTags(config.env),
     envAttributes(config.env),
-    lowerCssSyntax(get(config, 'css.lightningcss', {})),
-    get(config, 'css.combineMediaQueries') !== false && combineMediaQueries(get(config, 'css.combineMediaQueries', { sort: 'mobile-first' })),
+    compileCss(config),
+    get(config, 'css.combineMediaQueries') !== false
+      && combineMediaQueries(get(config, 'css.combineMediaQueries', { sort: 'mobile-first' })),
+    removeRawStyleAttributes(),
     ...get(
       config,
       'posthtml.plugins.after',

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

@@ -0,0 +1,128 @@
+import postcss from 'postcss'
+import get from 'lodash-es/get.js'
+import { defu as merge } from 'defu'
+import { transform } from 'lightningcss'
+import tailwindcss from '@tailwindcss/postcss'
+import postcssSafeParser from 'postcss-safe-parser'
+import customProperties from 'postcss-custom-properties'
+
+const attributes = new Set([
+  'raw',
+  'plain',
+  'as-is',
+  'uncompiled',
+  'unprocessed',
+])
+
+// export attributes
+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. Tags marked with attribute
+ * names found in `attributes` will be skipped.
+ */
+export function compileCss(config = {}) {
+  return tree => {
+    return new Promise((resolve, reject) => {
+      const stylePromises = []
+
+      tree.walk(node => {
+        if (node && node.tag === 'style' && node.content) {
+          if (node.attrs && Object.keys(node.attrs).some(attr => attributes.has(attr))) {
+            return node
+          }
+
+          const css = Array.isArray(node.content)
+            ? node.content.join('')
+            : node.content
+
+          const promise = processCss(css, config)
+            .then(processedCss => {
+              node.content = [processedCss]
+            })
+            .catch(error => {
+              console.warn('Error processing CSS in style tag:', error.message)
+            })
+
+          stylePromises.push(promise)
+        }
+
+        return node
+      })
+
+      Promise.all(stylePromises)
+        .then(() => resolve(tree))
+        .catch(reject)
+    })
+  }
+}
+
+async function processCss(css, config) {
+  /**
+   * PostCSS pipeline. Plugins defined and added here
+   * will apply to all `<style>` tags in the HTML,
+   * unless marked to be excluded.
+   */
+  let resolveCSSProps = get(config, 'css.resolveProps')
+  if (resolveCSSProps !== false) {
+    resolveCSSProps = merge(resolveCSSProps, { preserve: false })
+  }
+
+  let lightningCssOptions = get(config, 'css.lightning')
+  if (lightningCssOptions !== false) {
+    lightningCssOptions = merge(
+      lightningCssOptions,
+      {
+        targets: {
+          ie: 1,
+        },
+      }
+    )
+  }
+
+  try {
+    const result = await postcss([
+      tailwindcss(get(config, 'css.tailwind', {})),
+      resolveCSSProps && customProperties(resolveCSSProps),
+      ...get(config, 'postcss.plugins', []),
+    ].filter(Boolean)).process(css, merge(
+      get(config, 'postcss.options', {}),
+      {
+        from: config.cwd || './',
+        parser: postcssSafeParser
+      }
+    ))
+
+    /**
+     * Lightning CSS processing
+     *
+     * We use this to lower the modern Tailwind CSS 4 syntax
+     * to be more email-friendly.
+     */
+
+    if (result.css?.trim() && lightningCssOptions !== false) {
+      try {
+        const { code } = transform(
+          merge(
+            lightningCssOptions,
+            {
+              code: Buffer.from(result.css)
+            }
+          )
+        )
+
+        return code.toString()
+      } catch (error) {
+        console.warn('Failed to lower syntax with Lightning CSS:', error.message)
+      }
+    }
+
+    return result.css
+  } catch (error) {
+    console.warn('Error compiling CSS:', error.message)
+    return css
+  }
+}

package/src/posthtml/plugins/removeRawStyleAttributes.js

@@ -0,0 +1,30 @@
+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 && 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)) {
+          if (validAttributeNames.has(attr)) {
+            delete node.attrs[attr]
+          }
+        }
+      }
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+}
+
+export default plugin

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 => {
+/**
+ * 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).then(html => parse(html, getPosthtmlOptions()))
 }
 
-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 === '') {
@@ -32,21 +43,26 @@ export async function inline(html = '', options = {}) {
   options.safelist = new Set([
     ...get(options, 'safelist', []),
     ...[
-      '.body', // Gmail
-      '.gmail', // Gmail
-      '.apple', // Apple Mail
-      '.ios', // Mail on iOS
-      '.ox-', // Open-Xchange
-      '.outlook', // Outlook.com
+      'body', // Gmail
+      'gmail', // Gmail
+      'apple', // Apple Mail
+      'ios', // Mail on iOS
+      'ox-', // Open-Xchange
+      'yahoo', // Yahoo! Mail
+      'outlook', // Outlook Mac and Android
       '[data-ogs', // Outlook.com
-      '.bloop_container', // Airmail
-      '.Singleton', // Apple Mail 10
-      '.unused', // Notes 8
-      '.moz-text-html', // Thunderbird
-      '.mail-detail-content', // Comcast, Libero webmail
+      'bloop_container', // Airmail
+      'Singleton', // Apple Mail 10
+      'unused', // Notes 8
+      'moz-text-html', // Thunderbird
+      'mail-detail-content', // Comcast, Libero webmail
+      'mail-content', // Notion
       'edo', // Edison (all)
       '#msgBody', // Freenet uses #msgBody
-      '.lang' // Fenced code blocks
+      'lang', // Fenced code blocks
+      'ShadowHTML', // Superhuman
+      'spark', // Spark
+      'at-', // Safe class names for container queries
     ],
   ])
 
@@ -63,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
@@ -99,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
@@ -129,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()
       }
     })
 
@@ -152,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)) {
@@ -164,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/transformers/purge.js

@@ -9,20 +9,24 @@ import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 const posthtmlPlugin = options => tree => {
   const defaultSafelist = [
     '*body*', // Gmail
-    '.gmail*', // Gmail
-    '.apple*', // Apple Mail
-    '.ios*', // Mail on iOS
-    '.ox-*', // Open-Xchange
-    '.outlook*', // Outlook.com
+    '*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
+    '*bloop_container*', // Airmail
+    '*Singleton*', // Apple Mail 10
+    '*unused', // Notes 8
+    '*moz-text-html*', // Thunderbird
+    '*mail-detail-content*', // Comcast, Libero webmail
+    '*mail-content-*', // Notion
     '*edo*', // Edison (all)
     '#*', // Freenet uses #msgBody
-    '.lang*' // Fenced code blocks
+    '*lang*', // Fenced code blocks
+    '*ShadowHTML*', // Superhuman
+    '*spark*', // Spark
+    '*at-*', // Safe class names for container queries
   ]
 
   const defaultOptions = {

package/src/transformers/safeClassNames.js

@@ -12,7 +12,8 @@ export default function posthtmlPlugin(options = {}) {
   options = merge({
     replacements: {
       '{': '{',
-      '}': '}'
+      '}': '}',
+      '&': '&',
     }
   }, options)
 

package/src/utils/getConfigByFilePath.js

@@ -118,16 +118,25 @@ export async function readFileConfig(config) {
     }
 
     /**
-     * Override the `content` key in `baseConfig` with the one in `envConfig`.
-     *
-     * This is done so that each build uses its own `content` paths, in
-     * order to avoid compiling unnecessary files.
+     * Override the `build.content` key in `baseConfig` with the one in `envConfig`
+     * if present. We do this so that each build uses its own `content` paths,
+     * in order to avoid compiling unnecessary files.
      */
-    if (Array.isArray(envConfig.content)) {
-      baseConfig.content = []
+    if (envConfig.build && Array.isArray(envConfig.build.content)) {
+      baseConfig.build = baseConfig.build || {}
+      baseConfig.build.content = envConfig.build.content
+      // Remove build.content from envConfig to prevent merging duplicates
+      envConfig = { ...envConfig, build: { ...envConfig.build, content: undefined } }
+    }
+
+    // Merge envConfig and baseConfig, but ensure build.content is not duplicated
+    const merged = merge(envConfig, baseConfig)
+
+    if (baseConfig.build && Array.isArray(baseConfig.build.content)) {
+      merged.build.content = baseConfig.build.content
     }
 
-    return merge(envConfig, baseConfig)
+    return merged
   } catch (_error) {
     throw new Error('Could not compute config')
   }

package/src/posthtml/plugins/lowerCssSyntax.js

@@ -1,43 +0,0 @@
-import { defu as merge } from 'defu'
-import { transform } from 'lightningcss'
-
-const plugin = (options = {}) => tree => {
-  options = merge(options, {
-    targets: options.targets ? {} : {
-      ie: 1,
-    },
-  })
-
-  const process = node => {
-    // Check if this is a style tag with content
-    if (node.tag === 'style' && node.content && Array.isArray(node.content)) {
-      // Get the CSS content from the style tag
-      const cssContent = node.content.join('')
-
-      if (cssContent.trim()) {
-        try {
-          const { code } = transform(
-            merge(
-              options,
-              {
-                code: Buffer.from(cssContent)
-              }
-            )
-          )
-
-          // Replace the content with processed CSS
-          node.content = [code.toString()]
-        } catch (error) {
-          // If processing fails, leave the content unchanged
-          console.warn('Failed to process media queries:', error.message)
-        }
-      }
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-}
-
-export default plugin