@react-email/tailwind 0.0.11 → 0.0.13-canary.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 (3) hide show
  1. package/dist/index.js +21 -14
  2. package/dist/index.mjs +21 -14
  3. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -113,22 +113,29 @@ var cssToJsxStyle = (cssText) => splitDeclarations(cssText).map(splitDeclaration
113
113
  var import_jsx_runtime = require("react/jsx-runtime");
114
114
  function processElement(element, headStyles, twi) {
115
115
  let modifiedElement = element;
116
- if (modifiedElement.props.className) {
116
+ const propsClassName = modifiedElement.props.className;
117
+ if (typeof propsClassName === "string") {
117
118
  const convertedStyles = [];
118
- const responsiveStyles = [];
119
- const classNames = modifiedElement.props.className.split(" ");
120
- const customClassNames = classNames.filter((className) => {
121
- const tailwindClassName = twi(className, { ignoreMediaQueries: true });
122
- if (tailwindClassName) {
123
- convertedStyles.push(tailwindClassName);
124
- return false;
125
- } else if (twi(className, { ignoreMediaQueries: false })) {
126
- responsiveStyles.push(className);
127
- return false;
119
+ const responsiveClassNames = [];
120
+ const customClassNames = [];
121
+ const allClassNames = propsClassName.split(" ");
122
+ allClassNames.forEach((className) => {
123
+ const stylesWithoutMediaQueries = twi(className, {
124
+ ignoreMediaQueries: true
125
+ });
126
+ if (stylesWithoutMediaQueries.length > 0) {
127
+ convertedStyles.push(stylesWithoutMediaQueries);
128
+ } else if (twi(className, { ignoreMediaQueries: false }).length > 0) {
129
+ const classPieces = className.split(":");
130
+ const mediaQueryParts = classPieces.slice(0, -1);
131
+ const twClass = classPieces[classPieces.length - 1];
132
+ const importantPrefixedClassName = twClass.startsWith("!") ? className : `${mediaQueryParts.join(":")}:!${twClass}`;
133
+ responsiveClassNames.push(importantPrefixedClassName);
134
+ } else {
135
+ customClassNames.push(className);
128
136
  }
129
- return true;
130
137
  });
131
- const convertedResponsiveStyles = twi(responsiveStyles, {
138
+ const convertedResponsiveStyles = twi(responsiveClassNames, {
132
139
  ignoreMediaQueries: false,
133
140
  merge: false
134
141
  });
@@ -136,7 +143,7 @@ function processElement(element, headStyles, twi) {
136
143
  convertedResponsiveStyles.replace(/^\n+/, "").replace(/\n+$/, "")
137
144
  );
138
145
  modifiedElement = React.cloneElement(modifiedElement, __spreadProps(__spreadValues({}, modifiedElement.props), {
139
- className: customClassNames.length ? customClassNames.join(" ") : void 0,
146
+ className: customClassNames.length > 0 || responsiveClassNames.length > 0 ? customClassNames.concat(responsiveClassNames).join(" ") : void 0,
140
147
  style: __spreadValues(__spreadValues({}, modifiedElement.props.style), cssToJsxStyle(convertedStyles.join(" ")))
141
148
  }));
142
149
  }
package/dist/index.mjs CHANGED
@@ -80,22 +80,29 @@ var cssToJsxStyle = (cssText) => splitDeclarations(cssText).map(splitDeclaration
80
80
  import { Fragment, jsx } from "react/jsx-runtime";
81
81
  function processElement(element, headStyles, twi) {
82
82
  let modifiedElement = element;
83
- if (modifiedElement.props.className) {
83
+ const propsClassName = modifiedElement.props.className;
84
+ if (typeof propsClassName === "string") {
84
85
  const convertedStyles = [];
85
- const responsiveStyles = [];
86
- const classNames = modifiedElement.props.className.split(" ");
87
- const customClassNames = classNames.filter((className) => {
88
- const tailwindClassName = twi(className, { ignoreMediaQueries: true });
89
- if (tailwindClassName) {
90
- convertedStyles.push(tailwindClassName);
91
- return false;
92
- } else if (twi(className, { ignoreMediaQueries: false })) {
93
- responsiveStyles.push(className);
94
- return false;
86
+ const responsiveClassNames = [];
87
+ const customClassNames = [];
88
+ const allClassNames = propsClassName.split(" ");
89
+ allClassNames.forEach((className) => {
90
+ const stylesWithoutMediaQueries = twi(className, {
91
+ ignoreMediaQueries: true
92
+ });
93
+ if (stylesWithoutMediaQueries.length > 0) {
94
+ convertedStyles.push(stylesWithoutMediaQueries);
95
+ } else if (twi(className, { ignoreMediaQueries: false }).length > 0) {
96
+ const classPieces = className.split(":");
97
+ const mediaQueryParts = classPieces.slice(0, -1);
98
+ const twClass = classPieces[classPieces.length - 1];
99
+ const importantPrefixedClassName = twClass.startsWith("!") ? className : `${mediaQueryParts.join(":")}:!${twClass}`;
100
+ responsiveClassNames.push(importantPrefixedClassName);
101
+ } else {
102
+ customClassNames.push(className);
95
103
  }
96
- return true;
97
104
  });
98
- const convertedResponsiveStyles = twi(responsiveStyles, {
105
+ const convertedResponsiveStyles = twi(responsiveClassNames, {
99
106
  ignoreMediaQueries: false,
100
107
  merge: false
101
108
  });
@@ -103,7 +110,7 @@ function processElement(element, headStyles, twi) {
103
110
  convertedResponsiveStyles.replace(/^\n+/, "").replace(/\n+$/, "")
104
111
  );
105
112
  modifiedElement = React.cloneElement(modifiedElement, __spreadProps(__spreadValues({}, modifiedElement.props), {
106
- className: customClassNames.length ? customClassNames.join(" ") : void 0,
113
+ className: customClassNames.length > 0 || responsiveClassNames.length > 0 ? customClassNames.concat(responsiveClassNames).join(" ") : void 0,
107
114
  style: __spreadValues(__spreadValues({}, modifiedElement.props.style), cssToJsxStyle(convertedStyles.join(" ")))
108
115
  }));
109
116
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-email/tailwind",
3
- "version": "0.0.11",
3
+ "version": "0.0.13-canary.0",
4
4
  "description": "A React component to wrap emails with Tailwind CSS",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/index.js",
@@ -46,7 +46,7 @@
46
46
  "dependencies": {
47
47
  "react": "18.2.0",
48
48
  "react-dom": "18.2.0",
49
- "tw-to-css": "0.0.11"
49
+ "tw-to-css": "0.0.12"
50
50
  },
51
51
  "peerDependencies": {
52
52
  "react": "18.2.0"