Skip to content

Commit

Permalink
feat(jsx-email): add rem-to-px preset to unoconfig (#189)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lordelogos
lordelogos authored Apr 17, 2024
1 parent 1f74937 commit 609e387
Show file tree
Hide file tree
Showing 7 changed files with 40 additions and 23 deletions.
2 changes: 1 addition & 1 deletion apps/test/tests/.snapshots/smoke.spec.ts-Code-chromium.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
}

.rounded {
border-radius: 0.25rem;
border-radius: 4px;
}

.border-solid {
Expand Down
10 changes: 5 additions & 5 deletions apps/test/tests/.snapshots/smoke.spec.ts-Tailwind-chromium.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
}

.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-left: 12px;
padding-right: 12px;
}

.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-top: 8px;
padding-bottom: 8px;
}

.text-white {
Expand All @@ -26,7 +26,7 @@
}

.leading-4 {
line-height: 1rem;
line-height: 16px;
}
</style>
</head>
Expand Down
1 change: 1 addition & 0 deletions packages/jsx-email/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"@jsx-email/minify-preset": "workspace:^",
"@radix-ui/react-slot": "1.0.2",
"@unocss/core": "^0.58.3",
"@unocss/preset-rem-to-px": "^0.59.3",
"@unocss/preset-typography": "^0.58.3",
"@unocss/preset-uno": "^0.58.3",
"@unocss/preset-wind": "^0.58.3",
Expand Down
3 changes: 3 additions & 0 deletions packages/jsx-email/src/components/tailwind/tailwind.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { createGenerator, type ConfigBase } from '@unocss/core';
import { presetTypography } from '@unocss/preset-typography';
import { presetWind } from '@unocss/preset-wind';
import { presetUno } from '@unocss/preset-uno';
import { presetRemToPx } from '@unocss/preset-rem-to-px';
import transformerCompileClass from '@unocss/transformer-compile-class';
import transformerVariantGroup from '@unocss/transformer-variant-group';
import MagicString from 'magic-string';
Expand Down Expand Up @@ -51,6 +52,8 @@ const getUno = (config: ConfigBase, production: boolean) => {

const presets = [
...(config.presets || []),
// Convert all `rem` values to `px`
presetRemToPx(),
presetTypography(),
presetUno({ dark: 'media' }),
presetWind()
Expand Down
16 changes: 8 additions & 8 deletions packages/jsx-email/test/render/.snapshots/render.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,15 +157,15 @@ exports[`render > renders the vercel demo template 1`] = `
.border-separate{border-collapse:separate;}
.border{border-width:1px;}
.border-\\\\[\\\\#eaeaea\\\\]{border-color:rgb(234,234,234);}
.rounded{border-radius:0.25rem;}
.rounded{border-radius:4px;}
.rounded-full{border-radius:9999px;}
.border-solid{border-style:solid;}
.bg-\\\\[\\\\#000000\\\\]{background-color:rgb(0,0,0);}
.bg-white{background-color:rgb(255,255,255);}
.p-\\\\[20px\\\\]{padding:20px;}
.p-0{padding:0;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.px-5{padding-left:20px;padding-right:20px;}
.py-3{padding-top:12px;padding-bottom:12px;}
.text-center{text-align:center;}
.\\\\!text-\\\\[12px\\\\]{font-size:12px !important;}
.\\\\!text-\\\\[14px\\\\]{font-size:14px !important;}
Expand Down Expand Up @@ -261,7 +261,7 @@ exports[`render > renders the vercel demo template 2`] = `
}
.rounded {
border-radius: 0.25rem;
border-radius: 4px;
}
.rounded-full {
Expand Down Expand Up @@ -289,13 +289,13 @@ exports[`render > renders the vercel demo template 2`] = `
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-left: 20px;
padding-right: 20px;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-top: 12px;
padding-bottom: 12px;
}
.text-center {
Expand Down
16 changes: 8 additions & 8 deletions packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ exports[`<Tailwind> component > should preserve mso styles 1`] = `
.sm\\\\:bg-red-50{background-color:rgb(254,242,242);}
@media (min-width: 640px){
.sm\\\\:bg-red-50{background-color:rgb(254,242,242);}}
.sm\\\\:text-sm{font-size:0.875rem;line-height:1.25rem;}
.sm\\\\:text-sm{font-size:14px;line-height:20px;}
}
@media (min-width: 768px){
.md\\\\:text-lg{font-size:1.125rem;line-height:1.75rem;}
.md\\\\:text-lg{font-size:18px;line-height:28px;}
}</style></head>"
`;

Expand All @@ -38,14 +38,14 @@ exports[`<Tailwind> component > should work with calc() with + sign 1`] = `
"<head><div class=\\"max-h-[calc(50px+3rem)] bg-red-100\\"><div class=\\"h-[200px]\\">something tall</div></div><style tailwind>/* layer: preflights */
/* layer: default */
.h-\\\\[200px\\\\]{height:200px;}
.max-h-\\\\[calc\\\\(50px\\\\+3rem\\\\)\\\\]{max-height:calc(50px + 3rem);}
.max-h-\\\\[calc\\\\(50px\\\\+3rem\\\\)\\\\]{max-height:calc(50px + 48px);}
.bg-red-100{background-color:rgb(254,226,226);}</style></head>"
`;
exports[`Custom theme config > should be able to use custom border radius 1`] = `
"<head><div class=\\"rounded-4xl\\"></div><style tailwind>/* layer: preflights */
/* layer: default */
.rounded-4xl{border-radius:2rem;}</style></head>"
.rounded-4xl{border-radius:32px;}</style></head>"
`;
exports[`Custom theme config > should be able to use custom colors 1`] = `
Expand All @@ -65,7 +65,7 @@ exports[`Custom theme config > should be able to use custom fonts 1`] = `
exports[`Custom theme config > should be able to use custom spacing 1`] = `
"<head><div class=\\"m-8xl\\"></div><style tailwind>/* layer: preflights */
/* layer: default */
.m-8xl{margin:96rem;}</style></head>"
.m-8xl{margin:1536px;}</style></head>"
`;
exports[`Custom theme config > should be able to use custom text alignment 1`] = `
Expand All @@ -77,7 +77,7 @@ exports[`Custom theme config > should be able to use custom text alignment 1`] =
exports[`Production mode > should generate class names with a prefix 1`] = `
"<head><html lang=\\"en\\" dir=\\"ltr\\"><div class=\\"je-5wyw0k\\"></div></html><style tailwind>/* layer: preflights */
/* layer: shortcuts */
.je-5wyw0k{background-color:rgb(254,226,226);font-size:0.875rem;line-height:1.25rem;}</style></head>"
.je-5wyw0k{background-color:rgb(254,226,226);font-size:14px;line-height:20px;}</style></head>"
`;
exports[`Responsive styles > should add css to <head/> 1`] = `
Expand Down Expand Up @@ -152,7 +152,7 @@ exports[`Tailwind component > Inline styles > should render children with inline
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><html><head><style tailwind>/* layer: preflights */
/* layer: default */
.bg-white{background-color:rgb(255,255,255);}
.text-sm{font-size:0.875rem;line-height:1.25rem;}</style></head><body><div class=\\"bg-white text-sm\\"></div></body></html>"
.text-sm{font-size:14px;line-height:20px;}</style></head><body><div class=\\"bg-white text-sm\\"></div></body></html>"
`;
exports[`Tailwind component > should be able to use background image 1`] = `
Expand All @@ -164,7 +164,7 @@ exports[`Tailwind component > should be able to use background image 1`] = `
exports[`Tailwind component > should preserve component inline styles with Tailwind styles 1`] = `
"<head><hr class=\\"!w-12\\" style=\\"border:none;border-top:1px solid #eaeaea;width:100%\\"/><style tailwind>/* layer: preflights */
/* layer: default */
.\\\\!w-12{width:3rem !important;}</style></head>"
.\\\\!w-12{width:48px !important;}</style></head>"
`;
exports[`Tailwind component > should preserve inline styles with Tailwind classes 1`] = `
Expand Down
15 changes: 14 additions & 1 deletion pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 609e387

Please sign in to comment.