better-svelte-email 0.3.6 → 1.0.0-beta.0

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

@@ -0,0 +1,37 @@
+import { string, walk } from 'css-tree';
+import { isRuleInlinable } from './is-rule-inlinable.js';
+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);
+                    }
+                }
+            }
+        }
+    });
+    return {
+        inlinable: inlinableRules,
+        nonInlinable: nonInlinableRules
+    };
+}

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

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

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

@@ -0,0 +1,37 @@
+import { generate, walk } from 'css-tree';
+export function getCustomProperties(node) {
+    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
+                    });
+                }
+            }
+        }
+    });
+    return customProperties;
+}

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

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

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

@@ -0,0 +1,6 @@
+import { find } from 'css-tree';
+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;
+}

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

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

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

@@ -0,0 +1,57 @@
+import { generate, walk } from 'css-tree';
+import { unwrapValue } from './unwrap-value.js';
+export function makeInlineStylesFor(inlinableRules, customProperties) {
+    let styles = '';
+    const localVariableDeclarations = new Map();
+    for (const rule of inlinableRules) {
+        walk(rule, {
+            visit: 'Declaration',
+            enter(declaration) {
+                if (declaration.property.startsWith('--')) {
+                    localVariableDeclarations.set(declaration.property, declaration);
+                }
+            }
+        });
+    }
+    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);
+                            }
+                        }
+                    }
+                }
+            }
+        });
+        walk(rule, {
+            visit: 'Declaration',
+            enter(declaration) {
+                if (declaration.property.startsWith('--')) {
+                    return;
+                }
+                styles += `${declaration.property}: ${generate(declaration.value)} ${declaration.important ? '!important' : ''};`;
+            }
+        });
+    }
+    return styles;
+}

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

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

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

@@ -0,0 +1,123 @@
+import { generate, parse, walk } from 'css-tree';
+function doSelectorsIntersect(first, second) {
+    const firstStringified = generate(first);
+    const secondStringified = generate(second);
+    if (firstStringified === secondStringified) {
+        return true;
+    }
+    let hasSomeUniversal = false;
+    const walker = (node, _parentListItem, parentList) => {
+        if (hasSomeUniversal)
+            return;
+        if (node.type === 'PseudoClassSelector' && node.name === 'root') {
+            hasSomeUniversal = true;
+        }
+        if (node.type === 'TypeSelector' && node.name === '*' && parentList.size === 1) {
+            hasSomeUniversal = true;
+        }
+    };
+    walk(first, walker);
+    walk(second, walker);
+    if (hasSomeUniversal) {
+        return true;
+    }
+    return false;
+}
+export function resolveAllCssVariables(node) {
+    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);
+                                    }
+                                }
+                            }
+                        });
+                    }
+                    parseVariableUsesFrom(declaration.value);
+                }
+            }
+            path.unshift(node);
+        }
+    });
+    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'
+                });
+                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'
+                });
+                hasReplaced = true;
+                break;
+            }
+        }
+        if (!hasReplaced && use.fallback) {
+            use.declaration.value = parse(generate(use.declaration.value).replaceAll(use.raw, use.fallback), { context: 'value' });
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+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;

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

@@ -0,0 +1,126 @@
+import { walk } from 'css-tree';
+/**
+ * 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);
+                            }
+                        }
+                    }
+                });
+                if (func.children.size === 1 && func.children.first) {
+                    funcListItem.data = func.children.first;
+                }
+            }
+        }
+    });
+}

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

@@ -0,0 +1,15 @@
+import { type CssNode } from 'css-tree';
+/**
+ * Meant to do all the things necessary, in a per-declaration basis, to have the best email client
+ * support possible.
+ *
+ * Here's the transformations it does so far:
+ * - convert all `rgb` with space-based syntax into a comma based one;
+ * - convert all `oklch` values into `rgb`;
+ * - convert all hex values into `rgb`;
+ * - convert `padding-inline` into `padding-left` and `padding-right`;
+ * - convert `padding-block` into `padding-top` and `padding-bottom`;
+ * - 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;