@maizzle/framework 6.0.0-8 → 6.0.0-9

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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-9] - 2025-07-16
+
+### Changed
+
+- refactor: resolving css props acacc14
+
 ## [6.0.0-8] - 2025-07-16
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "6.0.0-8",
+  "version": "6.0.0-9",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -71,8 +71,7 @@
     "ora": "^8.1.0",
     "pathe": "^2.0.0",
     "postcss": "^8.4.49",
-    "postcss-calc": "^10.0.2",
-    "postcss-css-variables": "^0.19.0",
+    "postcss-custom-properties": "^14.0.6",
     "postcss-safe-parser": "^7.0.0",
     "postcss-sort-media-queries": "^5.2.0",
     "posthtml": "^0.16.6",

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

@@ -1,11 +1,10 @@
 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 customProperties from 'postcss-custom-properties'
 
 const attributes = new Set([
   'raw',
@@ -31,7 +30,7 @@ export function compileCss(config = {}) {
       const stylePromises = []
 
       tree.walk(node => {
-        if (node.tag === 'style' && node.content) {
+        if (node && node.tag === 'style' && node.content) {
           if (node.attrs && Object.keys(node.attrs).some(attr => attributes.has(attr))) {
             return node
           }
@@ -67,29 +66,26 @@ async function processCss(css, config) {
    * 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,
-      },
-    }
-  )
+  const resolveCSSProps = merge(get(config, 'css.resolveProps', {}), {preseve: false})
+
+  let lightningCssOptions = get(config, 'css.lightning')
+  if (lightningCssOptions !== false) {
+    lightningCssOptions = merge(
+      lightningCssOptions,
+      {
+        targets: {
+          ie: 1,
+        },
+      }
+    )
+  }
 
   try {
-    const processor = postcss([
+    const result = await postcss([
       tailwindcss(get(config, 'css.tailwind', {})),
-      resolveCSSProps !== false && cssVariables(resolveCSSProps),
-      resolveCalc !== false && postcssCalc(resolveCalc),
+      customProperties(resolveCSSProps),
       ...get(config, 'postcss.plugins', []),
-    ].filter(Boolean))
-
-    const result = await processor.process(css, merge(
+    ]).process(css, merge(
       get(config, 'postcss.options', {}),
       {
         from: config.cwd || './',
@@ -104,7 +100,7 @@ async function processCss(css, config) {
      * to be more email-friendly.
      */
 
-    if (result.css?.trim()) {
+    if (result.css?.trim() && lightningCssOptions !== false) {
       try {
         const { code } = transform(
           merge(

package/src/posthtml/plugins/removeRawStyleAttributes.js

@@ -10,7 +10,7 @@ import { validAttributeNames } from './postcss/compileCss.js'
  */
 const plugin = () => tree => {
   const process = node => {
-    if (node.tag === 'style') {
+    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)) {