Skip to content

Commit 5c17f33

Browse files
FlowkoFlowko
committed
feat: tailwind improvements
1 parent 6f9daaf commit 5c17f33

24 files changed

+255
-303
lines changed

‎build.config.ts‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,5 @@ export default defineBuildConfig({
99
rollup: {
1010
emitCJS: true,
1111
inlineDependencies: true,
12-
esbuild: {
13-
define: {
14-
'process.env.DEBUG': 'undefined',
15-
'process.env.JEST_WORKER_ID': '1',
16-
'process.env.ENGINE': 'stable',
17-
'process.env.OXIDE': 'undefined',
18-
'__OXIDE__': 'undefined',
19-
'__dirname': '"/"',
20-
},
21-
supported: {
22-
'nullish-coalescing': false,
23-
'optional-chain': false,
24-
},
25-
},
2612
},
27-
externals: [],
2813
})

‎eslint.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default antfu(
55
{
66
ignores: [
77
// eslint ignore globs here
8-
'playground/**/*',
8+
// 'playground/**/*',
99
],
1010
},
1111
{

‎package.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,8 @@
6868
"vue": "^3.3.8"
6969
},
7070
"dependencies": {
71+
"@vue-email/tailwind": "^0.0.6",
7172
"isomorphic-dompurify": "^1.12.0",
72-
"postcss": "^8.4.32",
73-
"tailwindcss": "^3.3.6",
7473
"ufo": "^1.3.2",
7574
"vue": "^3.3.8",
7675
"vue-i18n": "^9.8.0"
@@ -81,16 +80,15 @@
8180
"@antfu/utils": "^0.7.7",
8281
"@types/html-to-text": "^9.0.4",
8382
"@types/node": "^20.10.4",
84-
"@types/postcss-css-variables": "^0.18.3",
8583
"@types/pretty": "^2.0.3",
84+
"@vitejs/plugin-vue": "^4.5.2",
8685
"bumpp": "^9.2.1",
8786
"eslint": "^8.55.0",
8887
"esno": "^4.0.0",
8988
"html-to-text": "^9.0.5",
9089
"jiti": "^1.21.0",
9190
"lint-staged": "^15.2.0",
9291
"pnpm": "^8.12.1",
93-
"postcss-css-variables": "^0.19.0",
9492
"pretty": "^2.0.0",
9593
"rimraf": "^5.0.5",
9694
"simple-git-hooks": "^2.9.0",

‎playground/src/App.vue‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
<script setup lang="ts">
2-
import { onMounted, ref} from 'vue'
3-
import { useRender } from 'vue-email';
4-
import Test from './components/Test.vue';
2+
import { onMounted, ref } from 'vue'
3+
import { useRender } from 'vue-email'
4+
import Test from './components/Test2.vue'
55
6-
const email = ref('')
7-
onMounted(async ()=>{
8-
await useRender(Test, { props: { title: 'Some title' } }, {
6+
const email = ref('')
7+
onMounted(async () => {
8+
await useRender(Test, { props: { title: 'Some title' } }, {
99
pretty: true,
1010
}).then((res) => {
1111
email.value = res.html
1212
})
13-
})
14-
15-
13+
})
1614
</script>
1715

1816
<template>
19-
<div>
20-
{{ email }}
21-
</div>
17+
<iframe :srcdoc="email" />
2218
</template>
2319

2420
<style scoped>
25-
21+
#app, body, html, iframe {
22+
width: 100%;
23+
height: 100vh;
24+
}
2625
</style>

‎playground/src/components/Test.vue‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
2-
3-
import { ETailwind, EHtml, EHead, EPreview, EBody, EContainer, ESection, EHeading, EImg, EText, ELink, ERow, EColumn, EHr } from 'vue-email'
2+
import { EBody, EButton, EColumn, EContainer, EHead, EHeading, EHr, EHtml, EImg, ELink, EPreview, ERow, ESection, ETailwind, EText } from 'vue-email'
43
54
interface Props {
65
invitedByUsername?: string
@@ -25,19 +24,21 @@ const previewText = `Join ${props.invitedByUsername} on Vercel`
2524
</script>
2625

2726
<template>
28-
<ETailwind>
29-
<EHtml>
27+
<EHtml>
28+
<ETailwind>
3029
<EHead />
3130
<EPreview>{{ previewText }}</EPreview>
3231
<EBody class="bg-white my-auto mx-auto font-sans">
33-
<EContainer class="border border-solid border-[#eaeaea] p-[20px] md:p-7 rounded my-[40px] mx-auto max-w-[465px]">
32+
<EContainer class="border border-solid border-[#eaeaea] p-[20px] md:p-20 rounded my-[40px] mx-auto max-w-[465px]">
3433
<ESection class="mt-[32px]">
3534
<EImg src="/static/vercel-logo.png" width="40" height="37" alt="Vercel" class="my-0 mx-auto" />
3635
</ESection>
3736
<EHeading class="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
3837
Join <strong>{{ teamName }}</strong> on <strong>Vercel</strong>
3938
</EHeading>
40-
<EText class="text-black text-[14px] leading-[24px]"> Hello {{ username }}, </EText>
39+
<EText class="text-black text-[14px] leading-[24px]">
40+
Hello {{ username }},
41+
</EText>
4142
<EText class="text-black text-[14px] leading-[24px]">
4243
<strong>bukinoshita</strong> (
4344
<ELink :href="`mailto:${invitedByEmail}`" class="text-blue-600 no-underline">
@@ -59,7 +60,9 @@ const previewText = `Join ${props.invitedByUsername} on Vercel`
5960
</ERow>
6061
</ESection>
6162
<ESection class="text-center mt-[32px] mb-[32px]">
62-
<EButton px="20" py="12" class="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center" :href="inviteLink"> Join the team </EButton>
63+
<EButton px="20" py="12" class="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center" :href="inviteLink">
64+
Join the team
65+
</EButton>
6366
</ESection>
6467
<EText class="text-black text-[14px] leading-[24px]">
6568
or copy and paste this URL into your browser:
@@ -71,12 +74,11 @@ const previewText = `Join ${props.invitedByUsername} on Vercel`
7174
<EText class="text-[#666666] text-[12px] leading-[24px]">
7275
This invitation was intended for
7376
<span class="text-black">{{ username }} </span>.This invite was sent from <span class="text-black">{{ inviteFromIp }}</span> located in
74-
<span class="text-black">{{ inviteFromLocation }}</span
75-
>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch
77+
<span class="text-black">{{ inviteFromLocation }}</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch
7678
with us.
7779
</EText>
7880
</EContainer>
7981
</EBody>
80-
</EHtml>
81-
</ETailwind>
82+
</ETailwind>
83+
</EHtml>
8284
</template>

‎playground/src/components/Test2.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script setup lang="ts">
2+
import { EBody, EContainer, EHead, EHtml, EPreview, ETailwind, EText } from 'vue-email'
3+
4+
interface Props {
5+
invitedByUsername?: string
6+
teamName?: string
7+
username?: string
8+
invitedByEmail?: string
9+
inviteLink?: string
10+
inviteFromIp?: string
11+
inviteFromLocation?: string
12+
}
13+
14+
const props = withDefaults(defineProps<Props>(), {
15+
teamName: 'My project',
16+
username: 'John Doe',
17+
invitedByEmail: '[email protected]',
18+
inviteLink: 'https://vercel.com/teams/invite/foo',
19+
inviteFromIp: '172.0.0.1',
20+
inviteFromLocation: 'San Francisco, CA',
21+
})
22+
23+
const previewText = `Join ${props.invitedByUsername} on Vercel`
24+
</script>
25+
26+
<template>
27+
<EHtml>
28+
<ETailwind>
29+
<EHead />
30+
<EPreview>{{ previewText }}</EPreview>
31+
<EBody class="bg-white my-auto mx-auto font-sans">
32+
<EContainer>
33+
<EText>
34+
Only this text have text-base applied
35+
</EText>
36+
<EText>
37+
This text should have text-base applied, but does not.
38+
</EText>
39+
</EContainer>
40+
</EBody>
41+
</ETailwind>
42+
</EHtml>
43+
</template>

‎playground/src/main.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import App from './App.vue'
55
const app = createApp(App)
66

77
app.use(VueEmailPlugin, {
8-
baseUrl: "https://vue-email-demo.vercel.app/"
8+
baseUrl: 'https://vue-email-demo.vercel.app/',
99
})
1010

1111
app.mount('#app')

‎playground/tailwind.config.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,3 @@ export default {
66
},
77
plugins: [],
88
}
9-

‎playground/tsconfig.app.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"extends": "@vue/tsconfig/tsconfig.dom.json",
3-
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
4-
"exclude": ["src/**/__tests__/*"],
53
"compilerOptions": {
64
"composite": true,
7-
"noEmit": true,
85
"baseUrl": ".",
96
"paths": {
107
"@/*": ["./src/*"]
11-
}
12-
}
8+
},
9+
"noEmit": true
10+
},
11+
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
12+
"exclude": ["src/**/__tests__/*"]
1313
}

‎playground/tsconfig.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
2-
"files": [],
32
"references": [
43
{
54
"path": "./tsconfig.node.json"
65
},
76
{
87
"path": "./tsconfig.app.json"
98
}
10-
]
9+
],
10+
"files": []
1111
}

0 commit comments

Comments
 (0)