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

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;

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

@@ -0,0 +1,8 @@
+import { resolveAllCssVariables } from './resolve-all-css-variables.js';
+import { resolveCalcExpressions } from './resolve-calc-expressions.js';
+import { sanitizeDeclarations } from './sanitize-declarations.js';
+export function sanitizeStyleSheet(styleSheet) {
+    resolveAllCssVariables(styleSheet);
+    resolveCalcExpressions(styleSheet);
+    sanitizeDeclarations(styleSheet);
+}

package/dist/render/utils/css/unwrap-value.d.ts

@@ -0,0 +1,2 @@
+import type { Raw, Value } from 'css-tree';
+export declare function unwrapValue(value: Value | Raw): import("css-tree").CssNode;

package/dist/render/utils/css/unwrap-value.js

@@ -0,0 +1,6 @@
+export function unwrapValue(value) {
+    if (value.type === 'Value' && value.children.size === 1) {
+        return value.children.first ?? value;
+    }
+    return value;
+}

package/dist/render/utils/html/is-valid-node.d.ts

@@ -0,0 +1,2 @@
+import type { AST } from '../../index.js';
+export declare function isValidNode(node: AST.ChildNode): node is AST.Element;

package/dist/render/utils/html/is-valid-node.js

@@ -0,0 +1,3 @@
+export function isValidNode(node) {
+    return !node.nodeName.startsWith('#');
+}

package/dist/render/utils/html/remove-attributes-functions.d.ts

@@ -0,0 +1,2 @@
+import type { AST } from '../../index.js';
+export declare function removeAttributesFunctions(ast: AST.Document): AST.Document;

package/dist/render/utils/html/remove-attributes-functions.js

@@ -0,0 +1,10 @@
+import { isValidNode } from './is-valid-node.js';
+import { walk } from './walk.js';
+export function removeAttributesFunctions(ast) {
+    return walk(ast, (node) => {
+        if (isValidNode(node)) {
+            node.attrs = node.attrs?.filter((attr) => !['onload', 'onerror'].includes(attr.name)) ?? [];
+        }
+        return node;
+    });
+}

package/dist/render/utils/html/walk.d.ts

@@ -0,0 +1,15 @@
+import type { DefaultTreeAdapterTypes as AST } from 'parse5';
+type WalkableNode = AST.Document | AST.Element | AST.DocumentFragment | AST.Template;
+type AnyNode = AST.ChildNode;
+/**
+ * Walk through an HTML AST and transform nodes using a callback function.
+ *
+ * @param ast - The root node to start walking from
+ * @param callback - A function that receives each node and returns either:
+ *   - The same node (no change)
+ *   - A modified node (replace)
+ *   - null (remove the node)
+ * @returns The transformed AST
+ */
+export declare function walk<T extends WalkableNode>(ast: T, callback: (node: AnyNode) => AnyNode | null): T;
+export {};

package/dist/render/utils/html/walk.js

@@ -0,0 +1,36 @@
+/**
+ * Walk through an HTML AST and transform nodes using a callback function.
+ *
+ * @param ast - The root node to start walking from
+ * @param callback - A function that receives each node and returns either:
+ *   - The same node (no change)
+ *   - A modified node (replace)
+ *   - null (remove the node)
+ * @returns The transformed AST
+ */
+export function walk(ast, callback) {
+    // Check if this node has childNodes
+    if (!('childNodes' in ast) || !ast.childNodes) {
+        return ast;
+    }
+    // Iterate backwards to handle splicing correctly
+    for (let i = ast.childNodes.length - 1; i >= 0; i--) {
+        const node = ast.childNodes[i];
+        const newNode = callback(node);
+        if (newNode === null) {
+            // Remove the node
+            ast.childNodes.splice(i, 1);
+        }
+        else {
+            // Replace the node if changed
+            ast.childNodes[i] = newNode;
+            // Recursively walk child nodes if they exist
+            if ('childNodes' in newNode &&
+                Array.isArray(newNode.childNodes) &&
+                newNode.childNodes.length > 0) {
+                walk(newNode, callback);
+            }
+        }
+    }
+    return ast;
+}

package/dist/render/utils/tailwindcss/add-inlined-styles-to-element.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'css-tree';
+import type { CustomProperties } from '../css/get-custom-properties.js';
+import type { AST } from '../../index.js';
+export declare function addInlinedStylesToElement(element: AST.Element, inlinableRules: Map<string, Rule>, nonInlinableRules: Map<string, Rule>, customProperties: CustomProperties, unknownClasses: string[]): AST.Element;

package/dist/render/utils/tailwindcss/add-inlined-styles-to-element.js

@@ -0,0 +1,61 @@
+import { sanitizeClassName } from '../compatibility/sanitize-class-name.js';
+import { makeInlineStylesFor } from '../css/make-inline-styles-for.js';
+import { combineStyles } from '../../../utils/index.js';
+export function addInlinedStylesToElement(element, inlinableRules, nonInlinableRules, customProperties, unknownClasses) {
+    const classAttr = element.attrs?.find((attr) => attr.name === 'class');
+    if (classAttr && classAttr.value) {
+        const classes = classAttr.value.split(/\s+/).filter(Boolean);
+        const residualClasses = [];
+        const rules = [];
+        for (const className of classes) {
+            const rule = inlinableRules.get(className);
+            if (rule) {
+                rules.push(rule);
+            }
+            else {
+                residualClasses.push(className);
+            }
+        }
+        const styles = makeInlineStylesFor(rules, customProperties);
+        const styleAttr = element.attrs?.find((attr) => attr.name === 'style');
+        const newStyles = combineStyles(styleAttr?.value ?? '', styles);
+        if (styleAttr) {
+            element.attrs = element.attrs?.map((attr) => {
+                if (attr.name === 'style') {
+                    return { ...attr, value: newStyles };
+                }
+                return attr;
+            });
+        }
+        else {
+            element.attrs = [...element.attrs, { name: 'style', value: newStyles }];
+        }
+        if (residualClasses.length > 0) {
+            element.attrs = element.attrs?.map((attr) => {
+                if (attr.name === 'class') {
+                    return {
+                        ...attr,
+                        value: residualClasses
+                            .map((className) => {
+                            if (nonInlinableRules.has(className)) {
+                                return sanitizeClassName(className);
+                            }
+                            else {
+                                if (!unknownClasses.includes(className)) {
+                                    unknownClasses.push(className);
+                                }
+                                return className;
+                            }
+                        })
+                            .join(' ')
+                    };
+                }
+                return attr;
+            });
+        }
+        else {
+            element.attrs = element.attrs?.filter((attr) => attr.name !== 'class');
+        }
+    }
+    return element;
+}

package/dist/render/utils/tailwindcss/pixel-based-preset.d.ts

@@ -0,0 +1,2 @@
+import type { TailwindConfig } from '../../index.js';
+export declare const pixelBasedPreset: TailwindConfig;

package/dist/render/utils/tailwindcss/pixel-based-preset.js

@@ -0,0 +1,58 @@
+export const pixelBasedPreset = {
+    theme: {
+        extend: {
+            fontSize: {
+                xs: ['12px', { lineHeight: '16px' }],
+                sm: ['14px', { lineHeight: '20px' }],
+                base: ['16px', { lineHeight: '24px' }],
+                lg: ['18px', { lineHeight: '28px' }],
+                xl: ['20px', { lineHeight: '28px' }],
+                '2xl': ['24px', { lineHeight: '32px' }],
+                '3xl': ['30px', { lineHeight: '36px' }],
+                '4xl': ['36px', { lineHeight: '36px' }],
+                '5xl': ['48px', { lineHeight: '1' }],
+                '6xl': ['60px', { lineHeight: '1' }],
+                '7xl': ['72px', { lineHeight: '1' }],
+                '8xl': ['96px', { lineHeight: '1' }],
+                '9xl': ['144px', { lineHeight: '1' }]
+            },
+            spacing: {
+                px: '1px',
+                0: '0',
+                0.5: '2px',
+                1: '4px',
+                1.5: '6px',
+                2: '8px',
+                2.5: '10px',
+                3: '12px',
+                3.5: '14px',
+                4: '16px',
+                5: '20px',
+                6: '24px',
+                7: '28px',
+                8: '32px',
+                9: '36px',
+                10: '40px',
+                11: '44px',
+                12: '48px',
+                14: '56px',
+                16: '64px',
+                20: '80px',
+                24: '96px',
+                28: '112px',
+                32: '128px',
+                36: '144px',
+                40: '160px',
+                44: '176px',
+                48: '192px',
+                52: '208px',
+                56: '224px',
+                60: '240px',
+                64: '256px',
+                72: '288px',
+                80: '320px',
+                96: '384px'
+            }
+        }
+    }
+};

package/dist/render/utils/tailwindcss/setup-tailwind.d.ts

@@ -0,0 +1,7 @@
+import { type StyleSheet } from 'css-tree';
+import type { TailwindConfig } from '../../index.js';
+export type TailwindSetup = Awaited<ReturnType<typeof setupTailwind>>;
+export declare function setupTailwind(config: TailwindConfig): Promise<{
+    addUtilities: (candidates: string[]) => void;
+    getStyleSheet: () => StyleSheet;
+}>;