@react-email/body 0.1.1-tailwindv4.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.mts.map +1 -1
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +22 -5
  4. package/dist/index.mjs +22 -5
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +2 -2
package/dist/index.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.mts","names":[],"sources":["../src/body.tsx"],"sourcesContent":[],"mappings":";;;KAEY,SAAA,GAAY,SAAS,KAAA,CAAM,mBAAmB;cAE7C,MAAI,KAAA,CAAA,0BAAA,SAAA,KAAA,CAAA,mBAAA,oBAAA,KAAA,CAAA,cAAA"}
1
+ {"version":3,"file":"index.d.mts","names":[],"sources":["../src/body.tsx"],"sourcesContent":[],"mappings":";;;KAGY,SAAA,GAAY,SAAS,KAAA,CAAM,mBAAmB;cAE7C,MAAI,KAAA,CAAA,0BAAA,SAAA,KAAA,CAAA,mBAAA,oBAAA,KAAA,CAAA,cAAA"}
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","names":[],"sources":["../src/body.tsx"],"sourcesContent":[],"mappings":";;;KAEY,SAAA,GAAY,SAAS,KAAA,CAAM,mBAAmB;cAE7C,MAAI,KAAA,CAAA,0BAAA,SAAA,KAAA,CAAA,mBAAA,oBAAA,KAAA,CAAA,cAAA"}
1
+ {"version":3,"file":"index.d.ts","names":[],"sources":["../src/body.tsx"],"sourcesContent":[],"mappings":";;;KAGY,SAAA,GAAY,SAAS,KAAA,CAAM,mBAAmB;cAE7C,MAAI,KAAA,CAAA,0BAAA,SAAA,KAAA,CAAA,mBAAA,oBAAA,KAAA,CAAA,cAAA"}
package/dist/index.js CHANGED
@@ -26,14 +26,32 @@ react = __toESM(react);
26
26
  let react_jsx_runtime = require("react/jsx-runtime");
27
27
  react_jsx_runtime = __toESM(react_jsx_runtime);
28
28
 
29
+ //#region src/margin-properties.ts
30
+ const marginProperties = [
31
+ "margin",
32
+ "marginTop",
33
+ "marginBottom",
34
+ "marginRight",
35
+ "marginLeft",
36
+ "marginInline",
37
+ "marginBlock",
38
+ "marginBlockStart",
39
+ "marginBlockEnd",
40
+ "marginInlineStart",
41
+ "marginInlineEnd"
42
+ ];
43
+
44
+ //#endregion
29
45
  //#region src/body.tsx
30
46
  const Body = react.forwardRef(({ children, style,...props }, ref) => {
47
+ const bodyStyle = {
48
+ background: style?.background,
49
+ backgroundColor: style?.backgroundColor
50
+ };
51
+ if (style) for (const property of marginProperties) bodyStyle[property] = style[property] !== void 0 ? 0 : void 0;
31
52
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("body", {
32
53
  ...props,
33
- style: {
34
- background: style?.background,
35
- backgroundColor: style?.backgroundColor
36
- },
54
+ style: bodyStyle,
37
55
  ref,
38
56
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
39
57
  border: 0,
@@ -50,7 +68,6 @@ const Body = react.forwardRef(({ children, style,...props }, ref) => {
50
68
  });
51
69
  });
52
70
  Body.displayName = "Body";
53
- Body.tailwindTreatAsElement = true;
54
71
 
55
72
  //#endregion
56
73
  exports.Body = Body;
package/dist/index.mjs CHANGED
@@ -1,14 +1,32 @@
1
1
  import * as React from "react";
2
2
  import { jsx } from "react/jsx-runtime";
3
3
 
4
+ //#region src/margin-properties.ts
5
+ const marginProperties = [
6
+ "margin",
7
+ "marginTop",
8
+ "marginBottom",
9
+ "marginRight",
10
+ "marginLeft",
11
+ "marginInline",
12
+ "marginBlock",
13
+ "marginBlockStart",
14
+ "marginBlockEnd",
15
+ "marginInlineStart",
16
+ "marginInlineEnd"
17
+ ];
18
+
19
+ //#endregion
4
20
  //#region src/body.tsx
5
21
  const Body = React.forwardRef(({ children, style,...props }, ref) => {
22
+ const bodyStyle = {
23
+ background: style?.background,
24
+ backgroundColor: style?.backgroundColor
25
+ };
26
+ if (style) for (const property of marginProperties) bodyStyle[property] = style[property] !== void 0 ? 0 : void 0;
6
27
  return /* @__PURE__ */ jsx("body", {
7
28
  ...props,
8
- style: {
9
- background: style?.background,
10
- backgroundColor: style?.backgroundColor
11
- },
29
+ style: bodyStyle,
12
30
  ref,
13
31
  children: /* @__PURE__ */ jsx("table", {
14
32
  border: 0,
@@ -25,7 +43,6 @@ const Body = React.forwardRef(({ children, style,...props }, ref) => {
25
43
  });
26
44
  });
27
45
  Body.displayName = "Body";
28
- Body.tailwindTreatAsElement = true;
29
46
 
30
47
  //#endregion
31
48
  export { Body };
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../src/body.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type BodyProps = Readonly<React.HtmlHTMLAttributes<HTMLBodyElement>>;\n\nexport const Body = React.forwardRef<HTMLBodyElement, BodyProps>(\n ({ children, style, ...props }, ref) => {\n return (\n <body\n {...props}\n style={{\n background: style?.background,\n backgroundColor: style?.backgroundColor,\n }}\n ref={ref}\n >\n <table\n border={0}\n width=\"100%\"\n cellPadding=\"0\"\n cellSpacing=\"0\"\n role=\"presentation\"\n align=\"center\"\n >\n <tbody>\n <tr>\n {/*\n Yahoo and AOL remove all styles of the body element while converting it to a div,\n so we need to apply them to to an inner cell.\n\n See https://github.com/resend/react-email/issues/662.\n */}\n <td style={style}>{children}</td>\n </tr>\n </tbody>\n </table>\n </body>\n );\n },\n);\n\nBody.displayName = 'Body';\n(Body as any).tailwindTreatAsElement = true;\n"],"mappings":";;;;AAIA,MAAa,OAAO,MAAM,YACvB,EAAE,UAAU,MAAO,GAAG,SAAS,QAAQ;AACtC,QACE,oBAAC;EACC,GAAI;EACJ,OAAO;GACL,YAAY,OAAO;GACnB,iBAAiB,OAAO;GACzB;EACI;YAEL,oBAAC;GACC,QAAQ;GACR,OAAM;GACN,aAAY;GACZ,aAAY;GACZ,MAAK;GACL,OAAM;aAEN,oBAAC,qBACC,oBAAC,kBAOC,oBAAC;IAAU;IAAQ;KAAc,GAC9B,GACC;IACF;GACH;EAGZ;AAED,KAAK,cAAc;AACnB,AAAC,KAAa,yBAAyB"}
1
+ {"version":3,"file":"index.mjs","names":["marginProperties: (keyof React.CSSProperties)[]","bodyStyle: Record<string, string | number | undefined>"],"sources":["../src/margin-properties.ts","../src/body.tsx"],"sourcesContent":["export const marginProperties: (keyof React.CSSProperties)[] = [\n 'margin',\n 'marginTop',\n 'marginBottom',\n 'marginRight',\n 'marginLeft',\n 'marginInline',\n 'marginBlock',\n 'marginBlockStart',\n 'marginBlockEnd',\n 'marginInlineStart',\n 'marginInlineEnd',\n];\n","import * as React from 'react';\nimport { marginProperties } from './margin-properties';\n\nexport type BodyProps = Readonly<React.HtmlHTMLAttributes<HTMLBodyElement>>;\n\nexport const Body = React.forwardRef<HTMLBodyElement, BodyProps>(\n ({ children, style, ...props }, ref) => {\n const bodyStyle: Record<string, string | number | undefined> = {\n background: style?.background,\n backgroundColor: style?.backgroundColor,\n };\n if (style) {\n for (const property of marginProperties) {\n // We reset the margin if the user sets it, this mimics the\n // same behavior that would happen if this was only using the body.\n // This avoids the incoming margin summing up with the margin\n // defined by the email client on the body, or by the browser itself\n bodyStyle[property] = style[property] !== undefined ? 0 : undefined;\n }\n }\n return (\n <body {...props} style={bodyStyle} ref={ref}>\n <table\n border={0}\n width=\"100%\"\n cellPadding=\"0\"\n cellSpacing=\"0\"\n role=\"presentation\"\n align=\"center\"\n >\n <tbody>\n <tr>\n {/*\n Yahoo and AOL remove all styles of the body element while converting it to a div,\n so we need to apply them to to an inner cell.\n\n See https://github.com/resend/react-email/issues/662.\n */}\n <td style={style}>{children}</td>\n </tr>\n </tbody>\n </table>\n </body>\n );\n },\n);\n\nBody.displayName = 'Body';\n"],"mappings":";;;;AAAA,MAAaA,mBAAkD;CAC7D;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;ACPD,MAAa,OAAO,MAAM,YACvB,EAAE,UAAU,MAAO,GAAG,SAAS,QAAQ;CACtC,MAAMC,YAAyD;EAC7D,YAAY,OAAO;EACnB,iBAAiB,OAAO;EACzB;AACD,KAAI,MACF,MAAK,MAAM,YAAY,iBAKrB,WAAU,YAAY,MAAM,cAAc,SAAY,IAAI;AAG9D,QACE,oBAAC;EAAK,GAAI;EAAO,OAAO;EAAgB;YACtC,oBAAC;GACC,QAAQ;GACR,OAAM;GACN,aAAY;GACZ,aAAY;GACZ,MAAK;GACL,OAAM;aAEN,oBAAC,qBACC,oBAAC,kBAOC,oBAAC;IAAU;IAAQ;KAAc,GAC9B,GACC;IACF;GACH;EAGZ;AAED,KAAK,cAAc"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-email/body",
3
- "version": "0.1.1-tailwindv4.0",
3
+ "version": "0.2.0",
4
4
  "description": "A React body component to wrap emails",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/index.js",
@@ -27,7 +27,7 @@
27
27
  },
28
28
  "devDependencies": {
29
29
  "typescript": "5.8.3",
30
- "@react-email/render": "1.3.1",
30
+ "@react-email/render": "2.0.0",
31
31
  "tsconfig": "0.0.0"
32
32
  },
33
33
  "publishConfig": {