npm - better-svelte-email - Versions diffs - 0.0.1 - Mend

better-svelte-email 0.0.1

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

Files changed (38) hide show

package/README.md +422 -0
package/dist/components/Body.svelte +9 -0
package/dist/components/Body.svelte.d.ts +13 -0
package/dist/components/Button.svelte +54 -0
package/dist/components/Button.svelte.d.ts +21 -0
package/dist/components/Container.svelte +28 -0
package/dist/components/Container.svelte.d.ts +13 -0
package/dist/components/Head.svelte +13 -0
package/dist/components/Head.svelte.d.ts +6 -0
package/dist/components/Html.svelte +19 -0
package/dist/components/Html.svelte.d.ts +10 -0
package/dist/components/Section.svelte +21 -0
package/dist/components/Section.svelte.d.ts +13 -0
package/dist/components/Text.svelte +17 -0
package/dist/components/Text.svelte.d.ts +15 -0
package/dist/components/__tests__/test-email.svelte +13 -0
package/dist/components/__tests__/test-email.svelte.d.ts +26 -0
package/dist/components/index.d.ts +7 -0
package/dist/components/index.js +9 -0
package/dist/emails/demo-email.svelte +108 -0
package/dist/emails/demo-email.svelte.d.ts +13 -0
package/dist/emails/test-email.svelte +15 -0
package/dist/emails/test-email.svelte.d.ts +26 -0
package/dist/index.d.ts +8 -0
package/dist/index.js +10 -0
package/dist/preprocessor/head-injector.d.ts +9 -0
package/dist/preprocessor/head-injector.js +57 -0
package/dist/preprocessor/index.d.ts +25 -0
package/dist/preprocessor/index.js +196 -0
package/dist/preprocessor/parser.d.ts +14 -0
package/dist/preprocessor/parser.js +249 -0
package/dist/preprocessor/transformer.d.ts +18 -0
package/dist/preprocessor/transformer.js +158 -0
package/dist/preprocessor/types.d.ts +104 -0
package/dist/preprocessor/types.js +1 -0
package/dist/utils/index.d.ts +12 -0
package/dist/utils/index.js +24 -0
package/package.json +97 -0

package/dist/preprocessor/parser.js ADDED Viewed

@@ -0,0 +1,249 @@
+import { parse } from 'svelte/compiler';
+/**
+ * Parse Svelte 5 source code and extract all class attributes
+ * Reference: https://svelte.dev/docs/svelte/svelte-compiler#parse
+ */
+export function parseClassAttributes(source) {
+    const classAttributes = [];
+    try {
+        // Parse the Svelte file into an AST
+        // Svelte 5 parse returns a Root node with modern AST structure
+        const ast = parse(source);
+        // Walk the html fragment (template portion) of the AST
+        if (ast.html && ast.html.children) {
+            for (const child of ast.html.children) {
+                walkNode(child, classAttributes, source);
+            }
+        }
+    }
+    catch (error) {
+        console.error('Failed to parse Svelte file:', error);
+        throw error;
+    }
+    return classAttributes;
+}
+/**
+ * Recursively walk Svelte 5 AST nodes to find class attributes
+ */
+function walkNode(node, classAttributes, source) {
+    if (!node)
+        return;
+    // Svelte 5 AST structure:
+    // - Element: HTML elements like <div>, <button>
+    // - InlineComponent: Custom components like <Button>, <Head>
+    // - SlotElement: <svelte:element> and other svelte: elements
+    if (node.type === 'Element' ||
+        node.type === 'InlineComponent' ||
+        node.type === 'SlotElement' ||
+        node.type === 'Component') {
+        const elementName = node.name || 'unknown';
+        // Look for class attribute in Svelte 5 AST
+        const classAttr = node.attributes?.find((attr) => attr.type === 'Attribute' && attr.name === 'class');
+        if (classAttr && classAttr.value) {
+            // Extract class value
+            const extracted = extractClassValue(classAttr, source);
+            if (extracted) {
+                classAttributes.push({
+                    raw: extracted.value,
+                    start: extracted.start,
+                    end: extracted.end,
+                    elementName,
+                    isStatic: extracted.isStatic
+                });
+            }
+        }
+    }
+    // Recursively process children
+    if (node.children) {
+        for (const child of node.children) {
+            walkNode(child, classAttributes, source);
+        }
+    }
+    // Handle conditional blocks (#if, #each, etc.)
+    if (node.consequent) {
+        if (node.consequent.children) {
+            for (const child of node.consequent.children) {
+                walkNode(child, classAttributes, source);
+            }
+        }
+    }
+    if (node.alternate) {
+        if (node.alternate.children) {
+            for (const child of node.alternate.children) {
+                walkNode(child, classAttributes, source);
+            }
+        }
+    }
+    // Handle #each blocks
+    if (node.body) {
+        if (node.body.children) {
+            for (const child of node.body.children) {
+                walkNode(child, classAttributes, source);
+            }
+        }
+    }
+}
+/**
+ * Extract the actual class value from a Svelte 5 attribute node
+ */
+function extractClassValue(classAttr, source) {
+    // Svelte 5 attribute value formats:
+    // 1. Static string: class="text-red-500"
+    //    → value: [{ type: 'Text', data: 'text-red-500' }]
+    //
+    // 2. Expression: class={someVar}
+    //    → value: [{ type: 'ExpressionTag', expression: {...} }]
+    //
+    // 3. Mixed: class="static {dynamic} more"
+    //    → value: [{ type: 'Text' }, { type: 'ExpressionTag' }, { type: 'Text' }]
+    if (!classAttr.value || classAttr.value.length === 0) {
+        return null;
+    }
+    // Check if entirely static (only Text nodes)
+    const hasOnlyText = classAttr.value.every((v) => v.type === 'Text');
+    if (hasOnlyText) {
+        // Fully static - we can safely transform this
+        const textContent = classAttr.value.map((v) => v.data || '').join('');
+        const start = classAttr.value[0].start;
+        const end = classAttr.value[classAttr.value.length - 1].end;
+        return {
+            value: textContent,
+            start,
+            end,
+            isStatic: true
+        };
+    }
+    // Check if entirely dynamic (only ExpressionTag or MustacheTag)
+    const hasOnlyExpression = classAttr.value.length === 1 &&
+        (classAttr.value[0].type === 'ExpressionTag' || classAttr.value[0].type === 'MustacheTag');
+    if (hasOnlyExpression) {
+        // Fully dynamic - cannot transform at build time
+        const exprNode = classAttr.value[0];
+        const expressionCode = source.substring(exprNode.start, exprNode.end);
+        return {
+            value: expressionCode,
+            start: exprNode.start,
+            end: exprNode.end,
+            isStatic: false
+        };
+    }
+    // Mixed content (both Text and ExpressionTag)
+    // Extract only the static Text portions for partial transformation
+    let combinedValue = '';
+    let start = classAttr.value[0].start;
+    let end = classAttr.value[classAttr.value.length - 1].end;
+    let hasStaticContent = false;
+    for (const part of classAttr.value) {
+        if (part.type === 'Text' && part.data) {
+            combinedValue += part.data + ' ';
+            hasStaticContent = true;
+        }
+        // Skip ExpressionTag nodes
+    }
+    if (hasStaticContent) {
+        return {
+            value: combinedValue.trim(),
+            start,
+            end,
+            isStatic: false // Mixed is not fully static
+        };
+    }
+    return null;
+}
+/**
+ * Find the <Head> component in Svelte 5 AST
+ * Returns the position where we should inject styles
+ */
+export function findHeadComponent(source) {
+    try {
+        const ast = parse(source);
+        // Find Head component in the AST
+        if (ast.html && ast.html.children) {
+            for (const child of ast.html.children) {
+                const headInfo = findHeadInNode(child, source);
+                if (headInfo)
+                    return headInfo;
+            }
+        }
+        return { found: false, insertPosition: null };
+    }
+    catch (error) {
+        return { found: false, insertPosition: null };
+    }
+}
+/**
+ * Recursively search for Head component in Svelte 5 AST
+ */
+function findHeadInNode(node, source) {
+    if (!node)
+        return null;
+    // Check if this is the Head component (InlineComponent type in Svelte 5)
+    if ((node.type === 'InlineComponent' || node.type === 'Component') && node.name === 'Head') {
+        // Svelte 5: Find the best insertion point for styles
+        // If Head has children, insert before first child
+        if (node.children && node.children.length > 0) {
+            return {
+                found: true,
+                insertPosition: node.children[0].start
+            };
+        }
+        // No children - need to insert before closing tag
+        // Find where the opening tag ends
+        const headStart = node.start;
+        const headEnd = node.end;
+        const headContent = source.substring(headStart, headEnd);
+        // Self-closing: <Head />
+        if (headContent.includes('/>')) {
+            // Convert to non-self-closing by inserting before />
+            const selfClosingPos = source.indexOf('/>', headStart);
+            return {
+                found: true,
+                insertPosition: selfClosingPos
+            };
+        }
+        // Regular closing tag: <Head></Head> or <Head>...</Head>
+        const closingTagPos = source.indexOf('</Head>', headStart);
+        if (closingTagPos !== -1) {
+            return {
+                found: true,
+                insertPosition: closingTagPos
+            };
+        }
+        // Fallback: insert right after opening tag
+        const openingTagEnd = source.indexOf('>', headStart);
+        if (openingTagEnd !== -1) {
+            return {
+                found: true,
+                insertPosition: openingTagEnd + 1
+            };
+        }
+    }
+    // Search recursively through the AST
+    if (node.children) {
+        for (const child of node.children) {
+            const found = findHeadInNode(child, source);
+            if (found)
+                return found;
+        }
+    }
+    // Check conditional branches
+    if (node.consequent) {
+        if (node.consequent.children) {
+            for (const child of node.consequent.children) {
+                const found = findHeadInNode(child, source);
+                if (found)
+                    return found;
+            }
+        }
+    }
+    if (node.alternate) {
+        if (node.alternate.children) {
+            for (const child of node.alternate.children) {
+                const found = findHeadInNode(child, source);
+                if (found)
+                    return found;
+            }
+        }
+    }
+    return null;
+}

package/dist/preprocessor/transformer.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import { type TailwindConfig } from 'tw-to-css';
+import type { TransformResult, MediaQueryStyle } from './types.js';
+/**
+ * Initialize Tailwind converter with config
+ */
+export declare function createTailwindConverter(config?: TailwindConfig): typeof import("tw-to-css").twi;
+/**
+ * Transform Tailwind classes to inline styles and responsive classes
+ */
+export declare function transformTailwindClasses(classString: string, tailwindConverter: ReturnType<typeof createTailwindConverter>): TransformResult;
+/**
+ * Generate media query CSS for responsive classes
+ */
+export declare function generateMediaQueries(responsiveClasses: string[], tailwindConverter: ReturnType<typeof createTailwindConverter>, tailwindConfig?: TailwindConfig): MediaQueryStyle[];
+/**
+ * Sanitize class names for use in CSS (replace special characters)
+ */
+export declare function sanitizeClassName(className: string): string;

package/dist/preprocessor/transformer.js ADDED Viewed

@@ -0,0 +1,158 @@
+import { tailwindToCSS } from 'tw-to-css';
+/**
+ * Initialize Tailwind converter with config
+ */
+export function createTailwindConverter(config) {
+    const { twi } = tailwindToCSS({ config });
+    return twi;
+}
+/**
+ * Transform Tailwind classes to inline styles and responsive classes
+ */
+export function transformTailwindClasses(classString, tailwindConverter) {
+    // Split classes
+    const classes = classString.trim().split(/\s+/).filter(Boolean);
+    // Separate responsive from non-responsive classes
+    const responsiveClasses = [];
+    const nonResponsiveClasses = [];
+    for (const cls of classes) {
+        // Responsive classes have format: sm:, md:, lg:, xl:, 2xl:
+        if (/^(sm|md|lg|xl|2xl):/.test(cls)) {
+            responsiveClasses.push(cls);
+        }
+        else {
+            nonResponsiveClasses.push(cls);
+        }
+    }
+    // Convert non-responsive classes to CSS
+    let inlineStyles = '';
+    const invalidClasses = [];
+    if (nonResponsiveClasses.length > 0) {
+        const classesStr = nonResponsiveClasses.join(' ');
+        try {
+            // Generate CSS from Tailwind classes
+            const css = tailwindConverter(classesStr, {
+                merge: false,
+                ignoreMediaQueries: true
+            });
+            // Extract styles from CSS
+            const styles = extractStylesFromCSS(css, nonResponsiveClasses);
+            inlineStyles = styles.validStyles;
+            invalidClasses.push(...styles.invalidClasses);
+        }
+        catch (error) {
+            console.warn('Failed to convert Tailwind classes:', error);
+        }
+    }
+    return {
+        inlineStyles,
+        responsiveClasses,
+        invalidClasses
+    };
+}
+/**
+ * Extract CSS properties from generated CSS
+ * Handles the format: .classname { prop: value; }
+ */
+function extractStylesFromCSS(css, originalClasses) {
+    const invalidClasses = [];
+    const styleProperties = [];
+    // Remove media queries (we handle those separately)
+    const cssWithoutMedia = css.replace(/@media[^{]+\{(?:[^{}]|\{[^{}]*\})*\}/g, '');
+    // Create a map of class name -> CSS rules
+    const classMap = new Map();
+    // Match .classname { rules }
+    const classRegex = /\.([^\s{]+)\s*\{([^}]+)\}/g;
+    let match;
+    while ((match = classRegex.exec(cssWithoutMedia)) !== null) {
+        const className = match[1];
+        const rules = match[2].trim();
+        // Normalize class name (tw-to-css might transform special chars)
+        const normalizedClass = className.replace(/[:#\-[\]/.%!_]+/g, '_');
+        classMap.set(normalizedClass, rules);
+    }
+    // For each original class, try to find its CSS
+    for (const originalClass of originalClasses) {
+        // Normalize the original class name to match what tw-to-css produces
+        const normalized = originalClass.replace(/[:#\-[\]/.%!]+/g, '_');
+        if (classMap.has(normalized)) {
+            const rules = classMap.get(normalized);
+            // Ensure rules end with semicolon for proper concatenation
+            const rulesWithSemicolon = rules.trim().endsWith(';') ? rules.trim() : rules.trim() + ';';
+            styleProperties.push(rulesWithSemicolon);
+        }
+        else {
+            // Class not found - might be invalid Tailwind
+            invalidClasses.push(originalClass);
+        }
+    }
+    // Combine all style properties with space separator
+    const validStyles = styleProperties.join(' ').trim();
+    return { validStyles, invalidClasses };
+}
+/**
+ * Generate media query CSS for responsive classes
+ */
+export function generateMediaQueries(responsiveClasses, tailwindConverter, tailwindConfig) {
+    if (responsiveClasses.length === 0) {
+        return [];
+    }
+    const mediaQueries = [];
+    // Default breakpoints (can be overridden by config)
+    const breakpoints = {
+        sm: '475px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+        '2xl': '1536px',
+        ...tailwindConfig?.theme?.screens
+    };
+    // Group classes by breakpoint
+    const classesByBreakpoint = new Map();
+    for (const cls of responsiveClasses) {
+        const match = cls.match(/^(sm|md|lg|xl|2xl):(.+)/);
+        if (match) {
+            const [, breakpoint] = match;
+            if (!classesByBreakpoint.has(breakpoint)) {
+                classesByBreakpoint.set(breakpoint, []);
+            }
+            classesByBreakpoint.get(breakpoint).push(cls);
+        }
+    }
+    // Generate CSS for each breakpoint
+    for (const [breakpoint, classes] of classesByBreakpoint) {
+        const breakpointValue = breakpoints[breakpoint];
+        if (!breakpointValue)
+            continue;
+        // Generate full CSS including media queries
+        const fullCSS = tailwindConverter(classes.join(' '), {
+            merge: false,
+            ignoreMediaQueries: false
+        });
+        // Extract just the media query portion
+        const mediaQueryRegex = new RegExp(`@media[^{]*\\{([^{}]|\\{[^{}]*\\})*\\}`, 'g');
+        let match;
+        while ((match = mediaQueryRegex.exec(fullCSS)) !== null) {
+            const mediaQueryBlock = match[0];
+            // Make all rules !important for email clients
+            const withImportant = mediaQueryBlock.replace(/([a-z-]+)\s*:\s*([^;!}]+)/gi, '$1: $2 !important');
+            // Parse out the query and content
+            const queryMatch = withImportant.match(/@media\s*([^{]+)/);
+            if (queryMatch) {
+                const query = `@media ${queryMatch[1].trim()}`;
+                mediaQueries.push({
+                    query,
+                    className: `responsive-${breakpoint}`,
+                    rules: withImportant
+                });
+            }
+        }
+    }
+    return mediaQueries;
+}
+/**
+ * Sanitize class names for use in CSS (replace special characters)
+ */
+export function sanitizeClassName(className) {
+    return className.replace(/[:#\-[\]/.%!]+/g, '_');
+}

package/dist/preprocessor/types.d.ts ADDED Viewed

@@ -0,0 +1,104 @@
+import type { TailwindConfig } from 'tw-to-css';
+/**
+ * Options for the preprocessor
+ */
+export interface PreprocessorOptions {
+    /**
+     * Custom Tailwind configuration
+     */
+    tailwindConfig?: TailwindConfig;
+    /**
+     * Path to folder containing email components
+     * @default '/src/lib/emails'
+     */
+    pathToEmailFolder?: string;
+    /**
+     * Enable debug logging
+     * @default false
+     */
+    debug?: boolean;
+}
+/**
+ * Represents a class attribute found in the AST
+ */
+export interface ClassAttribute {
+    /**
+     * Raw class string (e.g., "text-red-500 sm:bg-blue")
+     */
+    raw: string;
+    /**
+     * Start position in source code
+     */
+    start: number;
+    /**
+     * End position in source code
+     */
+    end: number;
+    /**
+     * Parent element/component name
+     */
+    elementName: string;
+    /**
+     * Whether this is a static string or dynamic expression
+     */
+    isStatic: boolean;
+}
+/**
+ * Result of transforming Tailwind classes
+ */
+export interface TransformResult {
+    /**
+     * CSS styles for inline styleString prop
+     */
+    inlineStyles: string;
+    /**
+     * Responsive classes to keep in class attribute
+     */
+    responsiveClasses: string[];
+    /**
+     * Classes that couldn't be converted (warnings)
+     */
+    invalidClasses: string[];
+}
+/**
+ * Media query CSS to inject into head
+ */
+export interface MediaQueryStyle {
+    /**
+     * Media query condition (e.g., "@media (max-width: 475px)")
+     */
+    query: string;
+    /**
+     * CSS class name
+     */
+    className: string;
+    /**
+     * CSS rules
+     */
+    rules: string;
+}
+/**
+ * Information about a component's transformations
+ */
+export interface ComponentTransform {
+    /**
+     * Original source code
+     */
+    originalCode: string;
+    /**
+     * Transformed source code
+     */
+    transformedCode: string;
+    /**
+     * Media queries to inject
+     */
+    mediaQueries: MediaQueryStyle[];
+    /**
+     * Whether <Head> component was found
+     */
+    hasHead: boolean;
+    /**
+     * Warnings encountered during transformation
+     */
+    warnings: string[];
+}

package/dist/preprocessor/types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/utils/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+/**
+ * Convert a style object to a CSS string
+ * @param style - Object containing CSS properties
+ * @returns CSS string with properties
+ */
+export declare function styleToString(style: Record<string, string | number | undefined>): string;
+/**
+ * Convert pixels to points for email clients
+ * @param px - Pixel value as string
+ * @returns Point value as string
+ */
+export declare function pxToPt(px: string | number): string;

package/dist/utils/index.js ADDED Viewed

@@ -0,0 +1,24 @@
+/**
+ * Convert a style object to a CSS string
+ * @param style - Object containing CSS properties
+ * @returns CSS string with properties
+ */
+export function styleToString(style) {
+    return Object.entries(style)
+        .filter(([, value]) => value !== undefined && value !== null && value !== '')
+        .map(([key, value]) => {
+        // Convert camelCase to kebab-case
+        const cssKey = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+        return `${cssKey}:${value}`;
+    })
+        .join(';');
+}
+/**
+ * Convert pixels to points for email clients
+ * @param px - Pixel value as string
+ * @returns Point value as string
+ */
+export function pxToPt(px) {
+    const value = typeof px === 'string' ? parseFloat(px) : px;
+    return `${Math.round(value * 0.75)}pt`;
+}

package/package.json ADDED Viewed

@@ -0,0 +1,97 @@
+{
+	"name": "better-svelte-email",
+	"version": "0.0.1",
+	"description": "A Svelte 5 preprocessor that transforms Tailwind CSS classes in email components to inline styles with responsive media query support",
+	"author": "Anatole",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Konixy/better-svelte-email.git"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:ui": "vitest --ui",
+		"test:coverage": "vitest run --coverage"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./preprocessor": {
+			"types": "./dist/preprocessor/index.d.ts",
+			"import": "./dist/preprocessor/index.js",
+			"default": "./dist/preprocessor/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"dependencies": {
+		"magic-string": "^0.30.19",
+		"resend": "^6.1.2",
+		"tw-to-css": "^0.0.12"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.4.0",
+		"@eslint/js": "^9.37.0",
+		"@sveltejs/adapter-auto": "^6.1.1",
+		"@sveltejs/kit": "^2.43.8",
+		"@sveltejs/package": "^2.5.4",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tailwindcss/vite": "^4.1.14",
+		"@types/node": "^24",
+		"@vitest/browser": "^3.2.4",
+		"eslint": "^9.37.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.12.4",
+		"globals": "^16.4.0",
+		"playwright": "^1.55.1",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.6.14",
+		"publint": "^0.3.13",
+		"svelte": "^5.39.8",
+		"svelte-check": "^4.3.2",
+		"tailwindcss": "^4.1.14",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.45.0",
+		"vite": "^7.1.9",
+		"vitest": "^3.2.4",
+		"vitest-browser-svelte": "^1.1.0"
+	},
+	"keywords": [
+		"svelte",
+		"svelte5",
+		"email",
+		"tailwind",
+		"tailwindcss",
+		"preprocessor",
+		"inline-styles",
+		"responsive-email",
+		"email-templates",
+		"svelte-preprocessor"
+	]
+}