npm - better-svelte-email - Versions diffs - 1.0.3 → 1.1.0-beta.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/README.md CHANGED Viewed

@@ -31,7 +31,7 @@ See the [documentation](https://better-svelte-email.konixy.fr/docs) for a comple
 - **Tailwind v4 Support** - Transforms Tailwind classes to inline styles for email clients
 - **Built-in Email Preview** - Visual email preview and test sending
 - **TypeScript First** - Fully typed with comprehensive type definitions
-- **Well Tested** - Extensive test coverage with unit and integration tests
+- **Well Tested** - >90% test coverage with unit and integration tests
 _See [Roadmap](./ROADMAP.md) for future features and planned improvements._

package/dist/render/index.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { render as svelteRender } from 'svelte/server';
 import { parse, serialize } from 'parse5';
+import postcss from 'postcss';
 import { walk } from './utils/html/walk.js';
 import { setupTailwind } from './utils/tailwindcss/setup-tailwind.js';
 import { sanitizeStyleSheet } from './utils/css/sanitize-stylesheet.js';
 import { extractRulesPerClass } from './utils/css/extract-rules-per-class.js';
 import { getCustomProperties } from './utils/css/get-custom-properties.js';
-import { generate, List } from 'css-tree';
 import { sanitizeNonInlinableRules } from './utils/css/sanitize-non-inlinable-rules.js';
 import { addInlinedStylesToElement } from './utils/tailwindcss/add-inlined-styles-to-element.js';
 import { isValidNode } from './utils/html/is-valid-node.js';
@@ -80,10 +80,11 @@ export default class Renderer {
         sanitizeStyleSheet(styleSheet);
         const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = extractRulesPerClass(styleSheet, classesUsed);
         const customProperties = getCustomProperties(styleSheet);
-        const nonInlineStyles = {
-            type: 'StyleSheet',
-            children: new List().fromArray(Array.from(nonInlinableRules.values()))
-        };
+        // Create a new Root for non-inline styles
+        const nonInlineStyles = postcss.root();
+        for (const rule of nonInlinableRules.values()) {
+            nonInlineStyles.append(rule.clone());
+        }
         sanitizeNonInlinableRules(nonInlineStyles);
         const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
         let appliedNonInlineStyles = false;
@@ -105,7 +106,7 @@ export default class Renderer {
         }
         if (hasHead && hasNonInlineStylesToApply) {
             appliedNonInlineStyles = true;
-            serialized = serialized.replace('<head>', '<head>' + '<style>' + generate(nonInlineStyles) + '</style>');
+            serialized = serialized.replace('<head>', '<head>' + '<style>' + nonInlineStyles.toString() + '</style>');
         }
         if (hasNonInlineStylesToApply && !appliedNonInlineStyles) {
             throw new Error(`You are trying to use the following Tailwind classes that cannot be inlined: ${Array.from(nonInlinableRules.keys()).join(' ')}.

package/dist/render/utils/css/extract-rules-per-class.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { type CssNode, type Rule } from 'css-tree';
-export declare function extractRulesPerClass(root: CssNode, classes: string[]): {
+import type { Root, Rule } from 'postcss';
+export declare function extractRulesPerClass(root: Root, classes: string[]): {
     inlinable: Map<string, Rule>;
     nonInlinable: Map<string, Rule>;
 };

package/dist/render/utils/css/extract-rules-per-class.js CHANGED Viewed

@@ -1,32 +1,21 @@
-import { string, walk } from 'css-tree';
 import { isRuleInlinable } from './is-rule-inlinable.js';
+function unescapeClassName(name) {
+    return name.replace(/\\(.)/g, '$1');
+}
 export function extractRulesPerClass(root, classes) {
     const classSet = new Set(classes);
     const inlinableRules = new Map();
     const nonInlinableRules = new Map();
-    walk(root, {
-        visit: 'Rule',
-        enter(rule) {
-            const selectorClasses = [];
-            walk(rule, {
-                visit: 'ClassSelector',
-                enter(classSelector) {
-                    selectorClasses.push(string.decode(classSelector.name));
-                }
-            });
-            if (isRuleInlinable(rule)) {
-                for (const className of selectorClasses) {
-                    if (classSet.has(className)) {
-                        inlinableRules.set(className, rule);
-                    }
-                }
-            }
-            else {
-                for (const className of selectorClasses) {
-                    if (classSet.has(className)) {
-                        nonInlinableRules.set(className, rule);
-                    }
-                }
+    root.walkRules((rule) => {
+        // Extract class names from selector using regex
+        // The regex matches class names including escaped characters (like \: or \/)
+        // Note: \\.  must come FIRST in the alternation to properly match escapes
+        const classMatches = rule.selector.matchAll(/\.((?:\\.|[^\s.:>+~[#,])+)/g);
+        const selectorClasses = [...classMatches].map((m) => unescapeClassName(m[1]));
+        const targetMap = isRuleInlinable(rule) ? inlinableRules : nonInlinableRules;
+        for (const className of selectorClasses) {
+            if (classSet.has(className)) {
+                targetMap.set(className, rule);
             }
         }
     });

package/dist/render/utils/css/get-custom-properties.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-import { type CssNode, type Declaration } from 'css-tree';
+import type { Root, Declaration } from 'postcss';
 export interface CustomProperty {
     syntax?: Declaration;
     inherits?: Declaration;
     initialValue?: Declaration;
 }
 export type CustomProperties = Map<string, CustomProperty>;
-export declare function getCustomProperties(node: CssNode): Map<string, CustomProperty>;
+export declare function getCustomProperties(root: Root): CustomProperties;

package/dist/render/utils/css/get-custom-properties.js CHANGED Viewed

@@ -1,36 +1,21 @@
-import { generate, walk } from 'css-tree';
-export function getCustomProperties(node) {
+export function getCustomProperties(root) {
     const customProperties = new Map();
-    walk(node, {
-        visit: 'Atrule',
-        enter(atrule) {
-            if (atrule.name === 'property' && atrule.prelude) {
-                const prelude = generate(atrule.prelude);
-                if (prelude.startsWith('--')) {
-                    let syntax;
-                    let inherits;
-                    let initialValue;
-                    walk(atrule, {
-                        visit: 'Declaration',
-                        enter(declaration) {
-                            if (declaration.property === 'syntax') {
-                                syntax = declaration;
-                            }
-                            if (declaration.property === 'inherits') {
-                                inherits = declaration;
-                            }
-                            if (declaration.property === 'initial-value') {
-                                initialValue = declaration;
-                            }
-                        }
-                    });
-                    customProperties.set(prelude, {
-                        syntax,
-                        inherits,
-                        initialValue
-                    });
+    root.walkAtRules('property', (atRule) => {
+        const propertyName = atRule.params.trim();
+        if (propertyName.startsWith('--')) {
+            const prop = {};
+            atRule.walkDecls((decl) => {
+                if (decl.prop === 'syntax') {
+                    prop.syntax = decl;
                 }
-            }
+                if (decl.prop === 'inherits') {
+                    prop.inherits = decl;
+                }
+                if (decl.prop === 'initial-value') {
+                    prop.initialValue = decl;
+                }
+            });
+            customProperties.set(propertyName, prop);
         }
     });
     return customProperties;

package/dist/render/utils/css/is-rule-inlinable.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { type Rule } from 'css-tree';
+import type { Rule } from 'postcss';
 export declare function isRuleInlinable(rule: Rule): boolean;

package/dist/render/utils/css/is-rule-inlinable.js CHANGED Viewed

@@ -1,6 +1,32 @@
-import { find } from 'css-tree';
+// At-rules that prevent inlining when found inside a rule (CSS nesting)
+const NON_INLINABLE_AT_RULES = new Set(['media', 'supports', 'container', 'document']);
 export function isRuleInlinable(rule) {
-    const hasAtRuleInside = find(rule, (node) => node.type === 'Atrule') !== null;
-    const hasPseudoSelector = find(rule, (node) => node.type === 'PseudoClassSelector' || node.type === 'PseudoElementSelector') !== null;
-    return !hasAtRuleInside && !hasPseudoSelector;
+    // Check if rule CONTAINS a conditional at-rule (for CSS nesting like Tailwind v4)
+    // e.g., .sm\:bg-blue-300 { @media (width >= 40rem) { ... } }
+    let hasAtRuleInside = false;
+    rule.walk((node) => {
+        if (node.type === 'atrule') {
+            hasAtRuleInside = true;
+            return false; // Stop walking
+        }
+    });
+    if (hasAtRuleInside) {
+        return false;
+    }
+    // Check if rule is INSIDE a conditional at-rule (media query, etc.)
+    // Note: @layer is just a grouping mechanism, it doesn't prevent inlining
+    let parent = rule.parent;
+    while (parent && parent.type !== 'root') {
+        if (parent.type === 'atrule') {
+            const atRule = parent;
+            if (NON_INLINABLE_AT_RULES.has(atRule.name)) {
+                return false;
+            }
+        }
+        parent = parent.parent;
+    }
+    // Check for pseudo selectors in the selector string
+    // Matches :hover, ::before, :nth-child(), etc.
+    const hasPseudoSelector = /::?[\w-]+(\([^)]*\))?/.test(rule.selector);
+    return !hasPseudoSelector;
 }

package/dist/render/utils/css/make-inline-styles-for.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-import { type CssNode } from 'css-tree';
+import type { Rule } from 'postcss';
 import type { CustomProperties } from './get-custom-properties.js';
-export declare function makeInlineStylesFor(inlinableRules: CssNode[], customProperties: CustomProperties): string;
+export declare function makeInlineStylesFor(inlinableRules: Rule[], customProperties: CustomProperties): string;

package/dist/render/utils/css/make-inline-styles-for.js CHANGED Viewed

@@ -1,56 +1,53 @@
-import { generate, walk } from 'css-tree';
-import { unwrapValue } from './unwrap-value.js';
+import valueParser from 'postcss-value-parser';
 export function makeInlineStylesFor(inlinableRules, customProperties) {
     let styles = '';
+    // Collect local variable declarations
     const localVariableDeclarations = new Map();
     for (const rule of inlinableRules) {
-        walk(rule, {
-            visit: 'Declaration',
-            enter(declaration) {
-                if (declaration.property.startsWith('--')) {
-                    localVariableDeclarations.set(declaration.property, declaration);
-                }
+        rule.walkDecls((decl) => {
+            if (decl.prop.startsWith('--')) {
+                localVariableDeclarations.set(decl.prop, decl);
             }
         });
     }
+    // Process rules and resolve variables
     for (const rule of inlinableRules) {
-        walk(rule, {
-            visit: 'Function',
-            enter(func, funcParentListItem) {
-                if (func.name === 'var') {
-                    let variableName;
-                    walk(func, {
-                        visit: 'Identifier',
-                        enter(identifier) {
-                            variableName = identifier.name;
-                            return this.break;
-                        }
-                    });
-                    if (variableName) {
-                        const definition = localVariableDeclarations.get(variableName);
-                        if (definition) {
-                            funcParentListItem.data = unwrapValue(definition.value);
-                        }
-                        else {
-                            // For most variables tailwindcss defines, they also define a custom
-                            // property for them with an initial value that we can inline here
-                            const customProperty = customProperties.get(variableName);
-                            if (customProperty?.initialValue) {
-                                funcParentListItem.data = unwrapValue(customProperty.initialValue.value);
+        rule.walkDecls((decl) => {
+            // Skip variable declarations
+            if (decl.prop.startsWith('--'))
+                return;
+            let value = decl.value;
+            // Resolve var() references
+            if (value.includes('var(')) {
+                const parsed = valueParser(value);
+                parsed.walk((node) => {
+                    if (node.type === 'function' && node.value === 'var') {
+                        const varNameNode = node.nodes[0];
+                        const variableName = varNameNode ? valueParser.stringify(varNameNode).trim() : '';
+                        if (variableName) {
+                            // Check local declarations first
+                            const localDef = localVariableDeclarations.get(variableName);
+                            if (localDef) {
+                                node.type = 'word';
+                                node.value = localDef.value;
+                                node.nodes = [];
+                            }
+                            else {
+                                // Check custom properties (from @property rules)
+                                const customProp = customProperties.get(variableName);
+                                if (customProp?.initialValue) {
+                                    node.type = 'word';
+                                    node.value = customProp.initialValue.value;
+                                    node.nodes = [];
+                                }
                             }
                         }
                     }
-                }
-            }
-        });
-        walk(rule, {
-            visit: 'Declaration',
-            enter(declaration) {
-                if (declaration.property.startsWith('--')) {
-                    return;
-                }
-                styles += `${declaration.property}: ${generate(declaration.value)} ${declaration.important ? '!important' : ''};`;
+                });
+                value = valueParser.stringify(parsed.nodes);
             }
+            const important = decl.important ? '!important' : '';
+            styles += `${decl.prop}: ${value} ${important};`;
         });
     }
     return styles;

package/dist/render/utils/css/resolve-all-css-variables.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-import { type CssNode, type Declaration } from 'css-tree';
+import type { Root, Declaration } from 'postcss';
 export interface VariableDefinition {
     declaration: Declaration;
-    path: CssNode[];
+    selector: string;
     variableName: string;
     definition: string;
 }
-export declare function resolveAllCssVariables(node: CssNode): void;
+export declare function resolveAllCssVariables(root: Root): void;

package/dist/render/utils/css/resolve-all-css-variables.js CHANGED Viewed

@@ -1,123 +1,135 @@
-import { generate, parse, walk } from 'css-tree';
-function doSelectorsIntersect(first, second) {
-    const firstStringified = generate(first);
-    const secondStringified = generate(second);
-    if (firstStringified === secondStringified) {
-        return true;
+import valueParser from 'postcss-value-parser';
+function getSelector(decl) {
+    const parent = decl.parent;
+    if (parent?.type === 'rule') {
+        return parent.selector;
     }
-    let hasSomeUniversal = false;
-    const walker = (node, _parentListItem, parentList) => {
-        if (hasSomeUniversal)
-            return;
-        if (node.type === 'PseudoClassSelector' && node.name === 'root') {
-            hasSomeUniversal = true;
+    return '*';
+}
+function getAtRuleSelector(decl) {
+    let parent = decl.parent;
+    while (parent) {
+        if (parent.type === 'atrule') {
+            // Check if parent of atrule is a rule
+            const atRuleParent = parent.parent;
+            if (atRuleParent?.type === 'rule') {
+                return atRuleParent.selector;
+            }
         }
-        if (node.type === 'TypeSelector' && node.name === '*' && parentList.size === 1) {
-            hasSomeUniversal = true;
+        if (parent.type === 'rule') {
+            return parent.selector;
         }
-    };
-    walk(first, walker);
-    walk(second, walker);
-    if (hasSomeUniversal) {
-        return true;
+        parent = parent.parent;
+    }
+    return undefined;
+}
+function isInAtRule(decl) {
+    let parent = decl.parent;
+    while (parent) {
+        if (parent.type === 'atrule') {
+            return true;
+        }
+        parent = parent.parent;
+    }
+    return false;
+}
+function isInPropertiesLayer(decl) {
+    let parent = decl.parent;
+    while (parent) {
+        if (parent.type === 'atrule') {
+            const atRule = parent;
+            if (atRule.name === 'layer' && atRule.params?.includes('properties')) {
+                return true;
+            }
+        }
+        parent = parent.parent;
     }
     return false;
 }
-export function resolveAllCssVariables(node) {
+function doSelectorsIntersect(first, second) {
+    if (first === second)
+        return true;
+    // Check for universal selectors
+    if (first.includes(':root') || second.includes(':root'))
+        return true;
+    if (first === '*' || second === '*')
+        return true;
+    return false;
+}
+export function resolveAllCssVariables(root) {
     const variableDefinitions = new Set();
-    const variableUses = new Set();
-    const path = [];
-    walk(node, {
-        leave() {
-            path.shift();
-        },
-        enter(node) {
-            if (node.type === 'Declaration') {
-                const declaration = node;
-                // Ignores @layer (properties) { ... } to avoid variable resolution conflicts
-                if (path.some((ancestor) => ancestor.type === 'Atrule' &&
-                    ancestor.name === 'layer' &&
-                    ancestor.prelude !== null &&
-                    generate(ancestor.prelude).includes('properties'))) {
-                    path.unshift(node);
-                    return;
-                }
-                if (/--[\S]+/.test(declaration.property)) {
-                    variableDefinitions.add({
-                        declaration,
-                        path: [...path],
-                        variableName: declaration.property,
-                        definition: generate(declaration.value)
-                    });
-                }
-                else {
-                    function parseVariableUsesFrom(node) {
-                        walk(node, {
-                            visit: 'Function',
-                            enter(funcNode) {
-                                if (funcNode.name === 'var') {
-                                    const children = funcNode.children.toArray();
-                                    const name = generate(children[0]);
-                                    const fallback =
-                                    // The second argument should be an "," Operator Node,
-                                    // such that the actual fallback is only in the third argument
-                                    children[2] ? generate(children[2]) : undefined;
-                                    variableUses.add({
-                                        declaration,
-                                        path: [...path],
-                                        fallback,
-                                        variableName: name,
-                                        raw: generate(funcNode)
-                                    });
-                                    if (fallback?.includes('var(')) {
-                                        const parsedFallback = parse(fallback, {
-                                            context: 'value'
-                                        });
-                                        parseVariableUsesFrom(parsedFallback);
-                                    }
-                                }
-                            }
+    const variableUses = [];
+    // First pass: collect variable definitions and uses
+    root.walkDecls((decl) => {
+        // Skip @layer (properties) { ... } to avoid variable resolution conflicts
+        if (isInPropertiesLayer(decl)) {
+            return;
+        }
+        if (decl.prop.startsWith('--')) {
+            variableDefinitions.add({
+                declaration: decl,
+                selector: getSelector(decl),
+                variableName: decl.prop,
+                definition: decl.value
+            });
+        }
+        else if (decl.value.includes('var(')) {
+            const parseVariableUses = (value) => {
+                const parsed = valueParser(value);
+                parsed.walk((node) => {
+                    if (node.type === 'function' && node.value === 'var') {
+                        const varNameNode = node.nodes[0];
+                        const varName = varNameNode ? valueParser.stringify(varNameNode).trim() : '';
+                        // Find fallback (after the comma)
+                        let fallback;
+                        const commaIndex = node.nodes.findIndex((n) => n.type === 'div' && n.value === ',');
+                        if (commaIndex !== -1) {
+                            fallback = valueParser.stringify(node.nodes.slice(commaIndex + 1)).trim();
+                        }
+                        const raw = valueParser.stringify(node);
+                        variableUses.push({
+                            declaration: decl,
+                            selector: getSelector(decl),
+                            inAtRule: isInAtRule(decl),
+                            atRuleSelector: getAtRuleSelector(decl),
+                            fallback,
+                            variableName: varName,
+                            raw
                         });
+                        // If fallback contains var(), recursively parse those too
+                        if (fallback?.includes('var(')) {
+                            parseVariableUses(fallback);
+                        }
                     }
-                    parseVariableUsesFrom(declaration.value);
-                }
-            }
-            path.unshift(node);
+                });
+            };
+            parseVariableUses(decl.value);
         }
     });
+    // Second pass: resolve variables
     for (const use of variableUses) {
         let hasReplaced = false;
         for (const definition of variableDefinitions) {
             if (use.variableName !== definition.variableName) {
                 continue;
             }
-            if (use.path[0]?.type === 'Block' &&
-                use.path[1]?.type === 'Atrule' &&
-                use.path[2]?.type === 'Block' &&
-                use.path[3]?.type === 'Rule' &&
-                definition.path[0].type === 'Block' &&
-                definition.path[1].type === 'Rule' &&
-                doSelectorsIntersect(use.path[3].prelude, definition.path[1].prelude)) {
-                use.declaration.value = parse(generate(use.declaration.value).replaceAll(use.raw, definition.definition), {
-                    context: 'value'
-                });
+            // Check if use is in an at-rule and definition is in a matching rule
+            if (use.inAtRule &&
+                use.atRuleSelector &&
+                doSelectorsIntersect(use.atRuleSelector, definition.selector)) {
+                use.declaration.value = use.declaration.value.replaceAll(use.raw, definition.definition);
                 hasReplaced = true;
                 break;
             }
-            if (use.path[0]?.type === 'Block' &&
-                use.path[1]?.type === 'Rule' &&
-                definition.path[0]?.type === 'Block' &&
-                definition.path[1]?.type === 'Rule' &&
-                doSelectorsIntersect(use.path[1].prelude, definition.path[1].prelude)) {
-                use.declaration.value = parse(generate(use.declaration.value).replaceAll(use.raw, definition.definition), {
-                    context: 'value'
-                });
+            // Check if both are in rules with matching selectors
+            if (!use.inAtRule && doSelectorsIntersect(use.selector, definition.selector)) {
+                use.declaration.value = use.declaration.value.replaceAll(use.raw, definition.definition);
                 hasReplaced = true;
                 break;
             }
         }
         if (!hasReplaced && use.fallback) {
-            use.declaration.value = parse(generate(use.declaration.value).replaceAll(use.raw, use.fallback), { context: 'value' });
+            use.declaration.value = use.declaration.value.replaceAll(use.raw, use.fallback);
         }
     }
 }

package/dist/render/utils/css/resolve-calc-expressions.d.ts CHANGED Viewed

@@ -1,5 +1,2 @@
-import { type CssNode } from 'css-tree';
-/**
- * Intentionally only resolves `*` and `/` operations without dealing with parenthesis, because this is the only thing required to run Tailwind v4
- */
-export declare function resolveCalcExpressions(node: CssNode): void;
+import type { Root } from 'postcss';
+export declare function resolveCalcExpressions(root: Root): void;