[^<]*<\/div>/);
- });
-
- it('should pass through additional HTML attributes', () => {
- const result = render(Preview, {
- props: {
- preview: 'Test',
- class: 'custom-preview'
- }
- });
-
- expect(result.body).toContain('class="custom-preview"');
- });
- });
-
- describe('Row', () => {
- it('should render table structure', () => {
- const result = render(Row, {
- props: {
- children: testChildren
- }
- });
-
- expect(result.body).toContain('
');
- expect(result.body).toContain(' {
- const result = render(Row, {
- props: {
- children: testChildren
- }
- });
-
- expect(result.body).toContain('align="center"');
- expect(result.body).toContain('width="100%"');
- expect(result.body).toContain('role="presentation"');
- });
-
- it('should apply style to table element', () => {
- const testStyles = 'background-color:rgb(243,244,246); margin:10px;';
-
- const result = render(Row, {
- props: {
- style: testStyles,
- children: testChildren
- }
- });
-
- expect(result.body).toContain('background-color:rgb(243,244,246)');
- expect(result.body).toContain('margin:10px');
- });
-
- it('should have width 100% on tbody and tr', () => {
- const result = render(Row, {
- props: {
- children: testChildren
- }
- });
-
- expect(result.body).toContain('style="width: 100%;"');
- });
-
- it('should pass through additional HTML attributes', () => {
- const result = render(Row, {
- props: {
- class: 'email-row',
- id: 'header-row',
- children: testChildren
- }
- });
-
- expect(result.body).toContain('class="email-row"');
- expect(result.body).toContain('id="header-row"');
- });
- });
-
- describe('Preprocessor Output Simulation', () => {
- it('should render Button with preprocessor-transformed styles', () => {
- // This simulates what the preprocessor outputs:
- // class="bg-blue-500 text-white p-4" becomes style="..."
- const preprocessedStyles =
- 'background-color:rgb(59,130,246); color:rgb(255,255,255); padding:16px;';
-
- const result = render(Button, {
- props: {
- style: preprocessedStyles,
- href: 'https://example.com',
- children: testChildren
- }
- });
-
- const styleMatch = result.body.match(/style="([^"]*)"/);
- expect(styleMatch).toBeTruthy();
-
- if (styleMatch) {
- const styleAttr = styleMatch[1];
- // Verify all preprocessor-generated styles are present
- expect(styleAttr).toContain('background-color:rgb(59,130,246)');
- expect(styleAttr).toContain('color:rgb(255,255,255)');
- expect(styleAttr).toContain('padding:16px');
- // Verify base component styles are also present
- expect(styleAttr).toContain('text-decoration:none');
- }
- });
-
- it('should render Container with preprocessor-transformed styles', () => {
- const preprocessedStyles =
- 'background-color:rgb(243,244,246); padding:32px; border-radius:8px;';
-
- const result = render(Container, {
- props: {
- style: preprocessedStyles,
- children: testChildren
- }
- });
-
- expect(result.body).toContain('background-color:rgb(243,244,246)');
- expect(result.body).toContain('padding:32px');
- expect(result.body).toContain('border-radius:8px');
- expect(result.body).toContain('max-width:37.5em'); // Base style
- });
-
- it('should render Text with preprocessor-transformed styles', () => {
- const preprocessedStyles =
- 'color:rgb(55,65,81); font-size:18px; font-weight:600; margin-bottom:16px;';
-
- const result = render(Text, {
- props: {
- style: preprocessedStyles,
- children: testChildren
- }
- });
-
- expect(result.body).toContain('color:rgb(55,65,81)');
- expect(result.body).toContain('font-size:18px');
- expect(result.body).toContain('font-weight:600');
- expect(result.body).toContain('margin-bottom:16px');
- });
-
- it('should handle responsive classes in class attribute', () => {
- // After preprocessor, responsive classes are sanitized
- const result = render(Button, {
- props: {
- class: 'sm_bg_red_500 md_p_6',
- style: 'background-color:rgb(59,130,246);',
- href: '#',
- children: testChildren
- }
- });
-
- // Responsive classes should be in class attribute
- expect(result.body).toContain('sm_bg_red_500');
- expect(result.body).toContain('md_p_6');
- // Base styles should be in style attribute
- expect(result.body).toContain('background-color:rgb(59,130,246)');
- });
- });
-
- describe('Edge Cases', () => {
- it('should handle style with trailing semicolon', () => {
- const result = render(Text, {
- props: {
- style: 'color:red;',
- children: testChildren
- }
- });
-
- expect(result.body).toContain('color:red');
- // Check for no double semicolons (;;)
- expect(result.body).not.toMatch(/;;/);
- });
-
- it('should handle style without trailing semicolon', () => {
- const result = render(Text, {
- props: {
- style: 'color:blue',
- children: testChildren
- }
- });
-
- expect(result.body).toContain('color:blue');
- });
-
- it('should handle complex Tailwind-converted styles', () => {
- const complexStyles =
- 'display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background-color:rgb(239,246,255); border:1px solid rgb(191,219,254); border-radius:8px;';
-
- const result = render(Container, {
- props: {
- style: complexStyles,
- children: testChildren
- }
- });
-
- expect(result.body).toContain('display:flex');
- expect(result.body).toContain('align-items:center');
- expect(result.body).toContain('justify-content:space-between');
- expect(result.body).toContain('padding:16px 24px');
- expect(result.body).toContain('background-color:rgb(239,246,255)');
- expect(result.body).toContain('border:1px solid rgb(191,219,254)');
- expect(result.body).toContain('border-radius:8px');
+ const renderer = new Renderer();
+ const html = await renderer.render(Preview, { props: { preview: shortText } });
+ expect(html).toMatchSnapshot();
});
});
});
diff --git a/src/lib/emails/test-email.svelte b/src/lib/emails/test-email.svelte
deleted file mode 100644
index 3fe72cf..0000000
--- a/src/lib/emails/test-email.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
- Subtitle
- Basic text
-
-
-
-
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 18e17df..f44075f 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -5,28 +5,8 @@ export * from './components/index.js';
export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
export type { PreprocessorOptions, ComponentTransform } from './preprocessor/index.js';
-// Export types for convenience
-export type { ClassAttribute, TransformResult, MediaQueryStyle } from './preprocessor/types.js';
-export type { TailwindConfig } from 'tw-to-css';
-
-// Export individual functions for advanced usage
-export {
- parseAttributes as parseClassAttributes,
- findHeadComponent
-} from './preprocessor/parser.js';
-export {
- createTailwindConverter,
- transformTailwindClasses,
- generateMediaQueries,
- sanitizeClassName
-} from './preprocessor/transformer.js';
-export { injectMediaQueries } from './preprocessor/head-injector.js';
+// Export renderer
+export { default as Renderer, type TailwindConfig, type RenderOptions } from './render/index.js';
// Export utilities
-export {
- styleToString,
- pxToPt,
- combineStyles,
- withMargin,
- renderAsPlainText
-} from './utils/index.js';
+export * from './utils/index.js';
diff --git a/src/lib/preprocessor/__tests__/head-injector.test.ts b/src/lib/preprocessor/__tests__/head-injector.test.ts
deleted file mode 100644
index 42fe6a9..0000000
--- a/src/lib/preprocessor/__tests__/head-injector.test.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { injectMediaQueries } from '../head-injector.js';
-import type { MediaQueryStyle } from '../types.js';
-
-describe('injectMediaQueries', () => {
- it('should inject media queries into self-closing Head', () => {
- const source = ``;
- const mediaQueries: MediaQueryStyle[] = [
- {
- query: '@media (max-width: 475px)',
- className: 'responsive-sm',
- rules: '@media (max-width: 475px) { .sm_bg_red_500 { background-color: red !important; } }'
- }
- ];
-
- const result = injectMediaQueries(source, mediaQueries);
-
- expect(result.success).toBe(true);
- expect(result.code).toContain(''
+ );
+ }
+
+ if (hasNonInlineStylesToApply && !appliedNonInlineStyles) {
+ throw new Error(
+ `You are trying to use the following Tailwind classes that cannot be inlined: ${Array.from(
+ nonInlinableRules.keys()
+ ).join(' ')}.
+For the media queries to work properly on rendering, they need to be added into a
+
+
+
+ Visit our website
+
+
+
+
+
+
+
+
+
+