diff --git a/apps/test/tests/.snapshots/smoke.spec.ts-Code-chromium.snap b/apps/test/tests/.snapshots/smoke.spec.ts-Code-chromium.snap index 44f918bc..369e70ee 100644 --- a/apps/test/tests/.snapshots/smoke.spec.ts-Code-chromium.snap +++ b/apps/test/tests/.snapshots/smoke.spec.ts-Code-chromium.snap @@ -42,7 +42,7 @@ } .rounded { - border-radius: 0.25rem; + border-radius: 4px; } .border-solid { diff --git a/apps/test/tests/.snapshots/smoke.spec.ts-Tailwind-chromium.snap b/apps/test/tests/.snapshots/smoke.spec.ts-Tailwind-chromium.snap index 26a939c6..ec4e3eaf 100644 --- a/apps/test/tests/.snapshots/smoke.spec.ts-Tailwind-chromium.snap +++ b/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; } diff --git a/packages/jsx-email/package.json b/packages/jsx-email/package.json index 2ed73a02..02ef982a 100644 --- a/packages/jsx-email/package.json +++ b/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", diff --git a/packages/jsx-email/src/components/tailwind/tailwind.tsx b/packages/jsx-email/src/components/tailwind/tailwind.tsx index 8f9815c3..20909796 100644 --- a/packages/jsx-email/src/components/tailwind/tailwind.tsx +++ b/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() diff --git a/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap b/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap index b095e342..6b4adf96 100644 --- a/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap +++ b/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 { diff --git a/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap b/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap index 0dd34717..b4fb40e1 100644 --- a/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap +++ b/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap @@ -8,10 +8,10 @@ exports[` 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;} }" `; @@ -38,14 +38,14 @@ exports[` component > should work with calc() with + sign 1`] = ` "
something tall
" `; exports[`Custom theme config > should be able to use custom border radius 1`] = ` "
" +.rounded-4xl{border-radius:32px;}" `; 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`] = ` "
" +.m-8xl{margin:1536px;}" `; 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`] = ` "
" +.je-5wyw0k{background-color:rgb(254,226,226);font-size:14px;line-height:20px;}" `; exports[`Responsive styles > should add css to 1`] = ` @@ -152,7 +152,7 @@ exports[`Tailwind component > Inline styles > should render children with inline "
" +.text-sm{font-size:14px;line-height:20px;}
" `; 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`] = ` "
" +.\\\\!w-12{width:48px !important;}" `; exports[`Tailwind component > should preserve inline styles with Tailwind classes 1`] = ` diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dbd84c59..00b2e1be 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -249,6 +249,9 @@ importers: '@unocss/core': specifier: ^0.58.3 version: 0.58.3 + '@unocss/preset-rem-to-px': + specifier: ^0.59.3 + version: 0.59.3 '@unocss/preset-typography': specifier: ^0.58.3 version: 0.58.3 @@ -3160,6 +3163,10 @@ packages: resolution: {integrity: sha512-qbPqL+46hf1/UelQOwUwpAuvm6buoss43DPYHOPdfNJ+NTWkSpATQMF0JKT04QE0QRQbHNSHdMe9ariG+IIlCw==} dev: false + /@unocss/core@0.59.3: + resolution: {integrity: sha512-G9+1pmQB65KnGj2tvshcMGYs1aqiaw9FWb8cxMRLvQyquuOU/JdULD9vuuchXQ+DLYPTZ4vgDmMJefBJT6JDVw==} + dev: false + /@unocss/extractor-arbitrary-variants@0.58.3: resolution: {integrity: sha512-QszC2atLcvzyoZFsjgtMBbILN4lrYI60iVRWdii+GGiKVtoIaKRWiA/3WERkvYGVPseVWOMflUpfxNeq+s9zUw==} dependencies: @@ -3228,6 +3235,12 @@ packages: '@unocss/rule-utils': 0.58.5 dev: false + /@unocss/preset-rem-to-px@0.59.3: + resolution: {integrity: sha512-tTp28cdFpj+BYmv2fHS9R+QlVl2Z1R/SMTpISVQqLWHV1zYBF9sgaR2r77bX3EVnCDGcF62gmpGsgMvKyxEACA==} + dependencies: + '@unocss/core': 0.59.3 + dev: false + /@unocss/preset-tagify@0.58.5: resolution: {integrity: sha512-UB9IXi8vA/SzmmRLMWR7bzeBpxpiRo7y9xk3ruvDddYlsyiwIeDIMwG23YtcA6q41FDQvkrmvTxUEH9LFlv6aA==} dependencies: @@ -3297,7 +3310,7 @@ packages: resolution: {integrity: sha512-0Px9gIW+VOKetZuYET19uamIRpk7A9c8sCzQuGlNvCLXKEWamqXz5asLtnvPzw6SwCXEQDgWXE9i+aeoXaM0Jg==} engines: {node: '>=14'} dependencies: - '@unocss/core': 0.58.3 + '@unocss/core': 0.58.5 magic-string: 0.30.5 dev: false