@maizzle/framework 6.0.0-1 → 6.0.0-2

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-2",
   "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