@react-email/tailwind 2.0.0-canary.0 → 2.0.0-canary.1

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as React$1 from "react";
 import { Config } from "tailwindcss";
+import { StyleSheet } from "css-tree";
 
 //#region src/tailwind.d.ts
 type TailwindConfig = Omit<Config, 'content'>;
@@ -13,10 +14,19 @@ interface EmailElementProps {
   style?: React$1.CSSProperties;
 }
 declare const pixelBasedPreset: TailwindConfig;
+declare function sanitizeStyleSheet(styleSheet: StyleSheet): void;
+declare function inlineStyles(styleSheet: StyleSheet, classes: string[]): Record<string, string>;
 declare function Tailwind({
   children,
   config
 }: TailwindProps): React$1.ReactNode;
 //#endregion
-export { EmailElementProps, Tailwind, TailwindConfig, TailwindProps, pixelBasedPreset };
+//#region src/utils/tailwindcss/setup-tailwind.d.ts
+type TailwindSetup = Awaited<ReturnType<typeof setupTailwind>>;
+declare function setupTailwind(config: TailwindConfig): Promise<{
+  addUtilities: (candidates: string[]) => void;
+  getStyleSheet: () => StyleSheet;
+}>;
+//#endregion
+export { EmailElementProps, Tailwind, TailwindConfig, TailwindProps, TailwindSetup, inlineStyles, pixelBasedPreset, sanitizeStyleSheet, setupTailwind };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/tailwind.tsx"],"sourcesContent":[],"mappings":";;;;KAcY,cAAA,GAAiB,KAAK;UAEjB,aAAA;EAFL,QAAA,EAGA,OAAA,CAAM,SAHQ;EAAA,MAAA,CAAA,EAIf,cAJe;;AAAG,UAOZ,iBAAA,CAPY;EAAI,QAAA,CAAA,EAQpB,OAAA,CAAM,SARc;EAEhB,SAAA,CAAA,EAAA,MAAa;EAAA,KAAA,CAAA,EAQpB,OAAA,CAAM,aARc;;AAEnB,cASE,gBATF,EASoB,cATpB;AAAc,iBAoET,QAAA,CApES;EAAA,QAAA;EAAA;AAAA,CAAA,EAoEsB,aApEtB,CAAA,EAoEmC,OAAA,CAAA,SApEnC"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/tailwind.tsx","../src/utils/tailwindcss/setup-tailwind.ts"],"sourcesContent":[],"mappings":";;;;;KAqBY,cAAA,GAAiB,KAAK;UAEjB,aAAA;EAFL,QAAA,EAGA,OAAA,CAAM,SAHQ;EAAA,MAAA,CAAA,EAIf,cAJe;;AAAG,UAOZ,iBAAA,CAPY;EAAI,QAAA,CAAA,EAQpB,OAAA,CAAM,SARc;EAEhB,SAAA,CAAA,EAAA,MAAa;EAAA,KAAA,CAAA,EAQpB,OAAA,CAAM,aARc;;AAEnB,cASE,gBATF,EASoB,cATpB;AAAc,iBAoET,kBAAA,CApES,UAAA,EAoEsB,UApEtB,CAAA,EAAA,IAAA;AAGR,iBAuED,YAAA,CAvEkB,UAAA,EAwEpB,UAxEoB,EAAA,OAAA,EAAA,MAAA,EAAA,CAAA,EA0E/B,MA1E+B,CAAA,MAAA,EAAA,MAAA,CAAA;AAAA,iBAwFlB,QAAA,CAxFkB;EAAA,QAAA;EAAA;AAAA,CAAA,EAwFa,aAxFb,CAAA,EAwF0B,OAAA,CAAA,SAxF1B;;;KCpBtB,aAAA,GAAgB,QAAQ,kBAAkB;iBAEhC,aAAA,SAAsB,iBAAc;;EDW9C,aAAA,EAAA,GAAc,GCyDC,UDzDD;CAAA,CAAA"}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { StyleSheet } from "css-tree";
 import * as React from "react";
 import { Config } from "tailwindcss";
 
@@ -13,10 +14,19 @@ interface EmailElementProps {
   style?: React.CSSProperties;
 }
 declare const pixelBasedPreset: TailwindConfig;
+declare function sanitizeStyleSheet(styleSheet: StyleSheet): void;
+declare function inlineStyles(styleSheet: StyleSheet, classes: string[]): Record<string, string>;
 declare function Tailwind({
   children,
   config
 }: TailwindProps): React.ReactNode;
 //#endregion
-export { EmailElementProps, Tailwind, TailwindConfig, TailwindProps, pixelBasedPreset };
+//#region src/utils/tailwindcss/setup-tailwind.d.ts
+type TailwindSetup = Awaited<ReturnType<typeof setupTailwind>>;
+declare function setupTailwind(config: TailwindConfig): Promise<{
+  addUtilities: (candidates: string[]) => void;
+  getStyleSheet: () => StyleSheet;
+}>;
+//#endregion
+export { EmailElementProps, Tailwind, TailwindConfig, TailwindProps, TailwindSetup, inlineStyles, pixelBasedPreset, sanitizeStyleSheet, setupTailwind };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/tailwind.tsx"],"sourcesContent":[],"mappings":";;;;KAcY,cAAA,GAAiB,KAAK;UAEjB,aAAA;EAFL,QAAA,EAGA,KAAA,CAAM,SAHQ;EAAA,MAAA,CAAA,EAIf,cAJe;;AAAG,UAOZ,iBAAA,CAPY;EAAI,QAAA,CAAA,EAQpB,KAAA,CAAM,SARc;EAEhB,SAAA,CAAA,EAAA,MAAa;EAAA,KAAA,CAAA,EAQpB,KAAA,CAAM,aARc;;AAEnB,cASE,gBATF,EASoB,cATpB;AAAc,iBAoET,QAAA,CApES;EAAA,QAAA;EAAA;AAAA,CAAA,EAoEsB,aApEtB,CAAA,EAoEmC,KAAA,CAAA,SApEnC"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/tailwind.tsx","../src/utils/tailwindcss/setup-tailwind.ts"],"sourcesContent":[],"mappings":";;;;;KAqBY,cAAA,GAAiB,KAAK;UAEjB,aAAA;EAFL,QAAA,EAGA,KAAA,CAAM,SAHQ;EAAA,MAAA,CAAA,EAIf,cAJe;;AAAG,UAOZ,iBAAA,CAPY;EAAI,QAAA,CAAA,EAQpB,KAAA,CAAM,SARc;EAEhB,SAAA,CAAA,EAAA,MAAa;EAAA,KAAA,CAAA,EAQpB,KAAA,CAAM,aARc;;AAEnB,cASE,gBATF,EASoB,cATpB;AAAc,iBAoET,kBAAA,CApES,UAAA,EAoEsB,UApEtB,CAAA,EAAA,IAAA;AAGR,iBAuED,YAAA,CAvEkB,UAAA,EAwEpB,UAxEoB,EAAA,OAAA,EAAA,MAAA,EAAA,CAAA,EA0E/B,MA1E+B,CAAA,MAAA,EAAA,MAAA,CAAA;AAAA,iBAwFlB,QAAA,CAxFkB;EAAA,QAAA;EAAA;AAAA,CAAA,EAwFa,aAxFb,CAAA,EAwF0B,KAAA,CAAA,SAxF1B;;;KCpBtB,aAAA,GAAgB,QAAQ,kBAAkB;iBAEhC,aAAA,SAAsB,iBAAc;;EDW9C,aAAA,EAAA,GAAc,GCyDC,UDzDD;CAAA,CAAA"}

package/dist/index.js

@@ -19121,6 +19121,74 @@ function getCustomProperties(node) {
 	return customProperties;
 }
 
+//#endregion
+//#region src/utils/text/from-dash-case-to-camel-case.ts
+const fromDashCaseToCamelCase = (text) => {
+	return text.replace(/-(\w|$)/g, (_, p1) => p1.toUpperCase());
+};
+
+//#endregion
+//#region src/utils/compatibility/get-react-property.ts
+function getReactProperty(prop) {
+	const modifiedProp = prop.toLowerCase();
+	if (modifiedProp.startsWith("--")) return modifiedProp;
+	if (modifiedProp.startsWith("-ms-")) return fromDashCaseToCamelCase(modifiedProp.slice(1));
+	return fromDashCaseToCamelCase(modifiedProp);
+}
+
+//#endregion
+//#region src/utils/css/unwrap-value.ts
+function unwrapValue(value) {
+	if (value.type === "Value" && value.children.size === 1) return value.children.first ?? value;
+	return value;
+}
+
+//#endregion
+//#region src/utils/css/make-inline-styles-for.ts
+function makeInlineStylesFor(inlinableRules, customProperties) {
+	const styles = {};
+	const localVariableDeclarations = /* @__PURE__ */ new Map();
+	for (const rule of inlinableRules) walk(rule, {
+		visit: "Declaration",
+		enter(declaration) {
+			if (declaration.property.startsWith("--")) localVariableDeclarations.set(declaration.property, declaration);
+		}
+	});
+	for (const rule of inlinableRules) {
+		walk(rule, {
+			visit: "Function",
+			enter(func, funcParentListItem) {
+				if (func.name === "var") {
+					let variableName;
+					walk(func, {
+						visit: "Identifier",
+						enter(identifier) {
+							variableName = identifier.name;
+							return this.break;
+						}
+					});
+					if (variableName) {
+						const definition = localVariableDeclarations.get(variableName);
+						if (definition) funcParentListItem.data = unwrapValue(definition.value);
+						else {
+							const customProperty = customProperties.get(variableName);
+							if (customProperty?.initialValue) funcParentListItem.data = unwrapValue(customProperty.initialValue.value);
+						}
+					}
+				}
+			}
+		});
+		walk(rule, {
+			visit: "Declaration",
+			enter(declaration) {
+				if (declaration.property.startsWith("--")) return;
+				styles[getReactProperty(declaration.property)] = generate(declaration.value) + (declaration.important ? "!important" : "");
+			}
+		});
+	}
+	return styles;
+}
+
 //#endregion
 //#region src/utils/css/resolve-all-css-variables.ts
 function doSelectorsIntersect(first, second) {
@@ -19690,74 +19758,6 @@ function mapReactTree(value, process) {
 	return mapped && mapped.length === 1 ? mapped[0] : mapped;
 }
 
-//#endregion
-//#region src/utils/text/from-dash-case-to-camel-case.ts
-const fromDashCaseToCamelCase = (text) => {
-	return text.replace(/-(\w|$)/g, (_, p1) => p1.toUpperCase());
-};
-
-//#endregion
-//#region src/utils/compatibility/get-react-property.ts
-function getReactProperty(prop) {
-	const modifiedProp = prop.toLowerCase();
-	if (modifiedProp.startsWith("--")) return modifiedProp;
-	if (modifiedProp.startsWith("-ms-")) return fromDashCaseToCamelCase(modifiedProp.slice(1));
-	return fromDashCaseToCamelCase(modifiedProp);
-}
-
-//#endregion
-//#region src/utils/css/unwrap-value.ts
-function unwrapValue(value) {
-	if (value.type === "Value" && value.children.size === 1) return value.children.first ?? value;
-	return value;
-}
-
-//#endregion
-//#region src/utils/css/make-inline-styles-for.ts
-function makeInlineStylesFor(inlinableRules, customProperties) {
-	const styles = {};
-	const localVariableDeclarations = /* @__PURE__ */ new Map();
-	for (const rule of inlinableRules) walk(rule, {
-		visit: "Declaration",
-		enter(declaration) {
-			if (declaration.property.startsWith("--")) localVariableDeclarations.set(declaration.property, declaration);
-		}
-	});
-	for (const rule of inlinableRules) {
-		walk(rule, {
-			visit: "Function",
-			enter(func, funcParentListItem) {
-				if (func.name === "var") {
-					let variableName;
-					walk(func, {
-						visit: "Identifier",
-						enter(identifier) {
-							variableName = identifier.name;
-							return this.break;
-						}
-					});
-					if (variableName) {
-						const definition = localVariableDeclarations.get(variableName);
-						if (definition) funcParentListItem.data = unwrapValue(definition.value);
-						else {
-							const customProperty = customProperties.get(variableName);
-							if (customProperty?.initialValue) funcParentListItem.data = unwrapValue(customProperty.initialValue.value);
-						}
-					}
-				}
-			}
-		});
-		walk(rule, {
-			visit: "Declaration",
-			enter(declaration) {
-				if (declaration.property.startsWith("--")) return;
-				styles[getReactProperty(declaration.property)] = generate(declaration.value) + (declaration.important ? "!important" : "");
-			}
-		});
-	}
-	return styles;
-}
-
 //#endregion
 //#region src/utils/tailwindcss/clone-element-with-inlined-styles.ts
 function cloneElementWithInlinedStyles(element, inlinableRules, nonInlinableRules, customProperties) {
@@ -21674,6 +21674,16 @@ const pixelBasedPreset = { theme: { extend: {
 		96: "384px"
 	}
 } } };
+function sanitizeStyleSheet(styleSheet) {
+	resolveAllCssVariables(styleSheet);
+	resolveCalcExpressions(styleSheet);
+	sanitizeDeclarations(styleSheet);
+}
+function inlineStyles(styleSheet, classes) {
+	const { inlinable: inlinableRules } = extractRulesPerClass(styleSheet, classes);
+	const customProperties = getCustomProperties(styleSheet);
+	return makeInlineStylesFor(Array.from(inlinableRules.values()), customProperties);
+}
 function Tailwind({ children, config }) {
 	const tailwindSetup = useSuspensedPromise(() => setupTailwind(config ?? {}), JSON.stringify(config, (_key, value) => typeof value === "function" ? value.toString() : value));
 	let classesUsed = [];
@@ -21688,16 +21698,14 @@ function Tailwind({ children, config }) {
 		return node;
 	});
 	const styleSheet = tailwindSetup.getStyleSheet();
-	resolveAllCssVariables(styleSheet);
-	resolveCalcExpressions(styleSheet);
-	sanitizeDeclarations(styleSheet);
+	sanitizeStyleSheet(styleSheet);
 	const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = extractRulesPerClass(styleSheet, classesUsed);
-	sanitizeNonInlinableRules(styleSheet);
 	const customProperties = getCustomProperties(styleSheet);
 	const nonInlineStyles = {
 		type: "StyleSheet",
 		children: new List().fromArray(Array.from(nonInlinableRules.values()))
 	};
+	sanitizeNonInlinableRules(nonInlineStyles);
 	const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
 	let appliedNonInlineStyles = false;
 	mappedChildren = mapReactTree(mappedChildren, (node) => {
@@ -21726,4 +21734,7 @@ please file a bug https://github.com/resend/react-email/issues/new?assignees=&la
 
 //#endregion
 exports.Tailwind = Tailwind;
-exports.pixelBasedPreset = pixelBasedPreset;
+exports.inlineStyles = inlineStyles;
+exports.pixelBasedPreset = pixelBasedPreset;
+exports.sanitizeStyleSheet = sanitizeStyleSheet;
+exports.setupTailwind = setupTailwind;

package/dist/index.mjs

@@ -19108,6 +19108,74 @@ function getCustomProperties(node) {
 	return customProperties;
 }
 
+//#endregion
+//#region src/utils/text/from-dash-case-to-camel-case.ts
+const fromDashCaseToCamelCase = (text) => {
+	return text.replace(/-(\w|$)/g, (_, p1) => p1.toUpperCase());
+};
+
+//#endregion
+//#region src/utils/compatibility/get-react-property.ts
+function getReactProperty(prop) {
+	const modifiedProp = prop.toLowerCase();
+	if (modifiedProp.startsWith("--")) return modifiedProp;
+	if (modifiedProp.startsWith("-ms-")) return fromDashCaseToCamelCase(modifiedProp.slice(1));
+	return fromDashCaseToCamelCase(modifiedProp);
+}
+
+//#endregion
+//#region src/utils/css/unwrap-value.ts
+function unwrapValue(value) {
+	if (value.type === "Value" && value.children.size === 1) return value.children.first ?? value;
+	return value;
+}
+
+//#endregion
+//#region src/utils/css/make-inline-styles-for.ts
+function makeInlineStylesFor(inlinableRules, customProperties) {
+	const styles = {};
+	const localVariableDeclarations = /* @__PURE__ */ new Map();
+	for (const rule of inlinableRules) walk(rule, {
+		visit: "Declaration",
+		enter(declaration) {
+			if (declaration.property.startsWith("--")) localVariableDeclarations.set(declaration.property, declaration);
+		}
+	});
+	for (const rule of inlinableRules) {
+		walk(rule, {
+			visit: "Function",
+			enter(func, funcParentListItem) {
+				if (func.name === "var") {
+					let variableName;
+					walk(func, {
+						visit: "Identifier",
+						enter(identifier) {
+							variableName = identifier.name;
+							return this.break;
+						}
+					});
+					if (variableName) {
+						const definition = localVariableDeclarations.get(variableName);
+						if (definition) funcParentListItem.data = unwrapValue(definition.value);
+						else {
+							const customProperty = customProperties.get(variableName);
+							if (customProperty?.initialValue) funcParentListItem.data = unwrapValue(customProperty.initialValue.value);
+						}
+					}
+				}
+			}
+		});
+		walk(rule, {
+			visit: "Declaration",
+			enter(declaration) {
+				if (declaration.property.startsWith("--")) return;
+				styles[getReactProperty(declaration.property)] = generate(declaration.value) + (declaration.important ? "!important" : "");
+			}
+		});
+	}
+	return styles;
+}
+
 //#endregion
 //#region src/utils/css/resolve-all-css-variables.ts
 function doSelectorsIntersect(first, second) {
@@ -19677,74 +19745,6 @@ function mapReactTree(value, process) {
 	return mapped && mapped.length === 1 ? mapped[0] : mapped;
 }
 
-//#endregion
-//#region src/utils/text/from-dash-case-to-camel-case.ts
-const fromDashCaseToCamelCase = (text) => {
-	return text.replace(/-(\w|$)/g, (_, p1) => p1.toUpperCase());
-};
-
-//#endregion
-//#region src/utils/compatibility/get-react-property.ts
-function getReactProperty(prop) {
-	const modifiedProp = prop.toLowerCase();
-	if (modifiedProp.startsWith("--")) return modifiedProp;
-	if (modifiedProp.startsWith("-ms-")) return fromDashCaseToCamelCase(modifiedProp.slice(1));
-	return fromDashCaseToCamelCase(modifiedProp);
-}
-
-//#endregion
-//#region src/utils/css/unwrap-value.ts
-function unwrapValue(value) {
-	if (value.type === "Value" && value.children.size === 1) return value.children.first ?? value;
-	return value;
-}
-
-//#endregion
-//#region src/utils/css/make-inline-styles-for.ts
-function makeInlineStylesFor(inlinableRules, customProperties) {
-	const styles = {};
-	const localVariableDeclarations = /* @__PURE__ */ new Map();
-	for (const rule of inlinableRules) walk(rule, {
-		visit: "Declaration",
-		enter(declaration) {
-			if (declaration.property.startsWith("--")) localVariableDeclarations.set(declaration.property, declaration);
-		}
-	});
-	for (const rule of inlinableRules) {
-		walk(rule, {
-			visit: "Function",
-			enter(func, funcParentListItem) {
-				if (func.name === "var") {
-					let variableName;
-					walk(func, {
-						visit: "Identifier",
-						enter(identifier) {
-							variableName = identifier.name;
-							return this.break;
-						}
-					});
-					if (variableName) {
-						const definition = localVariableDeclarations.get(variableName);
-						if (definition) funcParentListItem.data = unwrapValue(definition.value);
-						else {
-							const customProperty = customProperties.get(variableName);
-							if (customProperty?.initialValue) funcParentListItem.data = unwrapValue(customProperty.initialValue.value);
-						}
-					}
-				}
-			}
-		});
-		walk(rule, {
-			visit: "Declaration",
-			enter(declaration) {
-				if (declaration.property.startsWith("--")) return;
-				styles[getReactProperty(declaration.property)] = generate(declaration.value) + (declaration.important ? "!important" : "");
-			}
-		});
-	}
-	return styles;
-}
-
 //#endregion
 //#region src/utils/tailwindcss/clone-element-with-inlined-styles.ts
 function cloneElementWithInlinedStyles(element, inlinableRules, nonInlinableRules, customProperties) {
@@ -21661,6 +21661,16 @@ const pixelBasedPreset = { theme: { extend: {
 		96: "384px"
 	}
 } } };
+function sanitizeStyleSheet(styleSheet) {
+	resolveAllCssVariables(styleSheet);
+	resolveCalcExpressions(styleSheet);
+	sanitizeDeclarations(styleSheet);
+}
+function inlineStyles(styleSheet, classes) {
+	const { inlinable: inlinableRules } = extractRulesPerClass(styleSheet, classes);
+	const customProperties = getCustomProperties(styleSheet);
+	return makeInlineStylesFor(Array.from(inlinableRules.values()), customProperties);
+}
 function Tailwind({ children, config }) {
 	const tailwindSetup = useSuspensedPromise(() => setupTailwind(config ?? {}), JSON.stringify(config, (_key, value) => typeof value === "function" ? value.toString() : value));
 	let classesUsed = [];
@@ -21675,16 +21685,14 @@ function Tailwind({ children, config }) {
 		return node;
 	});
 	const styleSheet = tailwindSetup.getStyleSheet();
-	resolveAllCssVariables(styleSheet);
-	resolveCalcExpressions(styleSheet);
-	sanitizeDeclarations(styleSheet);
+	sanitizeStyleSheet(styleSheet);
 	const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = extractRulesPerClass(styleSheet, classesUsed);
-	sanitizeNonInlinableRules(styleSheet);
 	const customProperties = getCustomProperties(styleSheet);
 	const nonInlineStyles = {
 		type: "StyleSheet",
 		children: new List().fromArray(Array.from(nonInlinableRules.values()))
 	};
+	sanitizeNonInlinableRules(nonInlineStyles);
 	const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
 	let appliedNonInlineStyles = false;
 	mappedChildren = mapReactTree(mappedChildren, (node) => {
@@ -21712,5 +21720,5 @@ please file a bug https://github.com/resend/react-email/issues/new?assignees=&la
 }
 
 //#endregion
-export { Tailwind, pixelBasedPreset };
+export { Tailwind, inlineStyles, pixelBasedPreset, sanitizeStyleSheet, setupTailwind };
 //# sourceMappingURL=index.mjs.map