better-svelte-email 1.0.3 → 1.1.0-beta.0

package/dist/render/utils/css/resolve-calc-expressions.js

@@ -1,126 +1,163 @@
-import { walk } from 'css-tree';
+import valueParser from 'postcss-value-parser';
+function parseValue(str) {
+    const match = str.match(/^(-?[\d.]+)(%|[a-z]+)?$/i);
+    if (match) {
+        const value = parseFloat(match[1]);
+        const unit = match[2] || '';
+        return {
+            value,
+            unit,
+            type: unit === '%' ? 'percentage' : unit ? 'dimension' : 'number'
+        };
+    }
+    return null;
+}
+function formatValue(parsed) {
+    return `${parsed.value}${parsed.unit}`;
+}
+/**
+ * Splits a calc expression string into tokens (values and operators)
+ * Handles both space-separated and non-space-separated expressions
+ */
+function tokenizeCalcExpression(expr) {
+    const tokens = [];
+    let current = '';
+    for (let i = 0; i < expr.length; i++) {
+        const char = expr[i];
+        if (char === '*' || char === '/') {
+            if (current.trim()) {
+                tokens.push(current.trim());
+            }
+            tokens.push(char);
+            current = '';
+        }
+        else if (char === '+' || char === '-') {
+            // Only treat as operator if not at start and previous char wasn't an operator
+            // (to handle negative numbers and units like 1e-5)
+            if (current.trim() && !/[eE]$/.test(current.trim())) {
+                tokens.push(current.trim());
+                tokens.push(char);
+                current = '';
+            }
+            else {
+                current += char;
+            }
+        }
+        else if (char === ' ') {
+            if (current.trim()) {
+                // Check if next non-space char is an operator
+                let nextNonSpace = i + 1;
+                while (nextNonSpace < expr.length && expr[nextNonSpace] === ' ') {
+                    nextNonSpace++;
+                }
+                const nextChar = expr[nextNonSpace];
+                if (nextChar !== '*' && nextChar !== '/' && nextChar !== '+' && nextChar !== '-') {
+                    tokens.push(current.trim());
+                    current = '';
+                }
+            }
+        }
+        else {
+            current += char;
+        }
+    }
+    if (current.trim()) {
+        tokens.push(current.trim());
+    }
+    return tokens;
+}
 /**
- * Intentionally only resolves `*` and `/` operations without dealing with parenthesis, because this is the only thing required to run Tailwind v4
+ * Intentionally only resolves `*` and `/` operations without dealing with parenthesis,
+ * because this is the only thing required to run Tailwind v4
  */
-export function resolveCalcExpressions(node) {
-    walk(node, {
-        visit: 'Function',
-        enter(func, funcListItem) {
-            if (func.name === 'calc') {
-                /*
-          [
-            { type: 'Dimension', loc: null, value: '0.25', unit: 'rem' },
-            { type: 'Operator', loc: null, value: '*' },
-            { type: 'Number', loc: null, value: '2' }
-            { type: 'Percentage', loc: null, value: '2' }
-          ]
-        */
-                func.children.forEach((child, item) => {
-                    const left = item.prev;
-                    const right = item.next;
-                    if (left &&
-                        right &&
-                        child.type === 'Operator' &&
-                        (left.data.type === 'Dimension' ||
-                            left.data.type === 'Number' ||
-                            left.data.type === 'Percentage') &&
-                        (right.data.type === 'Dimension' ||
-                            right.data.type === 'Number' ||
-                            right.data.type === 'Percentage')) {
-                        if (child.value === '*' || child.value === '/') {
-                            const value = (() => {
-                                if (child.value === '*') {
-                                    return String(Number.parseFloat(left.data.value) * Number.parseFloat(right.data.value));
-                                }
-                                if (right.data.value === '0') {
-                                    return '0';
-                                }
-                                return String(Number.parseFloat(left.data.value) / Number.parseFloat(right.data.value));
-                            })();
-                            if (left.data.type === 'Dimension' && right.data.type === 'Number') {
-                                item.data = {
-                                    type: 'Dimension',
-                                    unit: left.data.unit,
-                                    value
-                                };
-                                func.children.remove(left);
-                                func.children.remove(right);
-                            }
-                            else if (left.data.type === 'Number' && right.data.type === 'Dimension') {
-                                item.data = {
-                                    type: 'Dimension',
-                                    unit: right.data.unit,
-                                    value
-                                };
-                                func.children.remove(left);
-                                func.children.remove(right);
-                            }
-                            else if (left.data.type === 'Number' && right.data.type === 'Number') {
-                                item.data = {
-                                    type: 'Number',
-                                    value
-                                };
-                                func.children.remove(left);
-                                func.children.remove(right);
-                            }
-                            else if (left.data.type === 'Dimension' &&
-                                right.data.type === 'Dimension' &&
-                                left.data.unit === right.data.unit) {
-                                if (child.value === '/') {
-                                    item.data = {
-                                        type: 'Number',
-                                        value
-                                    };
-                                }
-                                else {
-                                    item.data = {
-                                        type: 'Dimension',
-                                        unit: left.data.unit,
-                                        value
-                                    };
-                                }
-                                func.children.remove(left);
-                                func.children.remove(right);
-                            }
-                            else if (left.data.type === 'Percentage' && right.data.type === 'Number') {
-                                item.data = {
-                                    type: 'Percentage',
-                                    value
-                                };
-                                func.children.remove(left);
-                                func.children.remove(right);
-                            }
-                            else if (left.data.type === 'Number' && right.data.type === 'Percentage') {
-                                item.data = {
-                                    type: 'Percentage',
-                                    value
-                                };
-                                func.children.remove(left);
-                                func.children.remove(right);
-                            }
-                            else if (left.data.type === 'Percentage' && right.data.type === 'Percentage') {
-                                if (child.value === '/') {
-                                    item.data = {
-                                        type: 'Number',
-                                        value
-                                    };
-                                }
-                                else {
-                                    item.data = {
-                                        type: 'Percentage',
-                                        value
-                                    };
-                                }
-                                func.children.remove(left);
-                                func.children.remove(right);
-                            }
-                        }
+function evaluateCalcExpression(expr) {
+    const tokens = tokenizeCalcExpression(expr);
+    if (tokens.length === 0)
+        return null;
+    if (tokens.length === 1) {
+        const parsed = parseValue(tokens[0]);
+        return parsed ? formatValue(parsed) : null;
+    }
+    // Process * and / operations (left to right)
+    let i = 0;
+    while (i < tokens.length) {
+        const token = tokens[i];
+        if (token === '*' || token === '/') {
+            const left = parseValue(tokens[i - 1]);
+            const right = parseValue(tokens[i + 1]);
+            if (left && right) {
+                let resultValue;
+                if (token === '*') {
+                    resultValue = left.value * right.value;
+                }
+                else {
+                    if (right.value === 0)
+                        resultValue = 0;
+                    else
+                        resultValue = left.value / right.value;
+                }
+                // Determine result type
+                let resultUnit = '';
+                let resultType = 'number';
+                if (left.type === 'dimension' && right.type === 'number') {
+                    resultUnit = left.unit;
+                    resultType = 'dimension';
+                }
+                else if (left.type === 'number' && right.type === 'dimension') {
+                    resultUnit = right.unit;
+                    resultType = 'dimension';
+                }
+                else if (left.type === 'dimension' && right.type === 'dimension') {
+                    if (token === '/') {
+                        resultType = 'number';
+                    }
+                    else {
+                        resultUnit = left.unit;
+                        resultType = 'dimension';
                     }
-                });
-                if (func.children.size === 1 && func.children.first) {
-                    funcListItem.data = func.children.first;
                 }
+                else if (left.type === 'percentage' || right.type === 'percentage') {
+                    if (token === '/' && left.type === 'percentage' && right.type === 'percentage') {
+                        resultType = 'number';
+                    }
+                    else {
+                        resultUnit = '%';
+                        resultType = 'percentage';
+                    }
+                }
+                // Replace the three tokens with the result
+                const result = formatValue({ value: resultValue, unit: resultUnit, type: resultType });
+                tokens.splice(i - 1, 3, result);
+                i = Math.max(0, i - 1); // Go back to check for more operations
+                continue;
             }
         }
+        i++;
+    }
+    if (tokens.length === 1) {
+        return tokens[0];
+    }
+    // If we still have multiple tokens, we couldn't fully evaluate
+    return null;
+}
+export function resolveCalcExpressions(root) {
+    root.walkDecls((decl) => {
+        if (!decl.value.includes('calc('))
+            return;
+        const parsed = valueParser(decl.value);
+        parsed.walk((node) => {
+            if (node.type === 'function' && node.value === 'calc') {
+                // Get the inner content of calc()
+                const innerContent = valueParser.stringify(node.nodes);
+                const result = evaluateCalcExpression(innerContent);
+                if (result) {
+                    // Replace the function with the result
+                    node.type = 'word';
+                    node.value = result;
+                    node.nodes = [];
+                }
+            }
+        });
+        decl.value = valueParser.stringify(parsed.nodes);
     });
 }

package/dist/render/utils/css/sanitize-declarations.d.ts

@@ -1,4 +1,4 @@
-import { type CssNode } from 'css-tree';
+import type { Root } from 'postcss';
 /**
  * Meant to do all the things necessary, in a per-declaration basis, to have the best email client
  * support possible.
@@ -12,4 +12,4 @@ import { type CssNode } from 'css-tree';
  * - convert `margin-inline` into `margin-left` and `margin-right`;
  * - convert `margin-block` into `margin-top` and `margin-bottom`.
  */
-export declare function sanitizeDeclarations(nodeContainingDeclarations: CssNode): void;
+export declare function sanitizeDeclarations(root: Root): void;