@maizzle/framework 6.0.0-2 → 6.0.0-4

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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-3] - 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-2] - 2025-07-11
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "6.0.0-2",
+  "version": "6.0.0-4",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -86,7 +86,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,51 +6,16 @@ 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'
 
 // PostCSS
-import tailwindcss from '@tailwindcss/postcss'
-import postcssCalc from 'postcss-calc'
-import cssVariables from 'postcss-css-variables'
-import postcssSafeParser from 'postcss-safe-parser'
-import removeDuplicateSelectors from './plugins/postcss/removeDuplicateSelectors.js'
-import cleanupTailwindArtifacts from './plugins/postcss/cleanupTailwindArtifacts.js'
-
-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),
-      removeDuplicateSelectors(),
-      cleanupTailwindArtifacts(get(config, 'css.cleanup', {})),
-      ...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.
@@ -106,18 +71,15 @@ export async function process(html = '', config = {}) {
 
   return posthtml([
     ...beforePlugins,
-    envTags(config.env),
-    envAttributes(config.env),
-    expandLinkTag(),
-    postcssPlugin,
     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' })),
     ...get(
       config,
       'posthtml.plugins.after',

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

@@ -0,0 +1,137 @@
+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'
+
+const validAttributeNames = new Set([
+  'raw',
+  'plain',
+  'as-is',
+  'uncompiled',
+  'unprocessed',
+])
+
+/**
+ * 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.
+ */
+export default function compile(config = {}) {
+  return tree => {
+    return new Promise((resolve, reject) => {
+      const stylePromises = []
+
+      tree.walk(node => {
+        if (node.tag === 'style' && node.content) {
+          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
+          }
+
+          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.
+   */
+  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,
+      },
+    }
+  )
+
+  try {
+    const processor = postcss([
+      tailwindcss(get(config, 'css.tailwind', {})),
+      resolveCSSProps !== false && cssVariables(resolveCSSProps),
+      resolveCalc !== false && postcssCalc(resolveCalc),
+      removeDuplicateSelectors(),
+      cleanupTailwindArtifacts(get(config, 'css.cleanup', {})),
+      ...get(config, 'postcss.plugins', []),
+    ].filter(Boolean))
+
+    const result = await processor.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()) {
+      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/transformers/inline.js

@@ -32,21 +32,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
     ],
   ])
 

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/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