npm - better-svelte-email - Versions diffs - 1.0.0-beta.2 → 1.0.0 - Mend

better-svelte-email 1.0.0-beta.2 → 1.0.0

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 (15) hide show

package/README.md +24 -204
package/dist/components/index.js +1 -2
package/dist/index.d.ts +1 -4
package/dist/index.js +1 -5
package/package.json +3 -11
package/dist/preprocessor/head-injector.d.ts +0 -9
package/dist/preprocessor/head-injector.js +0 -57
package/dist/preprocessor/index.d.ts +0 -44
package/dist/preprocessor/index.js +0 -227
package/dist/preprocessor/parser.d.ts +0 -17
package/dist/preprocessor/parser.js +0 -315
package/dist/preprocessor/transformer.d.ts +0 -18
package/dist/preprocessor/transformer.js +0 -158
package/dist/preprocessor/types.d.ts +0 -125
package/dist/preprocessor/types.js +0 -1

package/README.md CHANGED Viewed

@@ -22,10 +22,13 @@
   </p>
 </p>
+## Usage
+See the [documentation](https://better-svelte-email.konixy.fr/docs) for a complete guide on how to use Better Svelte Email.
 ## Features
-- **Stable & Future-Proof** - Uses Svelte's public preprocessor API
-- **Tailwind CSS Support** - Transforms Tailwind classes to inline styles for email clients
+- **Tailwind v4 Support** - Transforms Tailwind classes to inline styles for email clients
 - **Built-in Email Preview** - Visual email preview and test sending
 - **TypeScript First** - Fully typed with comprehensive type definitions
 - **Well Tested** - Extensive test coverage with unit and integration tests
@@ -39,191 +42,7 @@ Existing Svelte email solutions have significant limitations:
 - **svelte-email** hasn't been updated in over 2 years
 - **svelte-email-tailwind** suffers from stability issues and maintaining it is not sustainable anymore
-Better Svelte Email is a complete rewrite built on Svelte's official preprocessor API, providing the rock-solid foundation your email infrastructure needs. It brings the simplicity, reliability, and feature richness of [React Email](https://react.email/) to the Svelte ecosystem.
-## Quick Start
-### 1. Install the package
-```bash
-npm i -D better-svelte-email
-# or
-bun add -D better-svelte-email
-# or
-pnpm add -D better-svelte-email
-```
-### 2. Configure the Preprocessor
-Add the preprocessor to your `svelte.config.js`:
-```javascript
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import { betterSvelteEmailPreprocessor } from 'better-svelte-email';
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	preprocess: [vitePreprocess(), betterSvelteEmailPreprocessor()],
-	kit: {
-		adapter: adapter()
-	}
-};
-export default config;
-```
-### 3. Create Email Components
-Create your email templates in `src/lib/emails/`:
-```svelte
-<!-- src/lib/emails/welcome.svelte -->
-<script>
-	import { Html, Head, Body, Preview, Container, Text, Button } from 'better-svelte-email';
-	let { name = 'User' } = $props();
-</script>
-<Html>
-	<Head />
-	<Body class="bg-gray-100">
-		<Preview preview="Welcome Email" />
-		<Container class="mx-auto p-8">
-			<Text class="mb-4 text-2xl font-bold">
-				Welcome, {name}!
-			</Text>
-			<Button
-				href="https://example.com"
-				class="rounded bg-orange-600 px-6 py-3 text-white sm:text-sm"
-			>
-				Get Started
-			</Button>
-		</Container>
-	</Body>
-</Html>
-```
-### 4. Render and Send
-```typescript
-// src/routes/api/send-email/+server.ts
-import { render } from 'svelte/server';
-import WelcomeEmail from '$lib/emails/welcome.svelte';
-export async function POST({ request }) {
-	const { name, email } = await request.json();
-	// Render email (preprocessor already ran at build time!)
-	const result = render(WelcomeEmail, { props: { name } });
-	// Send email using your preferred service (Resend, SendGrid, etc.)
-	// await resend.emails.send({
-	//   from: 'noreply@example.com',
-	//   to: email,
-	//   subject: 'Welcome!',
-	//   html: result.body
-	// });
-	return new Response('Sent');
-}
-```
-## Email Preview Component
-Better Svelte Email includes a built-in preview component for visually developing and testing your email templates during development.
-### Setup
-Create a preview route in your SvelteKit app:
-```svelte
-<!-- src/routes/preview/+page.svelte -->
-<script lang="ts">
-	import { EmailPreview } from 'better-svelte-email/preview';
-	let { data } = $props();
-</script>
-<EmailPreview emailList={data.emails} />
-```
-```typescript
-// src/routes/preview/+page.server.ts
-import { emailList, createEmail, sendEmail } from 'better-svelte-email/preview';
-import { env } from '$env/dynamic/private';
-export function load() {
-	const emails = emailList({
-		path: '/src/lib/emails' // optional, defaults to '/src/lib/emails'
-	});
-	return { emails };
-}
-export const actions = {
-	...createEmail,
-	...sendEmail({ resendApiKey: env.RESEND_API_KEY })
-};
-```
-### Features
-- **HTML Source View** - Inspect the generated HTML with syntax highlighting
-- **Copy to Clipboard** - Quickly copy the rendered HTML
-- **Test Email Sending** - Send test emails directly from the preview UI using Resend
-- **Template List** - Browse all your email templates in one place
-### Environment Variables
-To enable test email sending, add your Resend API key to your `.env` file:
-```env
-RESEND_API_KEY=re_your_api_key_here
-```
-Get your API key from [Resend](https://resend.com/).
-### Custom Email Provider
-If you prefer to use a different email provider, you can pass a custom send function:
-```typescript
-export const actions = {
-	...createEmail,
-	...sendEmail({
-		customSendEmailFunction: async ({ from, to, subject, html }) => {
-			// Use your preferred email service (SendGrid, Mailgun, etc.)
-			try {
-				await yourEmailService.send({ from, to, subject, html });
-				return { success: true };
-			} catch (error) {
-				return { success: false, error };
-			}
-		}
-	})
-};
-```
-## Configuration
-Here are the available options:
-```javascript
-betterSvelteEmailPreprocessor({
-	pathToEmailFolder: '/src/lib/emails',
-	debug: false,
-	tailwindConfig: {
-		theme: {
-			extend: {
-				colors: {
-					brand: '#FF3E00'
-				}
-			}
-		}
-	}
-});
-```
+Better Svelte Email is a complete rewrite of [svelte-email-tailwind](https://github.com/steveninety/svelte-email-tailwind) inspired by [React Email](https://react.email/), providing the rock-solid foundation your email infrastructure needs. It brings the simplicity, reliability, and feature richness of [React Email](https://react.email/) to the Svelte ecosystem.
 ## Minimum Svelte Version
@@ -234,28 +53,29 @@ For older versions, you can use [`svelte-email-tailwind`](https://github.com/ste
 ### ✅ Supported
-- ✅ Static Tailwind classes
-- ✅ Custom Tailwind classes (`bg-[#fff]`, `my:[40px]`, ...)
-- ✅ All standard Tailwind (v3) utilities (colors, spacing, typography, etc.)
-- ✅ Responsive breakpoints (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`)
-- ✅ HTML elements and Svelte components
-- ✅ Nested components
-- ✅ Conditional blocks (`{#if}`)
-- ✅ Each blocks (`{#each}`)
-- ✅ Custom Tailwind configurations
-### ❌ Not Supported (Yet) (See [Roadmap](./ROADMAP.md))
-- ❌ Tailwind v4
-- ❌ CSS Object (`style={{ color: 'red' }}`)
-- ❌ Dynamic class expressions (`class={someVar}`)
-- ❌ Arbitrary values in responsive classes (`sm:[color:red]`)
-- ❌ Container queries
+- All tailwindcss v4 utilities
+- Custom Tailwind classes (`bg-[#fff]`, `my:[40px]`, ...)
+- Dynamic Tailwind classes (`class={someVar}`)
+- Responsive breakpoints (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`)
+- HTML elements and Svelte components
+- Nested components
+- All svelte features such as each blocks (`{#each}`) and if blocks (`{#if}`), and more
+- Custom Tailwind configurations
 ## Author
 Anatole Dufour ([@Konixy](https://github.com/Konixy))
+### Author of `svelte-email-tailwind`
+Steven Polak ([@steveninety](https://github.com/steveninety))
+### Authors of `react-email`
+Bu Kinoshita ([@bukinoshita](https://github.com/bukinoshita))
+Zeno Rocha ([@zenorocha](https://github.com/zenorocha))
 ## Development
 ### Running Tests

package/dist/components/index.js CHANGED Viewed

@@ -1,5 +1,4 @@
-// Email Components for better-svelte-email
-// These components work with the preprocessor's styleString prop
+// Email components for better-svelte-email
 export { default as Body } from './Body.svelte';
 export { default as Button } from './Button.svelte';
 export { default as Column } from './Column.svelte';

package/dist/index.d.ts CHANGED Viewed

@@ -1,5 +1,2 @@
 export * from './components/index.js';
-export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
-export type { PreprocessorOptions, ComponentTransform } from './preprocessor/index.js';
-export { default as Renderer, type TailwindConfig, type RenderOptions } from './render/index.js';
-export * from './utils/index.js';
+export { default as Renderer, toPlainText, type TailwindConfig, type RenderOptions } from './render/index.js';

package/dist/index.js CHANGED Viewed

@@ -1,8 +1,4 @@
 // Export email components
 export * from './components/index.js';
-// Export the preprocessor
-export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
 // Export renderer
-export { default as Renderer } from './render/index.js';
-// Export utilities
-export * from './utils/index.js';
+export { default as Renderer, toPlainText } from './render/index.js';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "better-svelte-email",
-	"version": "1.0.0-beta.2",
+	"version": "1.0.0",
 	"author": "Konixy",
 	"repository": {
 		"type": "git",
@@ -63,13 +63,8 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js",
-			"import": "./dist/preprocessor/index.js",
-			"default": "./dist/preprocessor/index.js"
-		},
-		"./preprocessor": {
-			"types": "./dist/preprocessor/index.d.ts",
-			"import": "./dist/preprocessor/index.js",
-			"default": "./dist/preprocessor/index.js"
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
 		},
 		"./components": {
 			"types": "./dist/components/index.d.ts",
@@ -89,9 +84,6 @@
 			"types": "./dist/preview/EmailPreview.svelte.d.ts",
 			"svelte": "./dist/preview/EmailPreview.svelte"
 		},
-		"./preview/theme.css": {
-			"default": "./dist/preview/theme.css"
-		},
 		"./utils": {
 			"types": "./dist/utils/index.d.ts",
 			"import": "./dist/utils/index.js",

package/dist/preprocessor/head-injector.d.ts DELETED Viewed

@@ -1,9 +0,0 @@
-import type { MediaQueryStyle } from './types.js';
-/**
- * Inject media query styles into the <Head> component
- */
-export declare function injectMediaQueries(source: string, mediaQueries: MediaQueryStyle[]): {
-    code: string;
-    success: boolean;
-    error?: string;
-};

package/dist/preprocessor/head-injector.js DELETED Viewed

@@ -1,57 +0,0 @@
-import MagicString from 'magic-string';
-import { findHeadComponent } from './parser.js';
-/**
- * Inject media query styles into the <Head> component
- */
-export function injectMediaQueries(source, mediaQueries) {
-    if (mediaQueries.length === 0) {
-        // No media queries to inject
-        return { code: source, success: true };
-    }
-    // Find the Head component
-    const headInfo = findHeadComponent(source);
-    if (!headInfo.found || headInfo.insertPosition === null) {
-        return {
-            code: source,
-            success: false,
-            error: 'No <Head> component found. Media queries cannot be injected.'
-        };
-    }
-    // Generate the style tag content
-    const styleContent = generateStyleTag(mediaQueries);
-    // Use MagicString for surgical insertion
-    const s = new MagicString(source);
-    // Check if Head is self-closing and convert it
-    const headStart = source.lastIndexOf('<Head', headInfo.insertPosition);
-    const headSegment = source.substring(headStart, headInfo.insertPosition + 10);
-    if (headSegment.includes('/>')) {
-        // Self-closing: convert to non-self-closing
-        // Check if there's a space before />
-        const spaceBeforeSelfClose = source[headInfo.insertPosition - 1] === ' ';
-        const replaceStart = spaceBeforeSelfClose
-            ? headInfo.insertPosition - 1
-            : headInfo.insertPosition;
-        // Replace [space]?/> with >
-        s.overwrite(replaceStart, headInfo.insertPosition + 2, '>');
-        // Insert style content
-        s.appendLeft(headInfo.insertPosition + 2, styleContent);
-        // Add closing tag
-        s.appendLeft(headInfo.insertPosition + 2, '</Head>');
-    }
-    else {
-        // Already has closing tag, just insert content
-        s.appendLeft(headInfo.insertPosition, styleContent);
-    }
-    return {
-        code: s.toString(),
-        success: true
-    };
-}
-/**
- * Generate <style> tag with all media queries
- */
-function generateStyleTag(mediaQueries) {
-    // Combine all media queries
-    const allQueries = mediaQueries.map((mq) => mq.rules).join('\n');
-    return `\n\t<style>\n\t\t${allQueries}\n\t</style>\n`;
-}

package/dist/preprocessor/index.d.ts DELETED Viewed

@@ -1,44 +0,0 @@
-import type { PreprocessorGroup } from 'svelte/compiler';
-import type { PreprocessorOptions, ComponentTransform } from './types.js';
-/**
- * Svelte 5 preprocessor for transforming Tailwind classes in email components
- *
- * @deprecated The preprocessor approach is deprecated. Use the `Renderer` class instead for better performance and flexibility.
- *
- * @example
- * ```javascript
- * // Old (deprecated):
- * // svelte.config.js
- * import { betterSvelteEmailPreprocessor } from 'better-svelte-email/preprocessor';
- *
- * export default {
- *   preprocess: [
- *     vitePreprocess(),
- *     betterSvelteEmailPreprocessor({
- *       pathToEmailFolder: '/src/lib/emails',
- *       tailwindConfig: { ... }
- *     })
- *   ]
- * };
- *
- * // New (recommended):
- * import Renderer from 'better-svelte-email/renderer';
- * import EmailComponent from './email.svelte';
- *
- * const renderer = new Renderer({
- *   theme: {
- *     extend: {
- *       colors: { brand: '#FF3E00' }
- *     }
- *   }
- * });
- *
- * const html = await renderer.render(EmailComponent, {
- *   props: { name: 'John' }
- * });
- * ```
- *
- * Reference: https://svelte.dev/docs/svelte/svelte-compiler#preprocess
- */
-export declare function betterSvelteEmailPreprocessor(options?: PreprocessorOptions): PreprocessorGroup;
-export type { PreprocessorOptions, ComponentTransform };

package/dist/preprocessor/index.js DELETED Viewed

@@ -1,227 +0,0 @@
-import MagicString from 'magic-string';
-import { parseAttributes } from './parser.js';
-import { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './transformer.js';
-import { injectMediaQueries } from './head-injector.js';
-import path from 'path';
-/**
- * Svelte 5 preprocessor for transforming Tailwind classes in email components
- *
- * @deprecated The preprocessor approach is deprecated. Use the `Renderer` class instead for better performance and flexibility.
- *
- * @example
- * ```javascript
- * // Old (deprecated):
- * // svelte.config.js
- * import { betterSvelteEmailPreprocessor } from 'better-svelte-email/preprocessor';
- *
- * export default {
- *   preprocess: [
- *     vitePreprocess(),
- *     betterSvelteEmailPreprocessor({
- *       pathToEmailFolder: '/src/lib/emails',
- *       tailwindConfig: { ... }
- *     })
- *   ]
- * };
- *
- * // New (recommended):
- * import Renderer from 'better-svelte-email/renderer';
- * import EmailComponent from './email.svelte';
- *
- * const renderer = new Renderer({
- *   theme: {
- *     extend: {
- *       colors: { brand: '#FF3E00' }
- *     }
- *   }
- * });
- *
- * const html = await renderer.render(EmailComponent, {
- *   props: { name: 'John' }
- * });
- * ```
- *
- * Reference: https://svelte.dev/docs/svelte/svelte-compiler#preprocess
- */
-export function betterSvelteEmailPreprocessor(options = {}) {
-    const { tailwindConfig, pathToEmailFolder = '/src/lib/emails', debug = true } = options;
-    // Initialize Tailwind converter once (performance optimization)
-    const tailwindConverter = createTailwindConverter(tailwindConfig);
-    // Return a Svelte 5 PreprocessorGroup
-    return {
-        name: 'better-svelte-email',
-        /**
-         * The markup preprocessor transforms the template/HTML portion
-         * This is where we extract and transform Tailwind classes
-         */
-        markup({ content, filename }) {
-            // Only process .svelte files in the configured email folder
-            if (!filename || !filename.includes(pathToEmailFolder)) {
-                // Return undefined to skip processing
-                return;
-            }
-            if (!filename.endsWith('.svelte')) {
-                return;
-            }
-            try {
-                // Process the email component
-                const result = processEmailComponent(content, filename, tailwindConverter, tailwindConfig);
-                // Log warnings if debug mode is enabled
-                if (result.warnings.length > 0) {
-                    if (debug) {
-                        console.warn(`[better-svelte-email] Warnings for ${path.relative(process.cwd(), filename)}:\n`, result.warnings.join('\n'));
-                    }
-                }
-                // Return the transformed code
-                // The preprocessor API expects { code: string } or { code: string, map: SourceMap }
-                return {
-                    code: result.transformedCode
-                    // Note: Source maps could be added here via MagicString's generateMap()
-                };
-            }
-            catch (error) {
-                console.error(`[better-svelte-email] Error processing ${filename}:`, error);
-                // On error, return undefined to use original content
-                // This prevents breaking the build for non-email files
-                return;
-            }
-        }
-    };
-}
-/**
- * Process a single email component
- */
-function processEmailComponent(source, _filename, tailwindConverter, tailwindConfig) {
-    const warnings = [];
-    let transformedCode = source;
-    const allMediaQueries = [];
-    // Step 1: Parse and find all class attributes
-    const attributes = parseAttributes(source);
-    if (attributes.length === 0) {
-        // No classes to transform
-        return {
-            originalCode: source,
-            transformedCode: source,
-            mediaQueries: [],
-            hasHead: false,
-            warnings: []
-        };
-    }
-    // Step 2: Transform each class attribute
-    const s = new MagicString(transformedCode);
-    // Process in reverse order to maintain correct positions
-    const sortedAttributes = [...attributes].sort((a, b) => b.class.start - a.class.start);
-    for (const attr of sortedAttributes) {
-        if (!attr.class.isStatic) {
-            // Skip dynamic classes for now
-            warnings.push(`Dynamic class expression detected in ${attr.class.elementName}. ` +
-                `Only static classes can be transformed at build time.`);
-            continue;
-        }
-        // Transform the classes
-        const transformed = transformTailwindClasses(attr.class.raw, tailwindConverter);
-        // Collect warnings about invalid classes
-        if (transformed.invalidClasses.length > 0) {
-            warnings.push(`Invalid Tailwind classes in ${attr.class.elementName}: ${transformed.invalidClasses.join(', ')}`);
-        }
-        // Generate media queries for responsive classes
-        if (transformed.responsiveClasses.length > 0) {
-            const mediaQueries = generateMediaQueries(transformed.responsiveClasses, tailwindConverter, tailwindConfig);
-            allMediaQueries.push(...mediaQueries);
-        }
-        // Build the new attribute value
-        const newAttributes = buildNewAttributes(transformed.inlineStyles, transformed.responsiveClasses, attr.style?.raw);
-        // Remove the already existing style attribute if it exists
-        if (attr.style) {
-            removeStyleAttribute(s, attr.style);
-        }
-        // Replace the class attribute with new attributes
-        replaceClassAttribute(s, attr.class, newAttributes);
-    }
-    transformedCode = s.toString();
-    // Step 3: Inject media queries into <Head>
-    if (allMediaQueries.length > 0) {
-        const injectionResult = injectMediaQueries(transformedCode, allMediaQueries);
-        if (!injectionResult.success) {
-            warnings.push(injectionResult.error || 'Failed to inject media queries');
-        }
-        else {
-            transformedCode = injectionResult.code;
-        }
-    }
-    return {
-        originalCode: source,
-        transformedCode,
-        mediaQueries: allMediaQueries,
-        hasHead: allMediaQueries.length > 0,
-        warnings
-    };
-}
-/**
- * Build new attribute string from transformation result
- */
-function buildNewAttributes(inlineStyles, responsiveClasses, existingStyles) {
-    const parts = [];
-    // Add responsive classes if any
-    if (responsiveClasses.length > 0) {
-        const sanitizedClasses = responsiveClasses.map(sanitizeClassName);
-        parts.push(`class="${sanitizedClasses.join(' ')}"`);
-    }
-    // Add inline styles if any
-    if (inlineStyles) {
-        // Escape quotes in styles
-        const escapedStyles = inlineStyles.replace(/"/g, '&quot;');
-        const withExisting = escapedStyles + (existingStyles ? existingStyles : '');
-        parts.push(`style="${withExisting}"`);
-    }
-    return parts.join(' ');
-}
-/**
- * Replace class attribute with new attributes using MagicString
- */
-function replaceClassAttribute(s, classAttr, newAttributes) {
-    // We need to replace the entire class="..." portion
-    // The positions from AST are for the value, not the attribute
-    // So we need to search backwards for class="
-    // Find the start of the attribute (look for class=")
-    const beforeAttr = s.original.substring(0, classAttr.start);
-    const attrStartMatch = beforeAttr.lastIndexOf('class="');
-    if (attrStartMatch === -1) {
-        console.warn('Could not find class attribute start position');
-        return;
-    }
-    // Find the end of the attribute (closing quote)
-    const afterValue = s.original.substring(classAttr.end);
-    const quotePos = afterValue.indexOf('"');
-    if (quotePos === -1) {
-        console.warn('Could not find class attribute end position');
-        return;
-    }
-    const fullAttrStart = attrStartMatch;
-    const fullAttrEnd = classAttr.end + quotePos + 1;
-    // Replace the entire class="..." with our new attributes
-    if (newAttributes) {
-        s.overwrite(fullAttrStart, fullAttrEnd, newAttributes);
-    }
-    else {
-        // No attributes to add - remove the class attribute entirely
-        // Also remove any extra whitespace
-        let removeStart = fullAttrStart;
-        let removeEnd = fullAttrEnd;
-        // Check if there's a space before
-        if (s.original[removeStart - 1] === ' ') {
-            removeStart--;
-        }
-        // Check if there's a space after
-        if (s.original[removeEnd] === ' ') {
-            removeEnd++;
-        }
-        s.remove(removeStart, removeEnd);
-    }
-}
-/**
- * Remove style attribute with MagicString
- */
-function removeStyleAttribute(s, styleAttr) {
-    s.remove(styleAttr.start, styleAttr.end);
-}

package/dist/preprocessor/parser.d.ts DELETED Viewed

@@ -1,17 +0,0 @@
-import type { ClassAttribute, StyleAttribute } from './types.js';
-/**
- * Parse Svelte 5 source code and extract all class attributes
- * Reference: https://svelte.dev/docs/svelte/svelte-compiler#parse
- */
-export declare function parseAttributes(source: string): {
-    class: ClassAttribute;
-    style?: StyleAttribute;
-}[];
-/**
- * Find the <Head> component in Svelte 5 AST
- * Returns the position where we should inject styles
- */
-export declare function findHeadComponent(source: string): {
-    found: boolean;
-    insertPosition: number | null;
-};

package/dist/preprocessor/parser.js DELETED Viewed

@@ -1,315 +0,0 @@
-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 parseAttributes(source) {
-    const attributes = [];
-    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, attributes, source);
-            }
-        }
-    }
-    catch (error) {
-        console.error('Failed to parse Svelte file:', error);
-        throw error;
-    }
-    return attributes;
-}
-/**
- * Recursively walk Svelte 5 AST nodes to find class attributes
- */
-function walkNode(node, attributes, 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 and style attribute in Svelte 5 AST
-        const classAttr = node.attributes?.find((attr) => attr.type === 'Attribute' && attr.name === 'class');
-        const styleAttr = node.attributes?.find((attr) => attr.type === 'Attribute' && attr.name === 'style');
-        if (classAttr && classAttr.value) {
-            // Extract class value
-            const extractedClass = extractClassValue(classAttr, source);
-            let extractedStyle = null;
-            if (styleAttr && styleAttr.value) {
-                extractedStyle = extractStyleValue(styleAttr, source);
-            }
-            if (extractedClass) {
-                attributes.push({
-                    class: {
-                        raw: extractedClass.value,
-                        start: extractedClass.start,
-                        end: extractedClass.end,
-                        elementName,
-                        isStatic: extractedClass.isStatic
-                    },
-                    style: extractedStyle
-                        ? {
-                            raw: extractedStyle.value,
-                            start: extractedStyle.start,
-                            end: extractedStyle.end,
-                            elementName
-                        }
-                        : undefined
-                });
-            }
-        }
-    }
-    // Recursively process children
-    if (node.children) {
-        for (const child of node.children) {
-            walkNode(child, attributes, source);
-        }
-    }
-    // Handle conditional blocks (#if, #each, etc.)
-    if (node.consequent) {
-        if (node.consequent.children) {
-            for (const child of node.consequent.children) {
-                walkNode(child, attributes, source);
-            }
-        }
-    }
-    if (node.alternate) {
-        if (node.alternate.children) {
-            for (const child of node.alternate.children) {
-                walkNode(child, attributes, source);
-            }
-        }
-    }
-    // Handle #each blocks
-    if (node.body) {
-        if (node.body.children) {
-            for (const child of node.body.children) {
-                walkNode(child, attributes, 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 = '';
-    const start = classAttr.value[0].start;
-    const 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;
-}
-/**
- * Extract the actual style value from a Svelte 5 attribute node
- */
-function extractStyleValue(styleAttr, source) {
-    // Svelte 5 attribute value formats:
-    // 1. Static string: style="color: red;"
-    //    → value: [{ type: 'Text', data: 'color: red;' }]
-    //
-    // 2. Expression: style={someVar}
-    //    → value: [{ type: 'ExpressionTag', expression: {...} }]
-    //
-    // 3. Mixed: style="color: red; {dynamicStyle}"
-    //    → value: [{ type: 'Text' }, { type: 'ExpressionTag' }]
-    if (!styleAttr.value || styleAttr.value.length === 0) {
-        return null;
-    }
-    // Check if entirely static (only Text nodes)
-    const hasOnlyText = styleAttr.value.every((v) => v.type === 'Text');
-    if (hasOnlyText) {
-        // Fully static - we can extract this
-        const textContent = styleAttr.value.map((v) => v.data || '').join('');
-        return {
-            value: textContent,
-            start: styleAttr.start,
-            end: styleAttr.end
-        };
-    }
-    // Check if entirely dynamic (only ExpressionTag or MustacheTag)
-    const hasOnlyExpression = styleAttr.value.length === 1 &&
-        (styleAttr.value[0].type === 'ExpressionTag' || styleAttr.value[0].type === 'MustacheTag');
-    if (hasOnlyExpression) {
-        // Fully dynamic - extract the expression code
-        const exprNode = styleAttr.value[0];
-        const expressionCode = source.substring(exprNode.start, exprNode.end);
-        return {
-            value: expressionCode,
-            start: exprNode.start,
-            end: exprNode.end
-        };
-    }
-    // Mixed content (both Text and ExpressionTag)
-    // Extract the full content including dynamic parts
-    const start = styleAttr.value[0].start;
-    const end = styleAttr.value[styleAttr.value.length - 1].end;
-    const fullContent = source.substring(start, end);
-    return {
-        value: fullContent,
-        start: styleAttr.start,
-        end: styleAttr.end
-    };
-}
-/**
- * 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 {
-        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 DELETED Viewed

@@ -1,18 +0,0 @@
-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 DELETED Viewed

@@ -1,158 +0,0 @@
-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].replace(/\\/g, '').trim();
-        // Normalize class name (tw-to-css might transform special chars)
-        const normalizedClass = className.replace(/\\/g, '').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 DELETED Viewed

@@ -1,125 +0,0 @@
-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;
-}
-/**
- * Represents a style attribute found in the AST
- */
-export interface StyleAttribute {
-    /**
-     * Raw style string (e.g., "background-color: red;")
-     */
-    raw: string;
-    /**
-     * Start position in source code
-     */
-    start: number;
-    /**
-     * End position in source code
-     */
-    end: number;
-    /**
-     * Parent element/component name
-     */
-    elementName: string;
-}
-/**
- * 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 DELETED Viewed

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