@react-email/tailwind 0.0.8 → 0.0.9

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 (5) hide show
  1. package/dist/index.d.mts +10 -0
  2. package/dist/index.js +46 -19
  3. package/dist/index.mjs +50 -20
  4. package/package.json +25 -12
  5. package/readme.md +1 -1
package/dist/index.d.mts ADDED
@@ -0,0 +1,10 @@
1
+ import * as React from 'react';
2
+ import { TailwindConfig } from 'tw-to-css';
3
+
4
+ interface TailwindProps {
5
+ children: React.ReactNode;
6
+ config?: TailwindConfig;
7
+ }
8
+ declare const Tailwind: React.FC<TailwindProps>;
9
+
10
+ export { Tailwind, TailwindProps };
package/dist/index.js CHANGED
@@ -1,10 +1,27 @@
1
1
  "use strict";
2
2
  var __create = Object.create;
3
3
  var __defProp = Object.defineProperty;
4
+ var __defProps = Object.defineProperties;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5
7
  var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
9
  var __getProtoOf = Object.getPrototypeOf;
7
10
  var __hasOwnProp = Object.prototype.hasOwnProperty;
11
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
+ var __spreadValues = (a, b) => {
14
+ for (var prop in b || (b = {}))
15
+ if (__hasOwnProp.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ if (__getOwnPropSymbols)
18
+ for (var prop of __getOwnPropSymbols(b)) {
19
+ if (__propIsEnum.call(b, prop))
20
+ __defNormalProp(a, prop, b[prop]);
21
+ }
22
+ return a;
23
+ };
24
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
8
25
  var __export = (target, all) => {
9
26
  for (var name in all)
10
27
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -18,6 +35,10 @@ var __copyProps = (to, from, except, desc) => {
18
35
  return to;
19
36
  };
20
37
  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
38
+ // If the importer is in node compatibility mode or this is not an ESM
39
+ // file that has been converted to a CommonJS file using a Babel-
40
+ // compatible transform (i.e. "__esModule" has not been set), then set
41
+ // "default" to the CommonJS "module.exports" for node compatibility.
21
42
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
43
  mod
23
44
  ));
@@ -49,7 +70,7 @@ var Tailwind = ({ children, config }) => {
49
70
  const css = cleanCss(tailwindCss);
50
71
  const cssMap = makeCssMap(css);
51
72
  const headStyle = getMediaQueryCss(css);
52
- const hasResponsiveStyles = /@media[^{]+\{(?<content>[\s\S]+?)\}\s*\}/gm.test(
73
+ const hasResponsiveStyles = new RegExp("@media[^{]+\\{(?<content>[\\s\\S]+?)\\}\\s*\\}", "gm").test(
53
74
  headStyle
54
75
  );
55
76
  const hasHTML = /<html[^>]*>/gm.test(fullHTML);
@@ -71,10 +92,10 @@ var Tailwind = ({ children, config }) => {
71
92
  let newDomNode = null;
72
93
  if (domNode.children) {
73
94
  const props = (0, import_html_react_parser.attributesToProps)(domNode.attribs);
74
- newDomNode = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("head", { ...props, children: [
95
+ newDomNode = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("head", __spreadProps(__spreadValues({}, props), { children: [
75
96
  (0, import_html_react_parser.domToReact)(domNode.children),
76
97
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: headStyle })
77
- ] });
98
+ ] }));
78
99
  }
79
100
  return newDomNode;
80
101
  }
@@ -86,7 +107,10 @@ var Tailwind = ({ children, config }) => {
86
107
  return cssMap[`.${className}`];
87
108
  }).join(";");
88
109
  domNode.attribs.style = `${currentStyles} ${tailwindStyles}`;
89
- domNode.attribs.class = domNode.attribs.class.split(" ").filter((className) => className.search(/^.{2}:/) !== -1).join(" ").replace(cleanRegex, "_");
110
+ domNode.attribs.class = domNode.attribs.class.split(" ").filter((className) => {
111
+ const cleanedClassName = className.replace(cleanRegex, "_");
112
+ return className.search(/^.{2}:/) !== -1 || !cssMap[`.${cleanedClassName}`];
113
+ }).join(" ").replace(cleanRegex, "_");
90
114
  if (domNode.attribs.class === "")
91
115
  delete domNode.attribs.class;
92
116
  }
@@ -100,21 +124,21 @@ var Tailwind = ({ children, config }) => {
100
124
  Tailwind.displayName = "Tailwind";
101
125
  function cleanCss(css) {
102
126
  let newCss = css.replace(/\\/g, "").replace(/[.\!\#\w\d\\:\-\[\]\/\.%\(\))]+(?=\s*?{[^{]*?\})\s*?{/g, (m) => {
103
- return m.replace(/(?<=.)[:#\!\-[\\\]\/\.%]+/g, "_");
104
- }).replace(/font-family(?<value>[^;\r\n]+)/g, (m, value) => {
127
+ return m.replace(new RegExp("(?<=.)[:#\\!\\-[\\\\\\]\\/\\.%]+", "g"), "_");
128
+ }).replace(new RegExp("font-family(?<value>[^;\\r\\n]+)", "g"), (m, value) => {
105
129
  return `font-family${value.replace(/['"]+/g, "")}`;
106
130
  });
107
131
  return newCss;
108
132
  }
109
133
  function getMediaQueryCss(css) {
110
- var _a;
111
- const mediaQueryRegex = /@media[^{]+\{(?<content>[\s\S]+?)\}\s*\}/gm;
112
- return ((_a = css.replace(mediaQueryRegex, (m) => {
134
+ var _a, _b;
135
+ const mediaQueryRegex = new RegExp("@media[^{]+\\{(?<content>[\\s\\S]+?)\\}\\s*\\}", "gm");
136
+ return (_b = (_a = css.replace(mediaQueryRegex, (m) => {
113
137
  return m.replace(
114
138
  /([^{]+\{)([\s\S]+?)(\}\s*\})/gm,
115
139
  (_, start, content, end) => {
116
140
  const newContent = content.replace(
117
- /(?:[\s\r\n]*)?(?<prop>[\w-]+)\s*:\s*(?<value>[^};\r\n]+)/gm,
141
+ new RegExp("(?:[\\s\\r\\n]*)?(?<prop>[\\w-]+)\\s*:\\s*(?<value>[^};\\r\\n]+)", "gm"),
118
142
  (_2, prop, value) => {
119
143
  return `${prop}: ${value} !important;`;
120
144
  }
@@ -122,20 +146,23 @@ function getMediaQueryCss(css) {
122
146
  return `${start}${newContent}${end}`;
123
147
  }
124
148
  );
125
- }).match(/@media\s*([^{]+)\{([^{}]*\{[^{}]*\})*[^{}]*\}/g)) == null ? void 0 : _a.join("")) ?? "";
149
+ }).match(/@media\s*([^{]+)\{([^{}]*\{[^{}]*\})*[^{}]*\}/g)) == null ? void 0 : _a.join("")) != null ? _b : "";
126
150
  }
127
151
  function makeCssMap(css) {
128
152
  const cssNoMedia = css.replace(
129
- /@media[^{]+\{(?<content>[\s\S]+?)\}\s*\}/gm,
153
+ new RegExp("@media[^{]+\\{(?<content>[\\s\\S]+?)\\}\\s*\\}", "gm"),
130
154
  ""
131
155
  );
132
- const cssMap = cssNoMedia.split("}").reduce((acc, cur) => {
133
- const [key, value] = cur.split("{");
134
- if (key && value) {
135
- acc[key] = value;
136
- }
137
- return acc;
138
- }, {});
156
+ const cssMap = cssNoMedia.split("}").reduce(
157
+ (acc, cur) => {
158
+ const [key, value] = cur.split("{");
159
+ if (key && value) {
160
+ acc[key] = value;
161
+ }
162
+ return acc;
163
+ },
164
+ {}
165
+ );
139
166
  return cssMap;
140
167
  }
141
168
  // Annotate the CommonJS export names for ESM import in node:
package/dist/index.mjs CHANGED
@@ -1,7 +1,31 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+
1
21
  // src/tailwind.tsx
2
22
  import * as React from "react";
3
23
  import { renderToStaticMarkup } from "react-dom/server";
4
- import htmlParser, { attributesToProps, domToReact, Element } from "html-react-parser";
24
+ import htmlParser, {
25
+ attributesToProps,
26
+ domToReact,
27
+ Element
28
+ } from "html-react-parser";
5
29
  import { tailwindToCSS } from "tw-to-css";
6
30
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
7
31
  var Tailwind = ({ children, config }) => {
@@ -17,7 +41,7 @@ var Tailwind = ({ children, config }) => {
17
41
  const css = cleanCss(tailwindCss);
18
42
  const cssMap = makeCssMap(css);
19
43
  const headStyle = getMediaQueryCss(css);
20
- const hasResponsiveStyles = /@media[^{]+\{(?<content>[\s\S]+?)\}\s*\}/gm.test(
44
+ const hasResponsiveStyles = new RegExp("@media[^{]+\\{(?<content>[\\s\\S]+?)\\}\\s*\\}", "gm").test(
21
45
  headStyle
22
46
  );
23
47
  const hasHTML = /<html[^>]*>/gm.test(fullHTML);
@@ -39,10 +63,10 @@ var Tailwind = ({ children, config }) => {
39
63
  let newDomNode = null;
40
64
  if (domNode.children) {
41
65
  const props = attributesToProps(domNode.attribs);
42
- newDomNode = /* @__PURE__ */ jsxs("head", { ...props, children: [
66
+ newDomNode = /* @__PURE__ */ jsxs("head", __spreadProps(__spreadValues({}, props), { children: [
43
67
  domToReact(domNode.children),
44
68
  /* @__PURE__ */ jsx("style", { children: headStyle })
45
- ] });
69
+ ] }));
46
70
  }
47
71
  return newDomNode;
48
72
  }
@@ -54,7 +78,10 @@ var Tailwind = ({ children, config }) => {
54
78
  return cssMap[`.${className}`];
55
79
  }).join(";");
56
80
  domNode.attribs.style = `${currentStyles} ${tailwindStyles}`;
57
- domNode.attribs.class = domNode.attribs.class.split(" ").filter((className) => className.search(/^.{2}:/) !== -1).join(" ").replace(cleanRegex, "_");
81
+ domNode.attribs.class = domNode.attribs.class.split(" ").filter((className) => {
82
+ const cleanedClassName = className.replace(cleanRegex, "_");
83
+ return className.search(/^.{2}:/) !== -1 || !cssMap[`.${cleanedClassName}`];
84
+ }).join(" ").replace(cleanRegex, "_");
58
85
  if (domNode.attribs.class === "")
59
86
  delete domNode.attribs.class;
60
87
  }
@@ -68,21 +95,21 @@ var Tailwind = ({ children, config }) => {
68
95
  Tailwind.displayName = "Tailwind";
69
96
  function cleanCss(css) {
70
97
  let newCss = css.replace(/\\/g, "").replace(/[.\!\#\w\d\\:\-\[\]\/\.%\(\))]+(?=\s*?{[^{]*?\})\s*?{/g, (m) => {
71
- return m.replace(/(?<=.)[:#\!\-[\\\]\/\.%]+/g, "_");
72
- }).replace(/font-family(?<value>[^;\r\n]+)/g, (m, value) => {
98
+ return m.replace(new RegExp("(?<=.)[:#\\!\\-[\\\\\\]\\/\\.%]+", "g"), "_");
99
+ }).replace(new RegExp("font-family(?<value>[^;\\r\\n]+)", "g"), (m, value) => {
73
100
  return `font-family${value.replace(/['"]+/g, "")}`;
74
101
  });
75
102
  return newCss;
76
103
  }
77
104
  function getMediaQueryCss(css) {
78
- var _a;
79
- const mediaQueryRegex = /@media[^{]+\{(?<content>[\s\S]+?)\}\s*\}/gm;
80
- return ((_a = css.replace(mediaQueryRegex, (m) => {
105
+ var _a, _b;
106
+ const mediaQueryRegex = new RegExp("@media[^{]+\\{(?<content>[\\s\\S]+?)\\}\\s*\\}", "gm");
107
+ return (_b = (_a = css.replace(mediaQueryRegex, (m) => {
81
108
  return m.replace(
82
109
  /([^{]+\{)([\s\S]+?)(\}\s*\})/gm,
83
110
  (_, start, content, end) => {
84
111
  const newContent = content.replace(
85
- /(?:[\s\r\n]*)?(?<prop>[\w-]+)\s*:\s*(?<value>[^};\r\n]+)/gm,
112
+ new RegExp("(?:[\\s\\r\\n]*)?(?<prop>[\\w-]+)\\s*:\\s*(?<value>[^};\\r\\n]+)", "gm"),
86
113
  (_2, prop, value) => {
87
114
  return `${prop}: ${value} !important;`;
88
115
  }
@@ -90,20 +117,23 @@ function getMediaQueryCss(css) {
90
117
  return `${start}${newContent}${end}`;
91
118
  }
92
119
  );
93
- }).match(/@media\s*([^{]+)\{([^{}]*\{[^{}]*\})*[^{}]*\}/g)) == null ? void 0 : _a.join("")) ?? "";
120
+ }).match(/@media\s*([^{]+)\{([^{}]*\{[^{}]*\})*[^{}]*\}/g)) == null ? void 0 : _a.join("")) != null ? _b : "";
94
121
  }
95
122
  function makeCssMap(css) {
96
123
  const cssNoMedia = css.replace(
97
- /@media[^{]+\{(?<content>[\s\S]+?)\}\s*\}/gm,
124
+ new RegExp("@media[^{]+\\{(?<content>[\\s\\S]+?)\\}\\s*\\}", "gm"),
98
125
  ""
99
126
  );
100
- const cssMap = cssNoMedia.split("}").reduce((acc, cur) => {
101
- const [key, value] = cur.split("{");
102
- if (key && value) {
103
- acc[key] = value;
104
- }
105
- return acc;
106
- }, {});
127
+ const cssMap = cssNoMedia.split("}").reduce(
128
+ (acc, cur) => {
129
+ const [key, value] = cur.split("{");
130
+ if (key && value) {
131
+ acc[key] = value;
132
+ }
133
+ return acc;
134
+ },
135
+ {}
136
+ );
107
137
  return cssMap;
108
138
  }
109
139
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-email/tailwind",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "description": "A React component to wrap emails with Tailwind CSS",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/index.js",
@@ -9,6 +9,18 @@
9
9
  "files": [
10
10
  "dist/**"
11
11
  ],
12
+ "exports": {
13
+ ".": {
14
+ "import": {
15
+ "types": "./dist/index.d.ts",
16
+ "default": "./dist/index.mjs"
17
+ },
18
+ "require": {
19
+ "types": "./dist/index.d.ts",
20
+ "default": "./dist/index.js"
21
+ }
22
+ }
23
+ },
12
24
  "license": "MIT",
13
25
  "scripts": {
14
26
  "build": "tsup src/index.ts --format esm,cjs --dts --external react",
@@ -22,7 +34,7 @@
22
34
  },
23
35
  "repository": {
24
36
  "type": "git",
25
- "url": "https://github.com/zenorocha/react-email.git",
37
+ "url": "https://github.com/resendlabs/react-email.git",
26
38
  "directory": "packages/tailwind"
27
39
  },
28
40
  "keywords": [
@@ -34,26 +46,27 @@
34
46
  "node": ">=16.0.0"
35
47
  },
36
48
  "dependencies": {
37
- "html-react-parser": "3.0.9",
49
+ "html-react-parser": "4.0.0",
38
50
  "react": "18.2.0",
39
51
  "react-dom": "18.2.0",
40
52
  "tw-to-css": "0.0.11"
41
53
  },
42
54
  "devDependencies": {
43
- "@babel/preset-react": "7.18.6",
55
+ "@babel/core": "^7.21.8",
56
+ "@babel/preset-react": "7.22.5",
44
57
  "@react-email/button": "0.0.7",
45
58
  "@testing-library/react": "14.0.0",
46
- "@types/jest": "29.5.0",
59
+ "@types/jest": "29.5.3",
47
60
  "@types/react": "18.0.20",
48
61
  "@types/react-dom": "18.0.6",
49
- "babel-jest": "29.5.0",
50
- "eslint": "8.23.1",
51
- "jest": "29.5.0",
52
- "prettier": "2.8.4",
62
+ "babel-jest": "29.6.1",
63
+ "eslint": "8.45.0",
64
+ "jest": "29.6.1",
65
+ "prettier": "3.0.0",
53
66
  "react": "18.2.0",
54
- "ts-jest": "29.0.5",
55
- "tsup": "6.2.3",
56
- "typescript": "4.8.3"
67
+ "ts-jest": "29.1.1",
68
+ "tsup": "7.1.0",
69
+ "typescript": "5.1.6"
57
70
  },
58
71
  "publishConfig": {
59
72
  "access": "public"
package/readme.md CHANGED
@@ -65,7 +65,7 @@ This component was tested using the most popular email clients.
65
65
 
66
66
  | <img src="https://react.email/static/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
67
67
  | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
68
- | Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ | HEY ✔ | Superhuman ✔ |
68
+ | Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ | HEY ✔ | Superhuman ✔ |
69
69
 
70
70
  ## License
71
71