feat(jsx-email): add rem-to-px preset to unoconfig (#189)

apps/test/tests/.snapshots/smoke.spec.ts-Code-chromium.snap

@@ -42,7 +42,7 @@
     }
 
     .rounded {
-      border-radius: 0.25rem;
+      border-radius: 4px;
     }
 
     .border-solid {

apps/test/tests/.snapshots/smoke.spec.ts-Tailwind-chromium.snap

@@ -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 {
@@ -26,7 +26,7 @@
     }
 
     .leading-4 {
-      line-height: 1rem;
+      line-height: 16px;
     }
     </style>
   </head>

packages/jsx-email/package.json

@@ -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",

packages/jsx-email/src/components/tailwind/tailwind.tsx

@@ -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';
@@ -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()

packages/jsx-email/test/render/.snapshots/render.test.tsx.snap

@@ -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;}
@@ -261,7 +261,7 @@ exports[`render > renders the vercel demo template 2`] = `
       }
 
       .rounded {
-        border-radius: 0.25rem;
+        border-radius: 4px;
       }
 
       .rounded-full {
@@ -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 {

packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap

@@ -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>"
 `;
 
@@ -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`] = `
@@ -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`] = `
@@ -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`] = `
@@ -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`] = `
@@ -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`] = `