@maizzle/framework 6.0.0-0 → 6.0.0-10

package/CHANGELOG.md

@@ -4,6 +4,153 @@ 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-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
+
+- types for `css.combineMediaQueries` and `css.lightningcss` options in the config
+
+### Changed
+
+- made `combineMediaQueries` configurable through the `css.combineMediaQueries` option, which can be set to an object with options for `postcss-sort-media-queries` or to `false` to disable it
+- made `lightningcss` configurable through the `css.lightningcss` option
+
+### Fixed
+
+- fixed an issue with CSS syntax lowering, we now use `lightningcss` directly instead of `postcss-lightningcss` which was it to trip on CSS inside `style=""` attributes
+
+## [6.0.0-0] - 2025-07-10
+
+This release adds initial support for Tailwind CSS v4 in Maizzle.
+
+To jump right in, simply use the `next` branch of the Starter:
+
+```sh
+git clone -b next https://github.com/maizzle/maizzle.git
+```
+
+Or, if you have a project:
+
+1. Update `package.json`:
+
+  ```json
+  {
+    "private": true,
+    "type": "module",
+    "scripts": {
+      "dev": "maizzle serve",
+      "build": "maizzle build"
+    },
+    "dependencies": {
+      "@maizzle/framework": "next",
+      "@maizzle/tailwindcss": "latest"
+    }
+  }
+  ```
+
+2. Update the `style` tag in `layouts/main.html`:
+
+  ```html
+  <style>
+    @import "@maizzle/tailwindcss";
+
+    img {
+      @apply max-w-full align-middle;
+    }
+  </style>
+  ```
+
+There are still things missign and/or broken:
+
+- inline CSS like the `line-height` on spacers is broken/missing
+- `tailwindcss-email-variants` and `tailwindcss-mso` are not ported yet
+- some CSS duplication and artifacts still present in the final build
+
+---
+
+- feat: add tailwindcss v4 support  8b5596e
+
+https://github.com/maizzle/framework/compare/v5.2.1...v6.0.0-0
+
 ## [5.2.1] - 2025-06-25
 
 This is just a maintenance release to update dependencies.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "6.0.0-0",
+  "version": "6.0.0-10",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -65,14 +65,13 @@
     "is-url-superb": "^6.1.0",
     "istextorbinary": "^9.5.0",
     "juice": "^11.0.0",
+    "lightningcss": "^1.30.1",
     "lodash-es": "^4.17.21",
     "morphdom": "^2.7.4",
     "ora": "^8.1.0",
     "pathe": "^2.0.0",
     "postcss": "^8.4.49",
-    "postcss-calc": "^10.0.2",
-    "postcss-css-variables": "^0.19.0",
-    "postcss-lightningcss": "^1.0.1",
+    "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,56 +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 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 postcssLightningCss from 'postcss-lightningcss'
-
-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),
-      postcssLightningCss({
-        lightningcssOptions: {
-          errorRecovery: true,
-          minify: false,
-          targets: {
-            ie: 1,
-          }
-        }
-      }),
-      ...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.
@@ -111,17 +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),
-    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',
@@ -129,7 +90,7 @@ export async function process(html = '', config = {}) {
         ? []
         : get(config, 'posthtml.plugins', [])
     ),
-  ])
+  ].filter(Boolean))
     .process(html, posthtmlOptions)
     .then(result => ({
       config: merge(config, { page: config }),

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 => {
-  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 === '') {
@@ -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,30 +195,42 @@ 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
-     */
+    // This is inlined_tree
+    return node
+  })
 
-    // Loop over selectors that we found in the <style> tags
-    selectors.forEach(({ name, prop }) => {
-      const elements = $(name).get()
+  /**
+   * CSS optimizations
+   *
+   * `preferUnitlessValues` - Replace unit values with `0` where possible
+   * `removeInlinedSelectors` - Remove inlined selectors from the HTML
+   */
 
+  const $ = cheerio.load(render(inlined_tree), {
+    xml: {
+      decodeEntities: false,
+      xmlMode: false,
+    }
+  })
+
+  // 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 = {}
 
-          // 1. `preferUnitlessValues`
+          // `preferUnitlessValues`
           if (styleAttr) {
             try {
               const root = postcss.parse(`* { ${styleAttr} }`)
@@ -213,13 +256,13 @@ export async function inline(html = '', options = {}) {
                 'style',
                 Object.entries(inlineStyles).map(([property, value]) => `${property}: ${value}`).join('; ')
               )
-            } catch {}
+            } catch { }
           }
 
           // Get the classes from the element's class attribute
           const classes = $(el).attr('class')
 
-          // 2. `removeInlinedSelectors`
+          // `removeInlinedSelectors`
           if (options.removeInlinedSelectors && classes) {
             const classList = classes.split(' ')
 
@@ -240,12 +283,24 @@ export async function inline(html = '', options = {}) {
           }
         })
       }
-    })
+    } 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/types/config.d.ts

@@ -14,9 +14,10 @@ import type { BaseURLConfig } from 'posthtml-base-url';
 import type URLParametersConfig from './urlParameters';
 import type { PostCssCalcOptions } from 'postcss-calc';
 import type { PostHTMLFetchConfig } from 'posthtml-fetch';
-import type { Config as TailwindConfig } from 'tailwindcss';
 import type { PostHTMLComponents } from 'posthtml-component';
 import type { PostHTMLExpressions } from 'posthtml-expressions';
+import type { TransformOptions, CustomAtRules } from 'lightningcss';
+import type { PostCSSSortMediaQueriesOptions } from './css/combineMediaQueries';
 
 export default interface Config {
   /**
@@ -217,9 +218,30 @@ export default interface Config {
     sixHex?: boolean;
 
     /**
-     * Use a custom Tailwind CSS configuration object.
+     * Configure Lightning CSS.
+     *
+     * This is used mainly for lowering CSS syntax to be more compatible with email clients.
+     */
+    lightningcss?: TransformOptions<CustomAtRules>;
+
+    /**
+     * Combine media queries in your CSS.
+     *
+     * @default { sort: 'mobile-first' }
+     *
+     * @example
+     * ```
+     * export default {
+     *   css: {
+     *     combineMediaQueries: {
+     *       sort: 'desktop-first',
+     *       onlyTopLevel: true,
+     *     }
+     *   }
+     * }
+     * ```
      */
-    tailwind?: TailwindConfig;
+    combineMediaQueries?: PostCSSSortMediaQueriesOptions;
   }
 
   /**

package/types/css/combineMediaQueries.d.ts

@@ -0,0 +1,90 @@
+import type { Plugin } from 'postcss';
+
+/**
+ * Sort function for media queries.
+ * Takes two media query strings and returns a number indicating their relative order.
+ */
+export type SortFunction = (a: string, b: string) => number;
+
+/**
+ * Configuration object for sort-css-media-queries library.
+ */
+export interface SortConfiguration {
+  [key: string]: any;
+}
+
+/**
+ * Options for the postcss-sort-media-queries plugin.
+ */
+export interface PostCSSSortMediaQueriesOptions {
+  /**
+   * Sorting method for media queries.
+   *
+   * @default 'mobile-first'
+   *
+   * @example
+   * ```
+   * // Use built-in mobile-first sorting
+   * sort: 'mobile-first'
+   *
+   * // Use built-in desktop-first sorting
+   * sort: 'desktop-first'
+   *
+   * // Use custom sorting function
+   * sort: (a, b) => a.localeCompare(b)
+   * ```
+   */
+  sort?: 'mobile-first' | 'desktop-first' | SortFunction;
+
+  /**
+   * Custom configuration object for the sort-css-media-queries library.
+   * When provided, it will be used to create a custom sort function.
+   *
+   * @default false
+   *
+   * @example
+   * ```
+   * configuration: {
+   *   unitlessMqAlwaysFirst: true,
+   *   sort: 'mobile-first'
+   * }
+   * ```
+   */
+  configuration?: false | SortConfiguration;
+
+  /**
+   * Whether to only process media queries at the top level (direct children of root).
+   * When true, nested media queries will be ignored.
+   *
+   * @default false
+   *
+   * @example
+   * ```
+   * onlyTopLevel: true
+   * ```
+   */
+  onlyTopLevel?: boolean;
+}
+
+/**
+ * PostCSS plugin that sorts CSS media queries.
+ *
+ * @param options - Plugin configuration options
+ * @returns PostCSS plugin instance
+ *
+ * @example
+ * ```
+ * import postcss from 'postcss';
+ * import sortMediaQueries from 'postcss-sort-media-queries';
+ *
+ * postcss([
+ *   sortMediaQueries({
+ *     sort: 'mobile-first',
+ *     onlyTopLevel: false
+ *   })
+ * ])
+ * ```
+ */
+declare function postcssSortMediaQueries(options?: PostCSSSortMediaQueriesOptions): Plugin;
+
+export default postcssSortMediaQueries;