@react-email/tailwind 2.0.0-tailwindv4.1 → 2.0.0-tailwindv4.2

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as React$1 from "react";
 import { Config } from "tailwindcss";
 
 //#region src/tailwind.d.ts
-type TailwindConfig = Pick<Config, 'important' | 'prefix' | 'separator' | 'safelist' | 'blocklist' | 'presets' | 'future' | 'experimental' | 'darkMode' | 'theme' | 'corePlugins' | 'plugins'>;
+type TailwindConfig = Omit<Config, 'content'>;
 interface TailwindProps {
   children: React$1.ReactNode;
   config?: TailwindConfig;

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/tailwind.tsx"],"sourcesContent":[],"mappings":";;;;KAaY,cAAA,GAAiB,KAC3B;UAee,aAAA;EAhBL,QAAA,EAiBA,OAAA,CAAM,SAjBQ;EAAA,MAAA,CAAA,EAkBf,cAlBe;;AAAG,UAqBZ,iBAAA,CArBY;EAAI,QAAA,CAAA,EAsBpB,OAAA,CAAM,SAtBc;EAgBhB,SAAA,CAAA,EAAA,MAAa;EAAA,KAAA,CAAA,EAQpB,OAAA,CAAM,aARc;;AAEnB,cASE,gBATF,EASoB,cATpB;AAAc,iBAkET,QAAA,CAlES;EAAA,QAAA;EAAA;AAAA,CAAA,EAkEsB,aAlEtB,CAAA,EAkEmC,OAAA,CAAA,SAlEnC"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/tailwind.tsx"],"sourcesContent":[],"mappings":";;;;KAaY,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"}

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Config } from "tailwindcss";
 
 //#region src/tailwind.d.ts
-type TailwindConfig = Pick<Config, 'important' | 'prefix' | 'separator' | 'safelist' | 'blocklist' | 'presets' | 'future' | 'experimental' | 'darkMode' | 'theme' | 'corePlugins' | 'plugins'>;
+type TailwindConfig = Omit<Config, 'content'>;
 interface TailwindProps {
   children: React.ReactNode;
   config?: TailwindConfig;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/tailwind.tsx"],"sourcesContent":[],"mappings":";;;;KAaY,cAAA,GAAiB,KAC3B;UAee,aAAA;EAhBL,QAAA,EAiBA,KAAA,CAAM,SAjBQ;EAAA,MAAA,CAAA,EAkBf,cAlBe;;AAAG,UAqBZ,iBAAA,CArBY;EAAI,QAAA,CAAA,EAsBpB,KAAA,CAAM,SAtBc;EAgBhB,SAAA,CAAA,EAAA,MAAa;EAAA,KAAA,CAAA,EAQpB,KAAA,CAAM,aARc;;AAEnB,cASE,gBATF,EASoB,cATpB;AAAc,iBAkET,QAAA,CAlES;EAAA,QAAA;EAAA;AAAA,CAAA,EAkEsB,aAlEtB,CAAA,EAkEmC,KAAA,CAAA,SAlEnC"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/tailwind.tsx"],"sourcesContent":[],"mappings":";;;;KAaY,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"}

package/dist/index.js

@@ -19193,7 +19193,7 @@ function resolveCalcExpressions(node) {
 				func.children.forEach((child, item) => {
 					const left = item.prev;
 					const right = item.next;
-					if (left && right && child.type === "Operator" && (left.data.type === "Dimension" || left.data.type === "Number") && (right.data.type === "Dimension" || right.data.type === "Number")) {
+					if (left && right && child.type === "Operator" && (left.data.type === "Dimension" || left.data.type === "Number" || left.data.type === "Percentage") && (right.data.type === "Dimension" || right.data.type === "Number" || right.data.type === "Percentage")) {
 						if (child.value === "*" || child.value === "/") {
 							const value = (() => {
 								if (child.value === "*") return String(Number.parseFloat(left.data.value) * Number.parseFloat(right.data.value));
@@ -19235,6 +19235,31 @@ function resolveCalcExpressions(node) {
 								};
 								func.children.remove(left);
 								func.children.remove(right);
+							} else if (left.data.type === "Percentage" && right.data.type === "Number") {
+								item.data = {
+									type: "Percentage",
+									value
+								};
+								func.children.remove(left);
+								func.children.remove(right);
+							} else if (left.data.type === "Number" && right.data.type === "Percentage") {
+								item.data = {
+									type: "Percentage",
+									value
+								};
+								func.children.remove(left);
+								func.children.remove(right);
+							} else if (left.data.type === "Percentage" && right.data.type === "Percentage") {
+								if (child.value === "/") item.data = {
+									type: "Number",
+									value
+								};
+								else item.data = {
+									type: "Percentage",
+									value
+								};
+								func.children.remove(left);
+								func.children.remove(right);
 							}
 						}
 					}
@@ -19278,10 +19303,6 @@ function lrgbToRgb(input) {
 function clamp(value, min, max) {
 	return Math.min(Math.max(value, min), max);
 }
-function round(value, digits = 1) {
-	const factor = 10 ** digits;
-	return Math.round(value * factor) / factor;
-}
 function oklchToOklab(oklch) {
 	return {
 		l: oklch.l,
@@ -19299,9 +19320,9 @@ function oklchToRgb(oklch) {
 	const g = 255 * lrgbToRgb(LSM_TO_RGB.g[0] * l + LSM_TO_RGB.g[1] * m + LSM_TO_RGB.g[2] * s);
 	const b = 255 * lrgbToRgb(LSM_TO_RGB.b[0] * l + LSM_TO_RGB.b[1] * m + LSM_TO_RGB.b[2] * s);
 	return {
-		r: round(clamp(r, 0, 255)),
-		g: round(clamp(g, 0, 255)),
-		b: round(clamp(b, 0, 255))
+		r: clamp(r, 0, 255).toFixed(0),
+		g: clamp(g, 0, 255).toFixed(0),
+		b: clamp(b, 0, 255).toFixed(0)
 	};
 }
 function separteShorthandDeclaration(shorthandToReplace, [start, end]) {
@@ -19489,6 +19510,27 @@ function sanitizeDeclarations(nodeContainingDeclarations) {
 					hashParentListItem.data = parse(`rgb(${r},${g},${b},${a.toFixed(1)})`, { context: "value" });
 				}
 			});
+			walk(declaration, {
+				visit: "Function",
+				enter(func, parentListItem) {
+					if (func.name === "color-mix") {
+						const originalColor = find(func, (node) => node.type === "Function" && node.name === "rgb");
+						const percentage$1 = find(func, (node) => node.type === "Percentage");
+						if (func.children.last?.type === "Identifier" && func.children.last.name === "transparent" && originalColor && percentage$1) {
+							const alpha = Number.parseFloat(percentage$1.value) / 100;
+							originalColor.children.appendData({
+								type: "Operator",
+								value: ","
+							});
+							originalColor.children.appendData({
+								type: "Number",
+								value: alpha.toString()
+							});
+							parentListItem.data = originalColor;
+						}
+					}
+				}
+			});
 			if (declaration.property === "padding-inline") {
 				const paddingRight = separteShorthandDeclaration(declaration, ["padding-left", "padding-right"]);
 				list.insertData(paddingRight, item);
@@ -21457,7 +21499,7 @@ async function setupTailwind(config) {
 			};
 			throw new Error(`NO-OP: should we implement support for ${resourceHint}?`);
 		},
-		polyfills: 3,
+		polyfills: 0,
 		async loadStylesheet(id, base) {
 			if (id === "tailwindcss") return {
 				base,
@@ -21495,7 +21537,7 @@ async function setupTailwind(config) {
 
 //#endregion
 //#region src/tailwind.tsx
-const pixelBasedPreset = { theme: {
+const pixelBasedPreset = { theme: { extend: {
 	fontSize: {
 		xs: ["12px", { lineHeight: "16px" }],
 		sm: ["14px", { lineHeight: "20px" }],
@@ -21548,7 +21590,7 @@ const pixelBasedPreset = { theme: {
 		80: "320px",
 		96: "384px"
 	}
-} };
+} } };
 function Tailwind({ children, config }) {
 	const tailwindSetup = useSuspensedPromise(() => setupTailwind(config ?? {}), JSON.stringify(config));
 	let classesUsed = [];

package/dist/index.mjs

@@ -19191,7 +19191,7 @@ function resolveCalcExpressions(node) {
 				func.children.forEach((child, item) => {
 					const left = item.prev;
 					const right = item.next;
-					if (left && right && child.type === "Operator" && (left.data.type === "Dimension" || left.data.type === "Number") && (right.data.type === "Dimension" || right.data.type === "Number")) {
+					if (left && right && child.type === "Operator" && (left.data.type === "Dimension" || left.data.type === "Number" || left.data.type === "Percentage") && (right.data.type === "Dimension" || right.data.type === "Number" || right.data.type === "Percentage")) {
 						if (child.value === "*" || child.value === "/") {
 							const value = (() => {
 								if (child.value === "*") return String(Number.parseFloat(left.data.value) * Number.parseFloat(right.data.value));
@@ -19233,6 +19233,31 @@ function resolveCalcExpressions(node) {
 								};
 								func.children.remove(left);
 								func.children.remove(right);
+							} else if (left.data.type === "Percentage" && right.data.type === "Number") {
+								item.data = {
+									type: "Percentage",
+									value
+								};
+								func.children.remove(left);
+								func.children.remove(right);
+							} else if (left.data.type === "Number" && right.data.type === "Percentage") {
+								item.data = {
+									type: "Percentage",
+									value
+								};
+								func.children.remove(left);
+								func.children.remove(right);
+							} else if (left.data.type === "Percentage" && right.data.type === "Percentage") {
+								if (child.value === "/") item.data = {
+									type: "Number",
+									value
+								};
+								else item.data = {
+									type: "Percentage",
+									value
+								};
+								func.children.remove(left);
+								func.children.remove(right);
 							}
 						}
 					}
@@ -19276,10 +19301,6 @@ function lrgbToRgb(input) {
 function clamp(value, min, max) {
 	return Math.min(Math.max(value, min), max);
 }
-function round(value, digits = 1) {
-	const factor = 10 ** digits;
-	return Math.round(value * factor) / factor;
-}
 function oklchToOklab(oklch) {
 	return {
 		l: oklch.l,
@@ -19297,9 +19318,9 @@ function oklchToRgb(oklch) {
 	const g = 255 * lrgbToRgb(LSM_TO_RGB.g[0] * l + LSM_TO_RGB.g[1] * m + LSM_TO_RGB.g[2] * s);
 	const b = 255 * lrgbToRgb(LSM_TO_RGB.b[0] * l + LSM_TO_RGB.b[1] * m + LSM_TO_RGB.b[2] * s);
 	return {
-		r: round(clamp(r, 0, 255)),
-		g: round(clamp(g, 0, 255)),
-		b: round(clamp(b, 0, 255))
+		r: clamp(r, 0, 255).toFixed(0),
+		g: clamp(g, 0, 255).toFixed(0),
+		b: clamp(b, 0, 255).toFixed(0)
 	};
 }
 function separteShorthandDeclaration(shorthandToReplace, [start, end]) {
@@ -19487,6 +19508,27 @@ function sanitizeDeclarations(nodeContainingDeclarations) {
 					hashParentListItem.data = parse(`rgb(${r},${g},${b},${a.toFixed(1)})`, { context: "value" });
 				}
 			});
+			walk(declaration, {
+				visit: "Function",
+				enter(func, parentListItem) {
+					if (func.name === "color-mix") {
+						const originalColor = find(func, (node) => node.type === "Function" && node.name === "rgb");
+						const percentage$1 = find(func, (node) => node.type === "Percentage");
+						if (func.children.last?.type === "Identifier" && func.children.last.name === "transparent" && originalColor && percentage$1) {
+							const alpha = Number.parseFloat(percentage$1.value) / 100;
+							originalColor.children.appendData({
+								type: "Operator",
+								value: ","
+							});
+							originalColor.children.appendData({
+								type: "Number",
+								value: alpha.toString()
+							});
+							parentListItem.data = originalColor;
+						}
+					}
+				}
+			});
 			if (declaration.property === "padding-inline") {
 				const paddingRight = separteShorthandDeclaration(declaration, ["padding-left", "padding-right"]);
 				list.insertData(paddingRight, item);
@@ -21455,7 +21497,7 @@ async function setupTailwind(config) {
 			};
 			throw new Error(`NO-OP: should we implement support for ${resourceHint}?`);
 		},
-		polyfills: 3,
+		polyfills: 0,
 		async loadStylesheet(id, base) {
 			if (id === "tailwindcss") return {
 				base,
@@ -21493,7 +21535,7 @@ async function setupTailwind(config) {
 
 //#endregion
 //#region src/tailwind.tsx
-const pixelBasedPreset = { theme: {
+const pixelBasedPreset = { theme: { extend: {
 	fontSize: {
 		xs: ["12px", { lineHeight: "16px" }],
 		sm: ["14px", { lineHeight: "20px" }],
@@ -21546,7 +21588,7 @@ const pixelBasedPreset = { theme: {
 		80: "320px",
 		96: "384px"
 	}
-} };
+} } };
 function Tailwind({ children, config }) {
 	const tailwindSetup = useSuspensedPromise(() => setupTailwind(config ?? {}), JSON.stringify(config));
 	let classesUsed = [];