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

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;

package/dist/render/utils/css/sanitize-declarations.js

@@ -0,0 +1,354 @@
+import { generate, List, parse, walk } from 'css-tree';
+function rgbNode(r, g, b, alpha) {
+    const children = new List();
+    children.appendData({
+        type: 'Number',
+        value: r.toFixed(0)
+    });
+    children.appendData({
+        type: 'Operator',
+        value: ','
+    });
+    children.appendData({
+        type: 'Number',
+        value: g.toFixed(0)
+    });
+    children.appendData({
+        type: 'Operator',
+        value: ','
+    });
+    children.appendData({
+        type: 'Number',
+        value: b.toFixed(0)
+    });
+    if (alpha !== 1 && alpha !== undefined) {
+        children.appendData({
+            type: 'Operator',
+            value: ','
+        });
+        children.appendData({
+            type: 'Number',
+            value: alpha.toString()
+        });
+    }
+    return {
+        type: 'Function',
+        name: 'rgb',
+        children
+    };
+}
+const LAB_TO_LMS = {
+    l: [0.3963377773761749, 0.2158037573099136],
+    m: [-0.1055613458156586, -0.0638541728258133],
+    s: [-0.0894841775298119, -1.2914855480194092]
+};
+const LSM_TO_RGB = {
+    r: [4.0767416360759583, -3.3077115392580629, 0.2309699031821043],
+    g: [-1.2684379732850315, 2.6097573492876882, -0.341319376002657],
+    b: [-0.0041960761386756, -0.7034186179359362, 1.7076146940746117]
+};
+function lrgbToRgb(input) {
+    const absoluteNumber = Math.abs(input);
+    const sign = input < 0 ? -1 : 1;
+    if (absoluteNumber > 0.0031308) {
+        return sign * (absoluteNumber ** (1 / 2.4) * 1.055 - 0.055);
+    }
+    return input * 12.92;
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function oklchToOklab(oklch) {
+    return {
+        l: oklch.l,
+        a: oklch.c * Math.cos((oklch.h / 180) * Math.PI),
+        b: oklch.c * Math.sin((oklch.h / 180) * Math.PI)
+    };
+}
+/** Convert oklab to RGB */
+function oklchToRgb(oklch) {
+    const oklab = oklchToOklab(oklch);
+    const l = (oklab.l + LAB_TO_LMS.l[0] * oklab.a + LAB_TO_LMS.l[1] * oklab.b) ** 3;
+    const m = (oklab.l + LAB_TO_LMS.m[0] * oklab.a + LAB_TO_LMS.m[1] * oklab.b) ** 3;
+    const s = (oklab.l + LAB_TO_LMS.s[0] * oklab.a + LAB_TO_LMS.s[1] * oklab.b) ** 3;
+    const r = 255 * lrgbToRgb(LSM_TO_RGB.r[0] * l + LSM_TO_RGB.r[1] * m + LSM_TO_RGB.r[2] * s);
+    const g = 255 * lrgbToRgb(LSM_TO_RGB.g[0] * l + LSM_TO_RGB.g[1] * m + LSM_TO_RGB.g[2] * s);
+    const b = 255 * lrgbToRgb(LSM_TO_RGB.b[0] * l + LSM_TO_RGB.b[1] * m + LSM_TO_RGB.b[2] * s);
+    return {
+        r: clamp(r, 0, 255),
+        g: clamp(g, 0, 255),
+        b: clamp(b, 0, 255)
+    };
+}
+function separteShorthandDeclaration(shorthandToReplace, [start, end]) {
+    shorthandToReplace.property = start;
+    const values = shorthandToReplace.value.type === 'Value'
+        ? shorthandToReplace.value.children
+            .toArray()
+            .filter((child) => child.type === 'Dimension' || child.type === 'Number' || child.type === 'Percentage')
+        : [shorthandToReplace.value];
+    let endValue = shorthandToReplace.value;
+    if (values.length === 2) {
+        endValue = {
+            type: 'Value',
+            children: new List().fromArray([values[1]])
+        };
+        shorthandToReplace.value = {
+            type: 'Value',
+            children: new List().fromArray([values[0]])
+        };
+    }
+    return {
+        type: 'Declaration',
+        property: end,
+        value: endValue,
+        important: shorthandToReplace.important
+    };
+}
+/**
+ * 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 function sanitizeDeclarations(nodeContainingDeclarations) {
+    walk(nodeContainingDeclarations, {
+        visit: 'Declaration',
+        enter(declaration, item, list) {
+            if (declaration.value.type === 'Raw') {
+                declaration.value = parse(declaration.value.value, {
+                    context: 'value'
+                });
+            }
+            if (/border-radius\s*:\s*calc\s*\(\s*infinity\s*\*\s*1px\s*\)/i.test(generate(declaration))) {
+                declaration.value = parse('9999px', { context: 'value' });
+            }
+            walk(declaration, {
+                visit: 'Function',
+                enter(func, funcParentListItem) {
+                    const children = func.children.toArray();
+                    if (func.name === 'oklch') {
+                        let l;
+                        let c;
+                        let h;
+                        let a;
+                        for (const child of children) {
+                            if (child.type === 'Number') {
+                                if (l === undefined) {
+                                    l = Number.parseFloat(child.value);
+                                    continue;
+                                }
+                                if (c === undefined) {
+                                    c = Number.parseFloat(child.value);
+                                    continue;
+                                }
+                                if (h === undefined) {
+                                    h = Number.parseFloat(child.value);
+                                    continue;
+                                }
+                                if (a === undefined) {
+                                    a = Number.parseFloat(child.value);
+                                    continue;
+                                }
+                            }
+                            if (child.type === 'Dimension' && child.unit === 'deg') {
+                                if (h === undefined) {
+                                    h = Number.parseFloat(child.value);
+                                    continue;
+                                }
+                            }
+                            if (child.type === 'Percentage') {
+                                if (l === undefined) {
+                                    l = Number.parseFloat(child.value) / 100;
+                                    continue;
+                                }
+                                if (a === undefined) {
+                                    a = Number.parseFloat(child.value) / 100;
+                                }
+                            }
+                        }
+                        if (l === undefined || c === undefined || h === undefined) {
+                            throw new Error('Could not determine the parameters of an oklch() function.', {
+                                cause: declaration
+                            });
+                        }
+                        const rgb = oklchToRgb({
+                            l,
+                            c,
+                            h
+                        });
+                        funcParentListItem.data = rgbNode(rgb.r, rgb.g, rgb.b, a);
+                    }
+                    if (func.name === 'rgb') {
+                        let r;
+                        let g;
+                        let b;
+                        let a;
+                        for (const child of children) {
+                            if (child.type === 'Number') {
+                                if (r === undefined) {
+                                    r = Number.parseFloat(child.value);
+                                    continue;
+                                }
+                                if (g === undefined) {
+                                    g = Number.parseFloat(child.value);
+                                    continue;
+                                }
+                                if (b === undefined) {
+                                    b = Number.parseFloat(child.value);
+                                    continue;
+                                }
+                                if (a === undefined) {
+                                    a = Number.parseFloat(child.value);
+                                    continue;
+                                }
+                            }
+                            if (child.type === 'Percentage') {
+                                if (r === undefined) {
+                                    r = (Number.parseFloat(child.value) * 255) / 100;
+                                    continue;
+                                }
+                                if (g === undefined) {
+                                    g = (Number.parseFloat(child.value) * 255) / 100;
+                                    continue;
+                                }
+                                if (b === undefined) {
+                                    b = (Number.parseFloat(child.value) * 255) / 100;
+                                    continue;
+                                }
+                                if (a === undefined) {
+                                    a = Number.parseFloat(child.value) / 100;
+                                }
+                            }
+                        }
+                        if (r === undefined || g === undefined || b === undefined) {
+                            throw new Error('Could not determine the parameters of an rgb() function.', {
+                                cause: declaration
+                            });
+                        }
+                        if (a === undefined || a === 1) {
+                            funcParentListItem.data = rgbNode(r, g, b);
+                        }
+                        else {
+                            funcParentListItem.data = rgbNode(r, g, b, a);
+                        }
+                    }
+                }
+            });
+            walk(declaration, {
+                visit: 'Hash',
+                enter(hash, hashParentListItem) {
+                    const hex = hash.value.trim();
+                    if (hex.length === 3) {
+                        const r = Number.parseInt(hex.charAt(0) + hex.charAt(0), 16);
+                        const g = Number.parseInt(hex.charAt(1) + hex.charAt(1), 16);
+                        const b = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
+                        hashParentListItem.data = rgbNode(r, g, b);
+                        return;
+                    }
+                    if (hex.length === 4) {
+                        const r = Number.parseInt(hex.charAt(0) + hex.charAt(0), 16);
+                        const g = Number.parseInt(hex.charAt(1) + hex.charAt(1), 16);
+                        const b = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
+                        const a = Number.parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255;
+                        hashParentListItem.data = rgbNode(r, g, b, a);
+                        return;
+                    }
+                    if (hex.length === 5) {
+                        const r = Number.parseInt(hex.slice(0, 2), 16);
+                        const g = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
+                        const b = Number.parseInt(hex.charAt(3) + hex.charAt(3), 16);
+                        const a = Number.parseInt(hex.charAt(4) + hex.charAt(4), 16) / 255;
+                        hashParentListItem.data = rgbNode(r, g, b, a);
+                        return;
+                    }
+                    if (hex.length === 6) {
+                        const r = Number.parseInt(hex.slice(0, 2), 16);
+                        const g = Number.parseInt(hex.slice(2, 4), 16);
+                        const b = Number.parseInt(hex.slice(4, 6), 16);
+                        hashParentListItem.data = rgbNode(r, g, b);
+                        return;
+                    }
+                    if (hex.length === 7) {
+                        const r = Number.parseInt(hex.slice(0, 2), 16);
+                        const g = Number.parseInt(hex.slice(2, 4), 16);
+                        const b = Number.parseInt(hex.slice(4, 6), 16);
+                        const a = Number.parseInt(hex.charAt(6) + hex.charAt(6), 16) / 255;
+                        hashParentListItem.data = rgbNode(r, g, b, a);
+                        return;
+                    }
+                    const r = Number.parseInt(hex.slice(0, 2), 16);
+                    const g = Number.parseInt(hex.slice(2, 4), 16);
+                    const b = Number.parseInt(hex.slice(4, 6), 16);
+                    const a = Number.parseInt(hex.slice(6, 8), 16) / 255;
+                    hashParentListItem.data = rgbNode(r, g, b, a);
+                }
+            });
+            walk(declaration, {
+                visit: 'Function',
+                enter(func, parentListItem) {
+                    if (func.name === 'color-mix') {
+                        const children = func.children.toArray();
+                        // We're expecting the children here to be something like:
+                        // Identifier (in)
+                        // Identifier (oklab)
+                        // Operator (,)
+                        // FunctionNode (rgb(...))
+                        // Node (opacity)
+                        // Operator (,)
+                        // Identifier (transparent)
+                        const color = children[3];
+                        const opacity = children[4];
+                        if (func.children.last?.type === 'Identifier' &&
+                            func.children.last.name === 'transparent' &&
+                            color?.type === 'Function' &&
+                            color?.name === 'rgb' &&
+                            opacity) {
+                            color.children.appendData({
+                                type: 'Operator',
+                                value: ','
+                            });
+                            color.children.appendData(opacity);
+                            parentListItem.data = color;
+                        }
+                    }
+                }
+            });
+            if (declaration.property === 'padding-inline') {
+                const paddingRight = separteShorthandDeclaration(declaration, [
+                    'padding-left',
+                    'padding-right'
+                ]);
+                list.insertData(paddingRight, item);
+            }
+            if (declaration.property === 'padding-block') {
+                const paddingBottom = separteShorthandDeclaration(declaration, [
+                    'padding-top',
+                    'padding-bottom'
+                ]);
+                list.insertData(paddingBottom, item);
+            }
+            if (declaration.property === 'margin-inline') {
+                const marginRight = separteShorthandDeclaration(declaration, [
+                    'margin-left',
+                    'margin-right'
+                ]);
+                list.insertData(marginRight, item);
+            }
+            if (declaration.property === 'margin-block') {
+                const paddingBottom = separteShorthandDeclaration(declaration, [
+                    'margin-top',
+                    'margin-bottom'
+                ]);
+                list.insertData(paddingBottom, item);
+            }
+        }
+    });
+}

package/dist/render/utils/css/sanitize-non-inlinable-rules.d.ts

@@ -0,0 +1,11 @@
+import { type CssNode } from 'css-tree';
+/**
+ * This function goes through a few steps to ensure the best email client support and
+ * to ensure that media queries and pseudo classes are applied correctly alongside
+ * the inline styles.
+ *
+ * What it does:
+ * 1. Converts all declarations in all rules into important ones
+ * 2. Sanitizes class selectors of all non-inlinable rules
+ */
+export declare function sanitizeNonInlinableRules(node: CssNode): void;

package/dist/render/utils/css/sanitize-non-inlinable-rules.js

@@ -0,0 +1,33 @@
+import { string, walk } from 'css-tree';
+import { sanitizeClassName } from '../compatibility/sanitize-class-name.js';
+import { isRuleInlinable } from './is-rule-inlinable.js';
+/**
+ * This function goes through a few steps to ensure the best email client support and
+ * to ensure that media queries and pseudo classes are applied correctly alongside
+ * the inline styles.
+ *
+ * What it does:
+ * 1. Converts all declarations in all rules into important ones
+ * 2. Sanitizes class selectors of all non-inlinable rules
+ */
+export function sanitizeNonInlinableRules(node) {
+    walk(node, {
+        visit: 'Rule',
+        enter(rule) {
+            if (!isRuleInlinable(rule)) {
+                walk(rule.prelude, (node) => {
+                    if (node.type === 'ClassSelector') {
+                        const unescapedClassName = string.decode(node.name);
+                        node.name = sanitizeClassName(unescapedClassName);
+                    }
+                });
+                walk(rule, {
+                    visit: 'Declaration',
+                    enter(declaration) {
+                        declaration.important = true;
+                    }
+                });
+            }
+        }
+    });
+}

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

@@ -0,0 +1,2 @@
+import type { StyleSheet } from 'css-tree';
+export declare function sanitizeStyleSheet(styleSheet: StyleSheet): void;