better-svelte-email 1.2.1 → 1.3.0

package/dist/components/Hr.svelte

@@ -7,7 +7,9 @@
 	const defaultStyles = styleToString({
 		width: '100%',
 		border: 'none',
-		borderTop: '1px solid #eaeaea'
+		borderTopWidth: '1px',
+		borderTopStyle: 'solid',
+		borderColor: '#eaeaea'
 	});
 </script>
 

package/dist/preview/EmailPreview.svelte

@@ -476,7 +476,7 @@
 						title="Email Preview"
 						srcdoc={iframeContent}
 						class="preview-iframe"
-						sandbox="allow-same-origin allow-scripts"
+						sandbox="allow-same-origin allow-scripts allow-popups"
 					></iframe>
 				</div>
 			{:else if viewMode === 'code'}

package/dist/preview/index.d.ts

@@ -102,6 +102,7 @@ export declare const SendEmailFunction: ({ from, to, subject, html }: {
  * @param options.resendApiKey - Your Resend API key (keep this server-side only)
  * @param options.customSendEmailFunction - Optional custom function to send emails
  * @param options.renderer - Optional renderer to use for rendering the email component (use this if you want to use a custom tailwind config)
+ * @param options.from - Optional sender email address (defaults to 'better-svelte-email <onboarding@resend.dev>')
  *
  * @example
  * ```ts
@@ -127,7 +128,7 @@ export declare const SendEmailFunction: ({ from, to, subject, html }: {
  * };
  * ```
  */
-export declare const sendEmail: ({ customSendEmailFunction, resendApiKey, renderer }?: {
+export declare const sendEmail: ({ customSendEmailFunction, resendApiKey, renderer, from }?: {
     customSendEmailFunction?: (email: {
         from: string;
         to: string;
@@ -137,8 +138,9 @@ export declare const sendEmail: ({ customSendEmailFunction, resendApiKey, render
         success: boolean;
         error?: any;
     }>;
-    renderer?: Renderer;
     resendApiKey?: string;
+    renderer?: Renderer;
+    from?: string;
 }) => {
     'send-email': (event: RequestEvent) => Promise<{
         success: boolean;

package/dist/preview/index.js

@@ -170,6 +170,7 @@ const defaultSendEmailFunction = async ({ from, to, subject, html }, resendApiKe
  * @param options.resendApiKey - Your Resend API key (keep this server-side only)
  * @param options.customSendEmailFunction - Optional custom function to send emails
  * @param options.renderer - Optional renderer to use for rendering the email component (use this if you want to use a custom tailwind config)
+ * @param options.from - Optional sender email address (defaults to 'better-svelte-email <onboarding@resend.dev>')
  *
  * @example
  * ```ts
@@ -195,7 +196,7 @@ const defaultSendEmailFunction = async ({ from, to, subject, html }, resendApiKe
  * };
  * ```
  */
-export const sendEmail = ({ customSendEmailFunction, resendApiKey, renderer = new Renderer() } = {}) => {
+export const sendEmail = ({ customSendEmailFunction, resendApiKey, renderer = new Renderer(), from = 'better-svelte-email <onboarding@resend.dev>' } = {}) => {
     return {
         'send-email': async (event) => {
             const data = await event.request.formData();
@@ -209,7 +210,7 @@ export const sendEmail = ({ customSendEmailFunction, resendApiKey, renderer = ne
             }
             const emailComponent = await getEmailComponent(emailPath, file);
             const email = {
-                from: 'svelte-email-tailwind <onboarding@resend.dev>',
+                from,
                 to: `${data.get('to')}`,
                 subject: `${data.get('component')} ${data.get('note') ? '| ' + data.get('note') : ''}`,
                 html: await renderer.render(emailComponent)

package/dist/render/index.d.ts

@@ -23,6 +23,16 @@ export type RendererOptions = {
      * ```
      */
     customCSS?: string;
+    /**
+     * Base font size in pixels for converting relative units (rem, em) to absolute pixels.
+     * Used when resolving calc() expressions with mixed units.
+     *
+     * Note: `em` is treated as `rem` (relative to this base) since parent element
+     * context is not available during email rendering.
+     *
+     * @default 16
+     */
+    baseFontSize?: number;
 };
 /**
  * Options for rendering a Svelte component
@@ -32,38 +42,10 @@ export type RenderOptions = {
     context?: Map<any, any>;
     idPrefix?: string;
 };
-/**
- * Email renderer that converts Svelte components to email-safe HTML with inlined Tailwind styles.
- *
- * @example
- * ```ts
- * import Renderer from 'better-svelte-email/renderer';
- * import EmailComponent from '../emails/email.svelte';
- * import layoutStyles from 'src/routes/layout.css?raw';
- *
- * const renderer = new Renderer({
- *   // Inject custom CSS such as app theme variables
- *   customCSS: layoutStyles,
- *   // Or provide a tailwind v3 config to extend the default theme
- *   tailwindConfig: {
- *     theme: {
- *       extend: {
- *         colors: {
- *           brand: '#FF3E00'
- *         }
- *       }
- *     }
- *   }
- * });
- *
- * const html = await renderer.render(EmailComponent, {
- *   props: { name: 'John' }
- * });
- * ```
- */
 export default class Renderer {
     private tailwindConfig;
     private customCSS?;
+    private baseFontSize;
     constructor(tailwindConfig?: TailwindConfig);
     constructor(options?: RendererOptions);
     /**

package/dist/render/index.js

@@ -5,6 +5,7 @@ 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 { extractGlobalRules } from './utils/css/extract-global-rules.js';
 import { getCustomProperties } from './utils/css/get-custom-properties.js';
 import { sanitizeNonInlinableRules } from './utils/css/sanitize-non-inlinable-rules.js';
 import { addInlinedStylesToElement } from './utils/tailwindcss/add-inlined-styles-to-element.js';
@@ -40,23 +41,27 @@ import { convert } from 'html-to-text';
  * });
  * ```
  */
+function isRendererOptions(obj) {
+    return (typeof obj === 'object' &&
+        obj !== null &&
+        ('tailwindConfig' in obj || 'customCSS' in obj || 'baseFontSize' in obj));
+}
 export default class Renderer {
     tailwindConfig;
     customCSS;
+    baseFontSize;
     constructor(optionsOrConfig = {}) {
         // Detect whether the argument is a bare TailwindConfig (old API)
         // or a RendererOptions object (new API).
-        if (optionsOrConfig &&
-            typeof optionsOrConfig === 'object' &&
-            ('tailwindConfig' in optionsOrConfig || 'customCSS' in optionsOrConfig)) {
-            const options = optionsOrConfig;
-            this.tailwindConfig = options.tailwindConfig || {};
-            this.customCSS = options.customCSS;
+        if (isRendererOptions(optionsOrConfig)) {
+            this.tailwindConfig = optionsOrConfig.tailwindConfig || {};
+            this.customCSS = optionsOrConfig.customCSS;
+            this.baseFontSize = optionsOrConfig.baseFontSize ?? 16;
         }
         else {
-            const config = optionsOrConfig;
-            this.tailwindConfig = config || {};
+            this.tailwindConfig = optionsOrConfig || {};
             this.customCSS = undefined;
+            this.baseFontSize = 16;
         }
     }
     /**
@@ -97,7 +102,9 @@ export default class Renderer {
             return node;
         });
         const styleSheet = tailwindSetup.getStyleSheet();
-        sanitizeStyleSheet(styleSheet);
+        sanitizeStyleSheet(styleSheet, { baseFontSize: this.baseFontSize });
+        // Extract global rules (*, element selectors, :root) for application to all elements
+        const globalRules = extractGlobalRules(styleSheet);
         const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = extractRulesPerClass(styleSheet, classesUsed);
         const customProperties = getCustomProperties(styleSheet);
         // Create a new Root for non-inline styles
@@ -112,7 +119,7 @@ export default class Renderer {
         const unknownClasses = [];
         ast = walk(ast, (node) => {
             if (isValidNode(node)) {
-                const elementWithInlinedStyles = addInlinedStylesToElement(node, inlinableRules, nonInlinableRules, customProperties, unknownClasses);
+                const elementWithInlinedStyles = addInlinedStylesToElement(node, inlinableRules, nonInlinableRules, customProperties, unknownClasses, globalRules);
                 if (node.nodeName === 'head') {
                     hasHead = true;
                 }
@@ -126,7 +133,8 @@ export default class Renderer {
         }
         if (hasHead && hasNonInlineStylesToApply) {
             appliedNonInlineStyles = true;
-            serialized = serialized.replace('<head>', '<head>' + '<style>' + nonInlineStyles.toString() + '</style>');
+            // Use regex to handle <head> with or without attributes (e.g., style from preflight)
+            serialized = serialized.replace(/<head([^>]*)>/, '<head$1>' + '<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-global-rules.d.ts

@@ -0,0 +1,19 @@
+import type { Root, Rule } from 'postcss';
+export interface GlobalRules {
+    /** Universal (*) rules - apply to all elements */
+    universal: Rule[];
+    /** Element selector rules - keyed by lowercase element name */
+    element: Map<string, Rule[]>;
+    /** :root rules - apply to html element only */
+    root: Rule[];
+}
+/**
+ * Extracts global CSS rules (non-class selectors) from a PostCSS Root.
+ * These include universal (*), element (div, p, etc.), and :root selectors.
+ *
+ * Handles comma-separated selector lists by splitting them and extracting
+ * only the inlinable parts. e.g., "*, ::before, ::after" extracts just "*".
+ *
+ * Only extracts inlinable rules (not in media queries, no pseudo-classes).
+ */
+export declare function extractGlobalRules(root: Root): GlobalRules;

package/dist/render/utils/css/extract-global-rules.js

@@ -0,0 +1,104 @@
+import { splitSelectorList } from './split-selector-list.js';
+/**
+ * Checks if a selector string contains pseudo-classes or pseudo-elements.
+ * e.g., :hover, ::before, :nth-child()
+ */
+function hasPseudoSelector(selector) {
+    return /::?[\w-]+(\([^)]*\))?/.test(selector);
+}
+/**
+ * Extracts global CSS rules (non-class selectors) from a PostCSS Root.
+ * These include universal (*), element (div, p, etc.), and :root selectors.
+ *
+ * Handles comma-separated selector lists by splitting them and extracting
+ * only the inlinable parts. e.g., "*, ::before, ::after" extracts just "*".
+ *
+ * Only extracts inlinable rules (not in media queries, no pseudo-classes).
+ */
+export function extractGlobalRules(root) {
+    const result = {
+        universal: [],
+        element: new Map(),
+        root: []
+    };
+    root.walkRules((rule) => {
+        // Check media query once per rule (applies to all selectors)
+        const inMediaQuery = isRuleInMediaQuery(rule);
+        // Split comma-separated selector list
+        const selectors = splitSelectorList(rule.selector);
+        for (const rawSelector of selectors) {
+            const selector = rawSelector.trim();
+            if (!selector)
+                continue;
+            // :root selector is a special case - it's inlinable (just targets html element)
+            if (selector === ':root') {
+                if (!inMediaQuery) {
+                    const cloned = rule.clone();
+                    cloned.selector = selector;
+                    result.root.push(cloned);
+                }
+                continue;
+            }
+            // Check pseudo-selectors on THIS specific selector
+            if (hasPseudoSelector(selector)) {
+                continue;
+            }
+            // Skip rules in media queries
+            if (inMediaQuery) {
+                continue;
+            }
+            // Skip if selector contains a class (handled by extractRulesPerClass)
+            if (selector.includes('.')) {
+                continue;
+            }
+            // Skip attribute selectors
+            if (selector.includes('[')) {
+                continue;
+            }
+            // Skip ID selectors
+            if (selector.includes('#')) {
+                continue;
+            }
+            // Skip complex selectors with combinators (except for universal *)
+            // e.g., "div > p", "div p", "div + p", "div ~ p"
+            if (/[>\s+~]/.test(selector) && selector !== '*') {
+                continue;
+            }
+            // Clone rule with single selector for storage
+            const cloned = rule.clone();
+            cloned.selector = selector;
+            // Universal selector
+            if (selector === '*') {
+                result.universal.push(cloned);
+                continue;
+            }
+            // Element selector (simple tag name only)
+            // Match valid HTML element names (letters, numbers, hyphens)
+            if (/^[a-z][a-z0-9-]*$/i.test(selector)) {
+                const elementName = selector.toLowerCase();
+                if (!result.element.has(elementName)) {
+                    result.element.set(elementName, []);
+                }
+                result.element.get(elementName).push(cloned);
+            }
+        }
+    });
+    return result;
+}
+/**
+ * Checks if a rule is inside a media query or other non-inlinable at-rule.
+ */
+function isRuleInMediaQuery(rule) {
+    const NON_INLINABLE_AT_RULES = new Set(['media', 'supports', 'container', 'document']);
+    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 true;
+            }
+        }
+        parent = parent.parent;
+    }
+    return false;
+}

package/dist/render/utils/css/get-matching-global-rules-for-element.d.ts

@@ -0,0 +1,3 @@
+import type { AST } from '../../index.js';
+import { type Rule } from 'postcss';
+export declare function getMatchingGlobalRulesForElement(rules: Rule[], element: AST.Element): Rule[];

package/dist/render/utils/css/get-matching-global-rules-for-element.js

@@ -0,0 +1,35 @@
+import { Declaration } from 'postcss';
+// Properties from * selector that should always be applied (layout-critical)
+const ALWAYS_APPLY_PROPS = ['box-sizing', 'margin'];
+// Properties from * selector that are conditionally applied based on element classes
+const CONDITIONAL_PROPS_PATTERN = /(border|outline)-color/g;
+export function getMatchingGlobalRulesForElement(rules, element) {
+    const matchingRules = [];
+    for (const rule of rules) {
+        const matchingDecls = [];
+        for (const node of rule.nodes) {
+            if (node.type !== 'decl')
+                continue;
+            const decl = node;
+            if (ALWAYS_APPLY_PROPS.includes(decl.prop)) {
+                matchingDecls.push(decl);
+                continue;
+            }
+            if (decl.prop.match(CONDITIONAL_PROPS_PATTERN)) {
+                const key = decl.prop.match(/(border|outline)-color/)?.[1];
+                if (!key)
+                    continue;
+                const hasMatchingClass = element.attrs?.find((attr) => attr.name === 'class' && attr.value?.match(key));
+                if (hasMatchingClass) {
+                    matchingDecls.push(decl);
+                }
+            }
+        }
+        if (matchingDecls.length > 0) {
+            const clonedRule = rule.clone();
+            clonedRule.nodes = matchingDecls;
+            matchingRules.push(clonedRule);
+        }
+    }
+    return matchingRules;
+}

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

@@ -46,8 +46,8 @@ export function makeInlineStylesFor(inlinableRules, customProperties) {
                 });
                 value = valueParser.stringify(parsed.nodes);
             }
-            const important = decl.important ? '!important' : '';
-            styles += `${decl.prop}: ${value} ${important};`;
+            const important = decl.important ? ' !important' : '';
+            styles += `${decl.prop}:${value}${important};`;
         });
     }
     return styles;

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

@@ -1,2 +1,5 @@
 import type { Root } from 'postcss';
-export declare function resolveCalcExpressions(root: Root): void;
+export interface CalcResolutionConfig {
+    baseFontSize?: number;
+}
+export declare function resolveCalcExpressions(root: Root, config?: CalcResolutionConfig): void;

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

@@ -15,6 +15,40 @@ function parseValue(str) {
 function formatValue(parsed) {
     return `${parsed.value}${parsed.unit}`;
 }
+/**
+ * Converts a CSS length value to pixels.
+ * Returns null for units that cannot be converted (%, vw, vh, ch, ex, etc.)
+ */
+function toPixels(value, unit, baseFontSize) {
+    switch (unit.toLowerCase()) {
+        case 'px':
+        case '':
+            return value;
+        case 'rem':
+        case 'em':
+            return value * baseFontSize;
+        case 'pt':
+            return value * (96 / 72);
+        case 'pc':
+            return value * 16;
+        case 'in':
+            return value * 96;
+        case 'cm':
+            return value * (96 / 2.54);
+        case 'mm':
+            return value * (96 / 25.4);
+        default:
+            // cannot convert %, vw, vh, dvh, svh, lvh, ch, ex, etc.
+            return null;
+    }
+}
+/**
+ * Checks if a unit can be converted to pixels.
+ */
+function isConvertibleUnit(unit) {
+    const convertible = ['px', 'rem', 'em', 'pt', 'pc', 'in', 'cm', 'mm', ''];
+    return convertible.includes(unit.toLowerCase());
+}
 /**
  * Splits a calc expression string into tokens (values and operators)
  * Handles both space-separated and non-space-separated expressions
@@ -67,10 +101,15 @@ function tokenizeCalcExpression(expr) {
     return tokens;
 }
 /**
- * Intentionally only resolves `*` and `/` operations without dealing with parenthesis,
- * because this is the only thing required to run Tailwind v4
+ * Resolves calc expressions including `*`, `/`, `+`, and `-` operations.
+ * For `+` and `-` with mixed units, converts to pixels using the baseFontSize.
+ *
+ * Limitations:
+ * - Parenthesized sub-expressions like `calc((10px + 5px) * 2)` are not supported.
+ * - em units are treated as rem and converted to pixels using baseFontSize.
+ * - Non-convertible units (%, vw, vh, etc.) will leave the calc() unresolved.
  */
-function evaluateCalcExpression(expr) {
+function evaluateCalcExpression(expr, baseFontSize) {
     const tokens = tokenizeCalcExpression(expr);
     if (tokens.length === 0)
         return null;
@@ -137,10 +176,55 @@ function evaluateCalcExpression(expr) {
     if (tokens.length === 1) {
         return tokens[0];
     }
+    // Process + and - operations (left to right)
+    i = 0;
+    while (i < tokens.length) {
+        const token = tokens[i];
+        if ((token === '+' || token === '-') && i > 0 && i < tokens.length - 1) {
+            const left = parseValue(tokens[i - 1]);
+            const right = parseValue(tokens[i + 1]);
+            if (left && right) {
+                // Same unit: directly compute
+                if (left.unit.toLowerCase() === right.unit.toLowerCase()) {
+                    const resultValue = token === '+' ? left.value + right.value : left.value - right.value;
+                    const result = formatValue({
+                        value: resultValue,
+                        unit: left.unit,
+                        type: left.type
+                    });
+                    tokens.splice(i - 1, 3, result);
+                    i = Math.max(0, i - 1);
+                    continue;
+                }
+                // Mixed units: convert to pixels if both units are convertible
+                if (isConvertibleUnit(left.unit) && isConvertibleUnit(right.unit)) {
+                    const leftPx = toPixels(left.value, left.unit, baseFontSize);
+                    const rightPx = toPixels(right.value, right.unit, baseFontSize);
+                    if (leftPx !== null && rightPx !== null) {
+                        const resultPx = token === '+' ? leftPx + rightPx : leftPx - rightPx;
+                        const result = formatValue({
+                            value: resultPx,
+                            unit: 'px',
+                            type: 'dimension'
+                        });
+                        tokens.splice(i - 1, 3, result);
+                        i = Math.max(0, i - 1);
+                        continue;
+                    }
+                }
+                // Non-convertible units (%, vw, vh, etc.): cannot resolve, skip
+            }
+        }
+        i++;
+    }
+    if (tokens.length === 1) {
+        return tokens[0];
+    }
     // If we still have multiple tokens, we couldn't fully evaluate
     return null;
 }
-export function resolveCalcExpressions(root) {
+export function resolveCalcExpressions(root, config) {
+    const baseFontSize = config?.baseFontSize ?? 16;
     root.walkDecls((decl) => {
         if (!decl.value.includes('calc('))
             return;
@@ -149,7 +233,7 @@ export function resolveCalcExpressions(root) {
             if (node.type === 'function' && node.value === 'calc') {
                 // Get the inner content of calc()
                 const innerContent = valueParser.stringify(node.nodes);
-                const result = evaluateCalcExpression(innerContent);
+                const result = evaluateCalcExpression(innerContent, baseFontSize);
                 if (result) {
                     // Replace the function with the result
                     node.type = 'word';

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

@@ -1,9 +1,13 @@
 import type { Root } from 'postcss';
+export interface SanitizeDeclarationsConfig {
+    baseFontSize?: number;
+}
 /**
  * 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 relative units (rem, em, pt, pc, in, cm, mm) to px for better email client support;
  * - convert all `rgb` with space-based syntax into a comma based one;
  * - convert all `oklch` values into `rgb`;
  * - convert all hex values into `rgb`;
@@ -12,4 +16,4 @@ import type { Root } from 'postcss';
  * - convert `margin-inline` into `margin-left` and `margin-right`;
  * - convert `margin-block` into `margin-top` and `margin-bottom`.
  */
-export declare function sanitizeDeclarations(root: Root): void;
+export declare function sanitizeDeclarations(root: Root, config?: SanitizeDeclarationsConfig): void;

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

@@ -1,4 +1,29 @@
 import valueParser, {} from 'postcss-value-parser';
+/**
+ * Converts a CSS length value to pixels.
+ * Returns null for units that cannot be converted (%, vw, vh, ch, ex, etc.)
+ */
+function toPixels(value, unit, baseFontSize) {
+    switch (unit.toLowerCase()) {
+        case 'px':
+            return value;
+        case 'rem':
+        case 'em':
+            return value * baseFontSize;
+        case 'pt':
+            return value * (96 / 72);
+        case 'pc':
+            return value * 16;
+        case 'in':
+            return value * 96;
+        case 'cm':
+            return value * (96 / 2.54);
+        case 'mm':
+            return value * (96 / 25.4);
+        default:
+            return null;
+    }
+}
 // Color conversion constants
 const LAB_TO_LMS = {
     l: [0.3963377773761749, 0.2158037573099136],
@@ -197,6 +222,7 @@ function transformColorMix(node) {
  * support possible.
  *
  * Here's the transformations it does so far:
+ * - convert relative units (rem, em, pt, pc, in, cm, mm) to px for better email client support;
  * - convert all `rgb` with space-based syntax into a comma based one;
  * - convert all `oklch` values into `rgb`;
  * - convert all hex values into `rgb`;
@@ -205,7 +231,8 @@ function transformColorMix(node) {
  * - convert `margin-inline` into `margin-left` and `margin-right`;
  * - convert `margin-block` into `margin-top` and `margin-bottom`.
  */
-export function sanitizeDeclarations(root) {
+export function sanitizeDeclarations(root, config) {
+    const baseFontSize = config?.baseFontSize ?? 16;
     root.walkDecls((decl) => {
         // Handle infinity calc for border-radius
         if (decl.prop === 'border-radius' && /calc\s*\(\s*infinity\s*\*\s*1px\s*\)/i.test(decl.value)) {
@@ -236,6 +263,29 @@ export function sanitizeDeclarations(root) {
             decl.value = values[0];
             decl.cloneAfter({ prop: 'margin-bottom', value: values[1] || values[0] });
         }
+        // Convert relative units to px for better email client support
+        // Check if value contains any convertible units (excluding px which is already fine)
+        const hasConvertibleUnits = /\d+(rem|em|pt|pc|in|cm|mm)\b/i.test(decl.value);
+        if (hasConvertibleUnits) {
+            const parsed = valueParser(decl.value);
+            parsed.walk((node) => {
+                if (node.type === 'word') {
+                    const match = node.value.match(/^(-?[\d.]+)(rem|em|pt|pc|in|cm|mm)$/i);
+                    if (match) {
+                        const numValue = parseFloat(match[1]);
+                        const unit = match[2];
+                        const pxValue = toPixels(numValue, unit, baseFontSize);
+                        if (pxValue !== null) {
+                            // Round to avoid floating point precision issues
+                            // Use up to 3 decimal places for precision, then trim trailing zeros
+                            const rounded = Math.round(pxValue * 1000) / 1000;
+                            node.value = `${rounded}px`;
+                        }
+                    }
+                }
+            });
+            decl.value = valueParser.stringify(parsed.nodes);
+        }
         // Parse and transform color values
         if (decl.value.includes('oklch(') ||
             decl.value.includes('rgb(') ||

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

@@ -1,2 +1,5 @@
 import type { Root } from 'postcss';
-export declare function sanitizeStyleSheet(root: Root): void;
+export interface SanitizeConfig {
+    baseFontSize?: number;
+}
+export declare function sanitizeStyleSheet(root: Root, config?: SanitizeConfig): void;

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

@@ -1,8 +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(root) {
+export function sanitizeStyleSheet(root, config) {
     resolveAllCssVariables(root);
-    resolveCalcExpressions(root);
-    sanitizeDeclarations(root);
+    resolveCalcExpressions(root, config);
+    sanitizeDeclarations(root, config);
 }

package/dist/render/utils/css/split-selector-list.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Splits a CSS selector list by commas, respecting parentheses and brackets.
+ * e.g., "*, ::before, ::after" → ["*", "::before", "::after"]
+ * e.g., ":is(div, p), span" → [":is(div, p)", "span"]
+ */
+export declare function splitSelectorList(selector: string): string[];

package/dist/render/utils/css/split-selector-list.js

@@ -0,0 +1,41 @@
+/**
+ * Splits a CSS selector list by commas, respecting parentheses and brackets.
+ * e.g., "*, ::before, ::after" → ["*", "::before", "::after"]
+ * e.g., ":is(div, p), span" → [":is(div, p)", "span"]
+ */
+export function splitSelectorList(selector) {
+    const result = [];
+    let current = '';
+    let parenDepth = 0;
+    let bracketDepth = 0;
+    let inString = null;
+    for (let i = 0; i < selector.length; i++) {
+        const char = selector[i];
+        // Handle string literals (for attribute selectors like [title="a,b"])
+        if ((char === '"' || char === "'") && !inString) {
+            inString = char;
+        }
+        else if (char === inString) {
+            inString = null;
+        }
+        if (!inString) {
+            if (char === '(')
+                parenDepth++;
+            if (char === ')')
+                parenDepth--;
+            if (char === '[')
+                bracketDepth++;
+            if (char === ']')
+                bracketDepth--;
+            // Split on comma only at top level
+            if (char === ',' && parenDepth === 0 && bracketDepth === 0) {
+                result.push(current.trim());
+                current = '';
+                continue;
+            }
+        }
+        current += char;
+    }
+    result.push(current.trim());
+    return result;
+}

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

@@ -1,4 +1,5 @@
 import type { Rule } from 'postcss';
 import type { CustomProperties } from '../css/get-custom-properties.js';
+import type { GlobalRules } from '../css/extract-global-rules.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;
+export declare function addInlinedStylesToElement(element: AST.Element, inlinableRules: Map<string, Rule>, nonInlinableRules: Map<string, Rule>, customProperties: CustomProperties, unknownClasses: string[], globalRules?: GlobalRules): AST.Element;

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

@@ -1,8 +1,41 @@
 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) {
+import { getMatchingGlobalRulesForElement } from '../css/get-matching-global-rules-for-element.js';
+/**
+ * Gets global styles for an element based on its tag name.
+ * Applies rules in specificity order: universal (*) -> element -> :root (for html only)
+ */
+function getGlobalStylesForElement(element, globalRules, customProperties) {
+    const rules = [];
+    const tagName = element.tagName.toLowerCase();
+    // 1. Universal rules on case-by-case basis
+    const matchingGlobalRules = getMatchingGlobalRulesForElement(globalRules.universal, element);
+    if (matchingGlobalRules.length > 0) {
+        rules.push(...matchingGlobalRules);
+    }
+    // 2. Element selector rules
+    const elementRules = globalRules.element.get(tagName);
+    if (elementRules) {
+        rules.push(...elementRules);
+    }
+    // 3. :root rules (only for html element)
+    if (tagName === 'html') {
+        rules.push(...globalRules.root);
+    }
+    if (rules.length === 0) {
+        return '';
+    }
+    return makeInlineStylesFor(rules, customProperties);
+}
+export function addInlinedStylesToElement(element, inlinableRules, nonInlinableRules, customProperties, unknownClasses, globalRules) {
+    // Get global styles first (lowest specificity)
+    const globalStyles = globalRules
+        ? getGlobalStylesForElement(element, globalRules, customProperties)
+        : '';
     const classAttr = element.attrs?.find((attr) => attr.name === 'class');
+    const styleAttr = element.attrs?.find((attr) => attr.name === 'style');
+    const existingStyles = styleAttr?.value ?? '';
     if (classAttr && classAttr.value) {
         const classes = classAttr.value.split(/\s+/).filter(Boolean);
         const residualClasses = [];
@@ -16,19 +49,21 @@ export function addInlinedStylesToElement(element, inlinableRules, nonInlinableR
                 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 }];
+        const classStyles = makeInlineStylesFor(rules, customProperties);
+        // Combine: global (lowest) -> existing inline -> class styles (highest)
+        const newStyles = combineStyles(globalStyles, existingStyles, classStyles);
+        if (newStyles) {
+            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) => {
@@ -57,5 +92,22 @@ export function addInlinedStylesToElement(element, inlinableRules, nonInlinableR
             element.attrs = element.attrs?.filter((attr) => attr.name !== 'class');
         }
     }
+    else if (globalStyles) {
+        // Element has no classes but should still receive global styles
+        const newStyles = combineStyles(globalStyles, existingStyles);
+        if (newStyles) {
+            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 }];
+            }
+        }
+    }
     return element;
 }

package/dist/render/utils/tailwindcss/sanitize-custom-css.js

@@ -2,7 +2,7 @@ import postcss from 'postcss';
 export function sanitizeCustomCss(css) {
     const root = postcss.parse(css);
     root.walkAtRules((atRule) => {
-        if (atRule.name === 'import' || atRule.name === 'plugin') {
+        if (atRule.name === 'import' || atRule.name === 'plugin' || atRule.name === 'source') {
             atRule.remove();
         }
     });

package/dist/render/utils/tailwindcss/setup-tailwind.js

@@ -14,6 +14,7 @@ export async function setupTailwind(config, customCSS) {
     // Inject customCSS after base imports for theme variable resolution during compilation
     const baseCss = `
 @layer theme, base, components, utilities;
+/* @import "tailwindcss/preflight.css" layer(base); */
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
 ${customCSS ? sanitizeCustomCss(customCSS) : ''}
@@ -28,7 +29,7 @@ ${customCSS ? sanitizeCustomCss(customCSS) : ''}
                     module: config
                 };
             }
-            throw new Error(`NO-OP: should we implement support for ${resourceHint}?`);
+            throw new Error(`NO-OP: should we implement support for ${resourceHint}: ${id}?`);
         },
         polyfills: 0, // All
         async loadStylesheet(id, base) {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "better-svelte-email",
 	"description": "Svelte email renderer with Tailwind support",
-	"version": "1.2.1",
+	"version": "1.3.0",
 	"author": "Konixy",
 	"repository": {
 		"type": "git",