@react-email/button - npm Package Compare versions

Comparing version 0.0.16-canary.0 to 0.0.16-canary.1

dist/index.js

@@ -159,14 +159,24 @@ "use strict";
 var import_jsx_runtime = require("react/jsx-runtime");
+function computeFontWidthAndSpaceCount(expectedWidth) {
+  let smallestSpaceCount = 0;
+  while (expectedWidth / smallestSpaceCount / 2 > 5) {
+    smallestSpaceCount++;
+  }
+  return [expectedWidth / smallestSpaceCount / 2, smallestSpaceCount];
+}
 var Button = React.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, style, target = "_blank" } = _b, props = __objRest(_b, ["children", "style", "target"]);
+    var _a2, _b2, _c, _d;
     const { pt, pr, pb, pl } = parsePadding({
       padding: style == null ? void 0 : style.padding,
-      paddingLeft: style == null ? void 0 : style.paddingLeft,
-      paddingRight: style == null ? void 0 : style.paddingRight,
-      paddingTop: style == null ? void 0 : style.paddingTop,
-      paddingBottom: style == null ? void 0 : style.paddingBottom
+      paddingLeft: (_a2 = style == null ? void 0 : style.paddingLeft) != null ? _a2 : style == null ? void 0 : style.paddingInline,
+      paddingRight: (_b2 = style == null ? void 0 : style.paddingRight) != null ? _b2 : style == null ? void 0 : style.paddingInline,
+      paddingTop: (_c = style == null ? void 0 : style.paddingTop) != null ? _c : style == null ? void 0 : style.paddingBlock,
+      paddingBottom: (_d = style == null ? void 0 : style.paddingBottom) != null ? _d : style == null ? void 0 : style.paddingBlock
     });
     const y = pt + pb;
     const textRaise = pxToPt(y);
+    const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(pl);
+    const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(pr);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -183,3 +193,10 @@ "a",
               dangerouslySetInnerHTML: {
-                __html: `<!--[if mso]><i style="letter-spacing: ${pl}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`
+                // The `&#8202;` is as close to `1px` of an empty character as we can get, then, we use the `mso-font-width`
+                // to scale it according to what padding the developer wants. `mso-font-width` also does not allow for percentages
+                // >= 500% so we need to add extra spaces accordingly.
+                //
+                // See https://github.com/resend/react-email/issues/1512 for why we do not use letter-spacing instead.
+                __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}" hidden>${"&#8202;".repeat(
+                  plSpaceCount
+                )}</i><![endif]-->`
               }
@@ -193,3 +210,5 @@ }
               dangerouslySetInnerHTML: {
-                __html: `<!--[if mso]><i style="letter-spacing: ${pr}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`
+                __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(
+                  prSpaceCount
+                )}&#8203;</i><![endif]-->`
               }
@@ -196,0 +215,0 @@ }

package.json

 {
   "name": "@react-email/button",
-  "version": "0.0.16-canary.0",
+  "version": "0.0.16-canary.1",
   "description": "A link that is styled to look like a button",
@@ -38,3 +38,3 @@ "sideEffects": false,
   "peerDependencies": {
-    "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+    "react": "^18.2.0"
   },
@@ -44,5 +44,5 @@ "devDependencies": {
     "typescript": "5.1.6",
-    "@react-email/render": "0.0.17-canary.0",
     "eslint-config-custom": "0.0.0",
-    "tsconfig": "0.0.0"
+    "tsconfig": "0.0.0",
+    "@react-email/render": "0.0.17-canary.1"
   },
@@ -49,0 +49,0 @@ "publishConfig": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21598

increased by13.23%

Lines of code

447

increased by9.29%

No dependency changes