better-svelte-email 0.1.0 → 0.3.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 (43) hide show
  1. package/dist/components/Body.svelte +11 -2
  2. package/dist/components/Button.svelte +2 -4
  3. package/dist/components/Column.svelte +14 -0
  4. package/dist/components/Column.svelte.d.ts +7 -0
  5. package/dist/components/Container.svelte +5 -6
  6. package/dist/components/Container.svelte.d.ts +2 -2
  7. package/dist/components/Heading.svelte +34 -0
  8. package/dist/components/Heading.svelte.d.ts +15 -0
  9. package/dist/components/Hr.svelte +4 -4
  10. package/dist/components/Html.svelte +5 -4
  11. package/dist/components/Html.svelte.d.ts +3 -3
  12. package/dist/components/Img.svelte +27 -0
  13. package/dist/components/Img.svelte.d.ts +10 -0
  14. package/dist/components/Link.svelte +22 -0
  15. package/dist/components/Link.svelte.d.ts +9 -0
  16. package/dist/components/Preview.svelte +35 -0
  17. package/dist/components/Preview.svelte.d.ts +7 -0
  18. package/dist/components/Row.svelte +26 -0
  19. package/dist/components/Row.svelte.d.ts +7 -0
  20. package/dist/components/Section.svelte +11 -3
  21. package/dist/components/Section.svelte.d.ts +2 -2
  22. package/dist/components/Text.svelte +4 -6
  23. package/dist/components/Text.svelte.d.ts +0 -1
  24. package/dist/components/index.d.ts +6 -0
  25. package/dist/components/index.js +6 -0
  26. package/dist/emails/apple-receipt.svelte +387 -0
  27. package/dist/{components/__tests__/test-email.svelte.d.ts → emails/apple-receipt.svelte.d.ts} +6 -14
  28. package/dist/emails/demo-email.svelte +1 -1
  29. package/dist/emails/test-email.svelte +4 -2
  30. package/dist/emails/vercel-invite-user.svelte +136 -0
  31. package/dist/emails/vercel-invite-user.svelte.d.ts +14 -0
  32. package/dist/index.d.ts +2 -2
  33. package/dist/index.js +2 -2
  34. package/dist/preprocessor/index.js +3 -2
  35. package/dist/preprocessor/transformer.js +3 -3
  36. package/dist/preview/EmailPreview.svelte +773 -0
  37. package/dist/preview/EmailPreview.svelte.d.ts +7 -0
  38. package/dist/preview/index.d.ts +103 -0
  39. package/dist/preview/index.js +205 -0
  40. package/dist/utils/index.d.ts +27 -0
  41. package/dist/utils/index.js +47 -0
  42. package/package.json +34 -7
  43. package/dist/components/__tests__/test-email.svelte +0 -13
package/dist/emails/apple-receipt.svelte ADDED
@@ -0,0 +1,387 @@
1
+ <script lang="ts">
2
+ import {
3
+ Body,
4
+ Column,
5
+ Container,
6
+ Head,
7
+ Hr,
8
+ Html,
9
+ Img,
10
+ Link,
11
+ Preview,
12
+ Row,
13
+ Section,
14
+ Text
15
+ } from '../components/index.js';
16
+
17
+ const baseUrl =
18
+ process.env.VERCEL === '1' ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}/` : '/';
19
+ </script>
20
+
21
+ <Html>
22
+ <Head />
23
+ <Body
24
+ style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #ffffff;"
25
+ >
26
+ <Preview preview="Apple Receipt" />
27
+ <Container style="margin: 0 auto; padding: 20px 0 48px; width: 660px; max-width: 100%;">
28
+ <Section>
29
+ <Row>
30
+ <Column>
31
+ <Img src="{baseUrl}apple-logo.png" width="42" height="42" alt="Apple Logo" />
32
+ </Column>
33
+ <Column style="display: table-cell;" align="right">
34
+ <Text style="font-size: 32px; font-weight: 300; color: #888888;">Receipt</Text>
35
+ </Column>
36
+ </Row>
37
+ </Section>
38
+
39
+ <Section>
40
+ <Text
41
+ style="text-align: center; margin: 36px 0 40px 0; font-size: 14px; font-weight: 500; color: #111111;"
42
+ >
43
+ Save 3% on all your Apple purchases with Apple Card.
44
+ <sup style="font-weight: 300;">1</sup>
45
+ {' '}
46
+ <Link href="https://www.apple.com/apple-card/">Apply and use in minutes</Link>
47
+ <sup style="font-weight: 300;">2</sup>
48
+ </Text>
49
+ </Section>
50
+
51
+ <Section
52
+ style="border-collapse: collapse; border-spacing: 0px; color: rgb(51,51,51); background-color: rgb(250,250,250); border-radius: 3px; font-size: 12px;"
53
+ >
54
+ <Row style="min-height: 46px;">
55
+ <Column colspan={2}>
56
+ <Section>
57
+ <Row>
58
+ <Column
59
+ style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
60
+ >
61
+ <Text
62
+ style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
63
+ >
64
+ APPLE ID
65
+ </Text>
66
+ <Link
67
+ href="mailto:alan.turing@gmail.com"
68
+ style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4; color: #15c; text-decoration: underline;"
69
+ >
70
+ alan.turing@gmail.com
71
+ </Link>
72
+ </Column>
73
+ </Row>
74
+
75
+ <Row>
76
+ <Column
77
+ style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
78
+ >
79
+ <Text
80
+ style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
81
+ >
82
+ INVOICE DATE
83
+ </Text>
84
+ <Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
85
+ >18 Jan 2023</Text
86
+ >
87
+ </Column>
88
+ </Row>
89
+
90
+ <Row>
91
+ <Column
92
+ style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
93
+ >
94
+ <Text
95
+ style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
96
+ >
97
+ ORDER ID
98
+ </Text>
99
+ <Link
100
+ href="#"
101
+ style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4; color: #15c; text-decoration: underline;"
102
+ >
103
+ ML4F5L8522
104
+ </Link>
105
+ </Column>
106
+ <Column
107
+ style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
108
+ >
109
+ <Text
110
+ style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
111
+ >
112
+ DOCUMENT NO.
113
+ </Text>
114
+ <Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
115
+ >186623754793</Text
116
+ >
117
+ </Column>
118
+ </Row>
119
+ </Section>
120
+ </Column>
121
+ <Column
122
+ colspan={2}
123
+ style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
124
+ >
125
+ <Text
126
+ style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
127
+ >
128
+ BILLED TO
129
+ </Text>
130
+ <Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;">
131
+ Visa .... 7461 (Apple Pay)
132
+ </Text>
133
+ <Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
134
+ >Alan Turing</Text
135
+ >
136
+ <Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
137
+ >2125 Chestnut St</Text
138
+ >
139
+ <Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
140
+ >San Francisco, CA 94123</Text
141
+ >
142
+ <Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;">USA</Text>
143
+ </Column>
144
+ </Row>
145
+ </Section>
146
+
147
+ <Section
148
+ style="border-collapse: collapse; border-spacing: 0px; color: rgb(51,51,51); background-color: rgb(250,250,250); border-radius: 3px; font-size: 12px; margin: 30px 0 15px 0; min-height: 24px;"
149
+ >
150
+ <Text
151
+ style="background: #fafafa; padding-left: 10px; font-size: 14px; font-weight: 500; margin: 0;"
152
+ >
153
+ App Store
154
+ </Text>
155
+ </Section>
156
+
157
+ <Section>
158
+ <Row>
159
+ <Column style="width: 64px;">
160
+ <Img
161
+ src="{baseUrl}apple-hbo-max-icon.jpeg"
162
+ width="64"
163
+ height="64"
164
+ alt="HBO Max"
165
+ style="margin: 0 0 0 20px; border-radius: 14px; border: 1px solid rgb(242,242,242);"
166
+ />
167
+ </Column>
168
+ <Column style="padding-left: 22px;">
169
+ <Text
170
+ style="font-size: 12px; font-weight: 600; margin: 0; padding: 0; line-height: 1.4;"
171
+ >
172
+ HBO Max: Stream TV &amp; Movies
173
+ </Text>
174
+ <Text
175
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; padding: 0; line-height: 1.4;"
176
+ >
177
+ HBO Max Ad-Free (Monthly)
178
+ </Text>
179
+ <Text
180
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; padding: 0; line-height: 1.4;"
181
+ >
182
+ Renews Aug 20, 2023
183
+ </Text>
184
+ <Link
185
+ href="https://www.apple.com/"
186
+ style="font-size: 12px; color: rgb(0,112,201); text-decoration: none;"
187
+ >
188
+ Write a Review
189
+ </Link>
190
+ <span
191
+ style="margin-left: 4px; margin-right: 4px; color: rgb(51,51,51); font-weight: 200;"
192
+ >|</span
193
+ >
194
+ <Link
195
+ href="https://www.apple.com/"
196
+ style="font-size: 12px; color: rgb(0,112,201); text-decoration: none;"
197
+ >
198
+ Report a Problem
199
+ </Link>
200
+ </Column>
201
+ <Column
202
+ align="right"
203
+ style="display: table-cell; padding: 0px 20px 0px 0px; width: 100px; vertical-align: top;"
204
+ >
205
+ <Text style="font-size: 12px; font-weight: 600; margin: 0;">$14.99</Text>
206
+ </Column>
207
+ </Row>
208
+ </Section>
209
+
210
+ <Hr style="margin: 30px 0 0 0;" />
211
+
212
+ <Section style="text-align:right;">
213
+ <Row>
214
+ <Column style="display: table-cell;" align="right">
215
+ <Text
216
+ style="margin: 0; color: rgb(102,102,102); font-size: 10px; font-weight: 600; padding: 0px 30px 0px 0px; text-align: right;"
217
+ >
218
+ TOTAL
219
+ </Text>
220
+ </Column>
221
+ <Column
222
+ style="min-height: 48px; padding-top: 48px; border-left: 1px solid; border-color: rgb(238,238,238);"
223
+ />
224
+ <Column style="display: table-cell; width: 90px;">
225
+ <Text
226
+ style="margin: 0px 20px 0px 0px; font-size: 16px; font-weight: 600; white-space: nowrap; text-align: right;"
227
+ >
228
+ $14.99
229
+ </Text>
230
+ </Column>
231
+ </Row>
232
+ </Section>
233
+
234
+ <Hr style="margin: 0 0 75px 0;" />
235
+
236
+ <Section>
237
+ <Row>
238
+ <Column align="center" style="display: block;">
239
+ <Img src="{baseUrl}apple-card-icon.png" width="60" height="17" alt="Apple Card" />
240
+ </Column>
241
+ </Row>
242
+ </Section>
243
+
244
+ <Section>
245
+ <Row>
246
+ <Column align="center" style="display: block; margin: 15px 0 0 0;">
247
+ <Text style="font-size: 24px; font-weight: 500;">
248
+ Save 3% on all your Apple purchases.
249
+ </Text>
250
+ </Column>
251
+ </Row>
252
+ </Section>
253
+
254
+ <Section>
255
+ <Row>
256
+ <Column align="center" style="display: table-cell; margin: 10px 0 0 0;">
257
+ <Link
258
+ href="https://www.apple.com/"
259
+ style="color: rgb(0,126,255); text-decoration: none;"
260
+ >
261
+ <Img
262
+ src="{baseUrl}apple-wallet.png"
263
+ width="28"
264
+ height="28"
265
+ alt="Apple Wallet"
266
+ style="display: inherit; padding-right: 8px; vertical-align: middle;"
267
+ />
268
+ <span style="font-size: 14px; font-weight: 400; text-decoration: none;">
269
+ Apply and use in minutes
270
+ </span>
271
+ </Link>
272
+ </Column>
273
+ </Row>
274
+ </Section>
275
+
276
+ <Hr style="margin: 65px 0 20px 0;" />
277
+
278
+ <Text
279
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
280
+ >
281
+ 1. 3% savings is earned as Daily Cash and is transferred to your Apple Cash card when
282
+ transactions post to your Apple Card account. If you do not have an Apple Cash card, Daily
283
+ Cash can be applied by you as a credit on your statement balance. 3% is the total amount of
284
+ Daily Cash earned for these purchases. See the Apple Card Customer Agreement for more
285
+ details on Daily Cash and qualifying transactions.
286
+ </Text>
287
+
288
+ <Text
289
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
290
+ >
291
+ 2. Subject to credit approval.
292
+ </Text>
293
+
294
+ <Text
295
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
296
+ >
297
+ To access and use all the features of Apple Card, you must add Apple Card to Wallet on an
298
+ iPhone or iPad with iOS or iPadOS 13.2 or later. Update to the latest version of iOS or
299
+ iPadOS by going to Settings &gt; General &gt; Software Update. Tap Download and Install.
300
+ </Text>
301
+
302
+ <Text
303
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
304
+ >
305
+ Available for qualifying applicants in the United States.
306
+ </Text>
307
+
308
+ <Text
309
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
310
+ >
311
+ Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.
312
+ </Text>
313
+
314
+ <Text
315
+ style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
316
+ >
317
+ If you reside in the US territories, please call Goldman Sachs at 877-255-5923 with
318
+ questions about Apple Card.
319
+ </Text>
320
+
321
+ <Text
322
+ style="font-size: 12px; color: rgb(102,102,102); margin: 20px 0; line-height: auto; text-align: center;"
323
+ >
324
+ Privacy: We use a
325
+ <Link href="https://www.apple.com/" style="color: rgb(0,115,255);">Subscriber ID</Link>
326
+ to provide reports to developers.
327
+ </Text>
328
+
329
+ <Text
330
+ style="font-size: 12px; color: rgb(102,102,102); margin: 20px 0; line-height: auto; text-align: center;"
331
+ >
332
+ Get help with subscriptions and purchases.
333
+ <Link href="https://www.apple.com/" style="color: rgb(0,115,255);"
334
+ >Visit Apple Support.</Link
335
+ >
336
+ </Text>
337
+
338
+ <Text
339
+ style="font-size: 12px; color: rgb(102,102,102); margin: 20px 0; line-height: auto; text-align: center;"
340
+ >
341
+ Learn how to
342
+ <Link href="https://www.apple.com/" style="color: rgb(0,115,255);">
343
+ manage your password preferences
344
+ </Link>
345
+ for iTunes, Apple Books, and App Store purchases.
346
+ </Text>
347
+
348
+ <Text
349
+ style="font-size: 12px; color: rgb(102,102,102); margin: 20px 0; line-height: auto; text-align: center;"
350
+ >
351
+ You have the option to stop receiving email receipts for your subscription renewals. If you
352
+ have opted out, you can still view your receipts in your account under Purchase History. To
353
+ manage receipts or to opt in again, go to
354
+ <Link href="https://www.apple.com/" style="color: rgb(0,115,255);">Account Settings.</Link>
355
+ </Text>
356
+
357
+ <Section>
358
+ <Row>
359
+ <Column align="center" style="display: block; margin: 40px 0 0 0;">
360
+ <Img src="{baseUrl}apple-logo.png" width="26" height="26" alt="Apple" />
361
+ </Column>
362
+ </Row>
363
+ </Section>
364
+
365
+ <Text
366
+ style="margin: 8px 0 0 0; text-align: center; font-size: 12px; color: rgb(102,102,102);"
367
+ >
368
+ <Link href="https://www.apple.com/" style="color: rgb(0,115,255);">Account Settings</Link>
369
+ •
370
+ <Link href="https://www.apple.com/" style="color: rgb(0,115,255);">Terms of Sale</Link>
371
+ •
372
+ <Link href="https://www.apple.com/legal/privacy/" style="color: rgb(0,115,255);">
373
+ Privacy Policy
374
+ </Link>
375
+ </Text>
376
+
377
+ <Text
378
+ style="margin: 25px 0 0 0; text-align: center; font-size: 12px; color: rgb(102,102,102);"
379
+ >
380
+ Copyright © 2023 Apple Inc.<br />
381
+ <Link href="https://www.apple.com/legal/" style="color: rgb(0,115,255);">
382
+ All rights reserved
383
+ </Link>
384
+ </Text>
385
+ </Container>
386
+ </Body>
387
+ </Html>
package/dist/{components/__tests__/test-email.svelte.d.ts → emails/apple-receipt.svelte.d.ts} RENAMED
@@ -1,18 +1,5 @@
1
- export default TestEmail;
2
- type TestEmail = SvelteComponent<{
3
- [x: string]: never;
4
- }, {
5
- [evt: string]: CustomEvent<any>;
6
- }, {}> & {
7
- $$bindings?: string | undefined;
8
- };
9
- declare const TestEmail: $$__sveltets_2_IsomorphicComponent<{
10
- [x: string]: never;
11
- }, {
12
- [evt: string]: CustomEvent<any>;
13
- }, {}, {}, string>;
14
1
  interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
15
- new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
16
3
  $$bindings?: Bindings;
17
4
  } & Exports;
18
5
  (internal: unknown, props: {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
24
11
  };
25
12
  z_$$bindings?: Bindings;
26
13
  }
14
+ declare const AppleReceipt: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, string>;
17
+ type AppleReceipt = InstanceType<typeof AppleReceipt>;
18
+ export default AppleReceipt;
package/dist/emails/demo-email.svelte CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  <Container style="margin-bottom:1.5rem; border-radius:0.5rem; background-color:rgb(239,246,255); padding:1rem;">
30
30
  <Text style="margin-bottom:0.5rem; font-weight:600; color:rgb(30,58,138);">✨ Features Demonstrated:</Text>
31
- <ul style="list-style-type:disc; padding-left:1.25rem; color:rgb(30,64,175);">
31
+ <ul style="display:flex; list-style-type:disc; flex-direction:column; gap:0.25rem; padding-left:1.25rem; color:rgb(30,64,175);">
32
32
  <li>Tailwind classes converted to inline styles</li>
33
33
  <li>Responsive design with media queries</li>
34
34
  <li>Email-safe CSS transformations</li>
package/dist/emails/test-email.svelte CHANGED
@@ -1,12 +1,14 @@
1
1
  <script>
2
- import { Html, Head, Body, Text, Button, Container } from '../components/index.js';
2
+ import { Html, Head, Body, Text, Button, Container, Heading } from '../components/index.js';
3
3
  </script>
4
4
 
5
5
  <Html>
6
6
  <Head />
7
7
  <Body>
8
8
  <Container style="background-color:rgb(243,244,246);padding: 2rem;" >
9
- <Text style="font-size:1.125rem;line-height:1.75rem; font-weight:700; color:rgb(37,99,235);">Hello World</Text>
9
+ <Heading as="h1" m="10" style="color:rgb(37,99,235);font-weight: bold;">Title</Heading>
10
+ <Heading as="h2" style="font-weight:600;">Subtitle</Heading>
11
+ <Text style="font-weight: bold;">Basic text</Text>
10
12
  <Button
11
13
  style="border-radius:0.25rem; background-color:rgb(59,130,246); padding-left:1rem;padding-right:1rem; padding-top:0.5rem;padding-bottom:0.5rem; color:rgb(255,255,255);width: 33.33%"
12
14
 
package/dist/emails/vercel-invite-user.svelte ADDED
@@ -0,0 +1,136 @@
1
+ <script lang="ts">
2
+ import {
3
+ Body,
4
+ Button,
5
+ Column,
6
+ Container,
7
+ Head,
8
+ Heading,
9
+ Hr,
10
+ Html,
11
+ Img,
12
+ Link,
13
+ Preview,
14
+ Row,
15
+ Section,
16
+ Text
17
+ } from '../components/index.js';
18
+
19
+ interface Props {
20
+ username?: string;
21
+ userImage?: string;
22
+ invitedByUsername?: string;
23
+ invitedByEmail?: string;
24
+ teamName?: string;
25
+ teamImage?: string;
26
+ inviteLink?: string;
27
+ inviteFromIp?: string;
28
+ inviteFromLocation?: string;
29
+ }
30
+
31
+ let {
32
+ username = 'alanturing',
33
+ userImage = '/vercel-user.png',
34
+ invitedByUsername = 'Alan',
35
+ invitedByEmail = 'alan.turing@example.com',
36
+ teamName = 'Enigma',
37
+ teamImage = '/vercel-team.png',
38
+ inviteLink = 'https://vercel.com',
39
+ inviteFromIp = '204.13.186.218',
40
+ inviteFromLocation = 'São Paulo, Brazil'
41
+ }: Props = $props();
42
+
43
+ const baseUrl =
44
+ process.env.VERCEL === '1' ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}/` : '/';
45
+
46
+ const previewText = `Join ${invitedByUsername} on Vercel`;
47
+ </script>
48
+
49
+ <Html>
50
+ <Head />
51
+ <Body style="margin-left:auto;margin-right:auto; margin-top:auto;margin-bottom:auto; background-color:rgb(255,255,255); padding-left:0.5rem;padding-right:0.5rem; font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;">
52
+ <Preview preview={previewText} />
53
+ <Container
54
+ style="margin-left:auto;margin-right:auto; margin-top:40px;margin-bottom:40px; max-width:465px; border-radius:0.25rem; border-width:1px; border-style:solid; border-color:rgb(234,234,234); padding:20px;"
55
+ >
56
+ <Section style="margin-top:32px;">
57
+ <Img
58
+ src="{baseUrl}vercel-logo.png"
59
+ width="40"
60
+ height="37"
61
+ alt="Vercel Logo"
62
+ style="margin-left:auto;margin-right:auto; margin-top:0px;margin-bottom:0px;"
63
+ />
64
+ </Section>
65
+ <Heading as="h1" style="margin-left:0px;margin-right:0px; margin-top:30px;margin-bottom:30px; padding:0px; text-align:center; font-size:24px; font-weight:400; color:rgb(0,0,0);">
66
+ Join <strong>{teamName}</strong> on <strong>Vercel</strong>
67
+ </Heading>
68
+ <Text style="font-size:14px; line-height:24px; color:rgb(0,0,0);">
69
+ Hello {username},
70
+ </Text>
71
+ <Text style="font-size:14px; line-height:24px; color:rgb(0,0,0);">
72
+ <strong>{invitedByUsername}</strong> (<Link
73
+ href={`mailto:${invitedByEmail}`}
74
+ style="color:rgb(37,99,235); text-decoration-line:none;"
75
+ >
76
+ {invitedByEmail}
77
+ </Link>) has invited you to the <strong>{teamName}</strong> team on
78
+ <strong>Vercel</strong>.
79
+ </Text>
80
+ <Section>
81
+ <Row>
82
+ <Column align="right">
83
+ <Img
84
+ style="border-radius:9999px;"
85
+ src="{baseUrl}{userImage}"
86
+ width="64"
87
+ height="64"
88
+ alt={`${username}'s profile picture`}
89
+ />
90
+ </Column>
91
+ <Column align="center">
92
+ <Img
93
+ src="{baseUrl}vercel-arrow.png"
94
+ width="12"
95
+ height="9"
96
+ alt="Arrow indicating invitation"
97
+ />
98
+ </Column>
99
+ <Column align="left">
100
+ <Img
101
+ style="border-radius:9999px;"
102
+ src="{baseUrl}{teamImage}"
103
+ width="64"
104
+ height="64"
105
+ alt={`${teamName} team logo`}
106
+ />
107
+ </Column>
108
+ </Row>
109
+ </Section>
110
+ <Section style="margin-top:32px; margin-bottom:32px; text-align:center;">
111
+ <Button
112
+ style="border-radius:0.25rem; background-color:rgb(0,0,0); padding-left:1.25rem;padding-right:1.25rem; padding-top:0.75rem;padding-bottom:0.75rem; text-align:center; font-size:12px; font-weight:600; color:rgb(255,255,255); text-decoration-line:none;"
113
+ href={inviteLink}
114
+ >
115
+ Join the team
116
+ </Button>
117
+ </Section>
118
+ <Text style="font-size:14px; line-height:24px; color:rgb(0,0,0);">
119
+ or copy and paste this URL into your browser:
120
+ <Link href={inviteLink} style="color:rgb(37,99,235); text-decoration-line:none;">
121
+ {inviteLink}
122
+ </Link>
123
+ </Text>
124
+ <Hr style="margin-left:0px;margin-right:0px; margin-top:26px;margin-bottom:26px; width:100%; border-width:1px; border-style:solid; border-color:rgb(234,234,234);" />
125
+ <Text style="font-size:12px; line-height:24px; color:rgb(102,102,102);">
126
+ This invitation was intended for
127
+ <span style="color:rgb(0,0,0);">{username}</span>. This invite was sent from
128
+ <span style="color:rgb(0,0,0);">{inviteFromIp}</span>
129
+ located in
130
+ <span style="color:rgb(0,0,0);">{inviteFromLocation}</span>. If you were not expecting this
131
+ invitation, you can ignore this email. If you are concerned about your account's safety,
132
+ please reply to this email to get in touch with us.
133
+ </Text>
134
+ </Container>
135
+ </Body>
136
+ </Html>
package/dist/emails/vercel-invite-user.svelte.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ interface Props {
2
+ username?: string;
3
+ userImage?: string;
4
+ invitedByUsername?: string;
5
+ invitedByEmail?: string;
6
+ teamName?: string;
7
+ teamImage?: string;
8
+ inviteLink?: string;
9
+ inviteFromIp?: string;
10
+ inviteFromLocation?: string;
11
+ }
12
+ declare const VercelInviteUser: import("svelte").Component<Props, {}, "">;
13
+ type VercelInviteUser = ReturnType<typeof VercelInviteUser>;
14
+ export default VercelInviteUser;
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export { Body, Button, Container, Head, Hr, Html, Section, Text } from './components/index.js';
1
+ export * from './components/index.js';
2
2
  export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
3
3
  export type { PreprocessorOptions, ComponentTransform } from './preprocessor/index.js';
4
4
  export type { ClassAttribute, TransformResult, MediaQueryStyle } from './preprocessor/types.js';
@@ -6,4 +6,4 @@ export type { TailwindConfig } from 'tw-to-css';
6
6
  export { parseAttributes as parseClassAttributes, findHeadComponent } from './preprocessor/parser.js';
7
7
  export { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './preprocessor/transformer.js';
8
8
  export { injectMediaQueries } from './preprocessor/head-injector.js';
9
- export { styleToString, pxToPt } from './utils/index.js';
9
+ export { styleToString, pxToPt, combineStyles, withMargin, renderAsPlainText } from './utils/index.js';
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // Export email components
2
- export { Body, Button, Container, Head, Hr, Html, Section, Text } from './components/index.js';
2
+ export * from './components/index.js';
3
3
  // Export the preprocessor
4
4
  export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
5
5
  // Export individual functions for advanced usage
@@ -7,4 +7,4 @@ export { parseAttributes as parseClassAttributes, findHeadComponent } from './pr
7
7
  export { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './preprocessor/transformer.js';
8
8
  export { injectMediaQueries } from './preprocessor/head-injector.js';
9
9
  // Export utilities
10
- export { styleToString, pxToPt } from './utils/index.js';
10
+ export { styleToString, pxToPt, combineStyles, withMargin, renderAsPlainText } from './utils/index.js';
package/dist/preprocessor/index.js CHANGED
@@ -2,6 +2,7 @@ import MagicString from 'magic-string';
2
2
  import { parseAttributes } from './parser.js';
3
3
  import { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './transformer.js';
4
4
  import { injectMediaQueries } from './head-injector.js';
5
+ import path from 'path';
5
6
  /**
6
7
  * Svelte 5 preprocessor for transforming Tailwind classes in email components
7
8
  *
@@ -24,7 +25,7 @@ import { injectMediaQueries } from './head-injector.js';
24
25
  * Reference: https://svelte.dev/docs/svelte/svelte-compiler#preprocess
25
26
  */
26
27
  export function betterSvelteEmailPreprocessor(options = {}) {
27
- const { tailwindConfig, pathToEmailFolder = '/src/lib/emails', debug = false } = options;
28
+ const { tailwindConfig, pathToEmailFolder = '/src/lib/emails', debug = true } = options;
28
29
  // Initialize Tailwind converter once (performance optimization)
29
30
  const tailwindConverter = createTailwindConverter(tailwindConfig);
30
31
  // Return a Svelte 5 PreprocessorGroup
@@ -49,7 +50,7 @@ export function betterSvelteEmailPreprocessor(options = {}) {
49
50
  // Log warnings if debug mode is enabled
50
51
  if (result.warnings.length > 0) {
51
52
  if (debug) {
52
- console.warn(`[better-svelte-email] Warnings for ${filename}:`, result.warnings);
53
+ console.warn(`[better-svelte-email] Warnings for ${path.relative(process.cwd(), filename)}:\n`, result.warnings.join('\n'));
53
54
  }
54
55
  }
55
56
  // Return the transformed code
package/dist/preprocessor/transformer.js CHANGED
@@ -66,15 +66,15 @@ function extractStylesFromCSS(css, originalClasses) {
66
66
  let match;
67
67
  while ((match = classRegex.exec(cssWithoutMedia)) !== null) {
68
68
  const className = match[1];
69
- const rules = match[2].trim();
69
+ const rules = match[2].replace(/\\/g, '').trim();
70
70
  // Normalize class name (tw-to-css might transform special chars)
71
- const normalizedClass = className.replace(/[:#\-[\]/.%!_]+/g, '_');
71
+ const normalizedClass = className.replace(/\\/g, '').replace(/[:#\-[\]/.%!_]+/g, '_');
72
72
  classMap.set(normalizedClass, rules);
73
73
  }
74
74
  // For each original class, try to find its CSS
75
75
  for (const originalClass of originalClasses) {
76
76
  // Normalize the original class name to match what tw-to-css produces
77
- const normalized = originalClass.replace(/[:#\-[\]/.%!]+/g, '_');
77
+ const normalized = originalClass.replace(/[:#\-[\]/.%!_]+/g, '_');
78
78
  if (classMap.has(normalized)) {
79
79
  const rules = classMap.get(normalized);
80
80
  // Ensure rules end with semicolon for proper concatenation