@maizzle/framework 6.0.0-1 → 6.0.0-3

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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-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-3",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",

package/src/posthtml/index.js

@@ -18,6 +18,8 @@ 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'
 
@@ -36,6 +38,8 @@ export async function process(html = '', config = {}) {
       tailwindcss(get(config, 'css.tailwind', {})),
       resolveCSSProps !== false && cssVariables(resolveCSSProps),
       resolveCalc !== false && postcssCalc(resolveCalc),
+      removeDuplicateSelectors(),
+      cleanupTailwindArtifacts(get(config, 'css.cleanup', {})),
       ...get(config, 'postcss.plugins', []),
     ],
     merge(

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

@@ -0,0 +1,78 @@
+/**
+ * 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

@@ -0,0 +1,35 @@
+/**
+ * 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

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)