@maizzle/framework 5.0.8 → 5.1.0

package/CHANGELOG.md

@@ -4,6 +4,27 @@ 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).
 
+## [5.1.0] - 2025-06-13
+
+This release adds support for using Tailwind CSS color opacity modifiers in Gmail by automatically converting modern rgb/a syntax to the legacy, comma-separated syntax.
+
+- feat: use commas instead of slash for css color opacity modifiers f26774b
+
+## [5.0.9] - 2025-06-12
+
+This release fixes an issue where builds failed because `preferUnitlessValues` (which is on by default) was throwing an error when encountering invalid inline CSS.
+
+- fix: skip parsing invalid css in `preferUnitlessValues` e891c14
+
+## [5.0.8] - 2025-04-15
+
+This release fixes an issue that prevented the use of `posthtml.plugins.before` and `posthtml.plugins.after` simultaneously.
+
+### Fixed
+
+- fix: `posthtml.plugins.before` 4374706
+- build(deps): bump vite from 6.2.5 to 6.2.6 cafa1f6
+
 ## [5.0.7] - 2025-04-03
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.8",
+  "version": "5.1.0",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -70,6 +70,7 @@
     "pathe": "^2.0.0",
     "postcss": "^8.4.49",
     "postcss-calc": "^10.0.2",
+    "postcss-color-functional-notation": "^7.0.10",
     "postcss-css-variables": "^0.19.0",
     "postcss-import": "^16.1.0",
     "postcss-safe-parser": "^7.0.0",

package/src/posthtml/index.js

@@ -17,6 +17,7 @@ import postcssCalc from 'postcss-calc'
 import postcssImport from 'postcss-import'
 import cssVariables from 'postcss-css-variables'
 import postcssSafeParser from 'postcss-safe-parser'
+import postcssColorFunctionalNotation from 'postcss-color-functional-notation'
 
 import defaultComponentsConfig from './defaultComponentsConfig.js'
 
@@ -36,6 +37,7 @@ export async function process(html = '', config = {}) {
       tailwindcss(get(config, 'css.tailwind', {})),
       resolveCSSProps !== false && cssVariables(resolveCSSProps),
       resolveCalc !== false && postcssCalc(resolveCalc),
+      postcssColorFunctionalNotation(),
       ...get(config, 'postcss.plugins', []),
     ],
     merge(

package/src/transformers/inline.js

@@ -189,30 +189,31 @@ export async function inline(html = '', options = {}) {
 
           // 1. `preferUnitlessValues`
           if (styleAttr) {
-            // Parse the inline styles using postcss
-            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('; ')
-            )
+            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 {}
           }
 
           // Get the classes from the element's class attribute