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

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

@@ -1079,9 +1079,7 @@ function sourceFragment({ source, line, column, baseLine, baseColumn }, extraLin
 	function processLines(start, end) {
 		return lines.slice(start, end).map((line$1, idx) => String(start + idx + 1).padStart(maxNumLength) + " |" + line$1).join("\n");
 	}
-	const prelines = "\n".repeat(Math.max(baseLine - 1, 0));
-	const precolumns = " ".repeat(Math.max(baseColumn - 1, 0));
-	const lines = (prelines + precolumns + source).split(/\r\n?|\n|\f/);
+	const lines = ("\n".repeat(Math.max(baseLine - 1, 0)) + " ".repeat(Math.max(baseColumn - 1, 0)) + source).split(/\r\n?|\n|\f/);
 	const startLine = Math.max(1, line - extraLines) - 1;
 	const endLine = Math.min(line + extraLines, lines.length + 1);
 	const maxNumLength = Math.max(4, String(endLine).length) + 1;
@@ -1364,8 +1362,7 @@ function createParser(config) {
 		if (typeof onComment === "function") parser.forEachToken((type, start, end) => {
 			if (type === Comment) {
 				const loc = parser.getLocation(start, end);
-				const value = cmpStr(source, end - 2, end, "*/") ? source.slice(start + 2, end - 2) : source.slice(start + 2, end);
-				onComment(value, loc);
+				onComment(cmpStr(source, end - 2, end, "*/") ? source.slice(start + 2, end - 2) : source.slice(start + 2, end), loc);
 			}
 		});
 		const ast = parser.context[context].call(parser, options);
@@ -4800,8 +4797,7 @@ function processStructure(name$49, nodeType) {
 	const docs = { type: "\"" + name$49 + "\"" };
 	for (const key in structure$49) {
 		if (hasOwnProperty$1.call(structure$49, key) === false) continue;
-		const fieldTypes = fields[key] = Array.isArray(structure$49[key]) ? structure$49[key].slice() : [structure$49[key]];
-		docs[key] = genTypesList(fieldTypes, name$49 + "." + key);
+		docs[key] = genTypesList(fields[key] = Array.isArray(structure$49[key]) ? structure$49[key].slice() : [structure$49[key]], name$49 + "." + key);
 	}
 	return {
 		docs,
@@ -19090,9 +19086,7 @@ function populateParentsForNodeTree(node) {
 //#endregion
 //#region src/utils/css/resolve-all-css-variables.ts
 function doSelectorsIntersect(first, second) {
-	const firstStringified = generate(first);
-	const secondStringified = generate(second);
-	if (firstStringified === secondStringified) return true;
+	if (generate(first) === generate(second)) return true;
 	let hasSomeUniversal = false;
 	const walker = (node) => {
 		if (hasSomeUniversal) return;
@@ -19104,12 +19098,6 @@ function doSelectorsIntersect(first, second) {
 	if (hasSomeUniversal) return true;
 	return false;
 }
-function removeAndRepeatIfEmptyRecursively(node) {
-	if (node.parent) if (node.containedIn && node.containingItem) {
-		node.containedIn.remove(node.containingItem);
-		if (node.containedIn.isEmpty) removeAndRepeatIfEmptyRecursively(node.parent);
-	} else removeAndRepeatIfEmptyRecursively(node.parent);
-}
 function someParent(node, predicate) {
 	if (node.parent) {
 		if (predicate(node.parent)) return true;
@@ -19127,11 +19115,8 @@ function resolveAllCssVariables(node) {
 			if (someParent(declaration, (ancestor) => ancestor.type === "Atrule" && ancestor.name === "layer" && ancestor.prelude !== null && generate(ancestor.prelude).includes("properties"))) return;
 			if (/--[\S]+/.test(declaration.property)) variableDefinitions.add({
 				declaration,
-				variableName: `${declaration.property}`,
-				definition: generate(declaration.value),
-				remove() {
-					removeAndRepeatIfEmptyRecursively(declaration);
-				}
+				variableName: declaration.property,
+				definition: generate(declaration.value)
 			});
 			else {
 				function parseVariableUsesFrom(node$1) {
@@ -19148,10 +19133,7 @@ function resolveAllCssVariables(node) {
 									variableName: name$49,
 									raw: generate(funcNode)
 								});
-								if (fallback?.includes("var(")) {
-									const parsedFallback = parse(fallback, { context: "value" });
-									parseVariableUsesFrom(parsedFallback);
-								}
+								if (fallback?.includes("var(")) parseVariableUsesFrom(parse(fallback, { context: "value" }));
 							}
 						}
 					});
@@ -19177,7 +19159,6 @@ function resolveAllCssVariables(node) {
 		}
 		if (!hasReplaced && use.fallback) use.declaration.value = parse(generate(use.declaration.value).replaceAll(use.raw, use.fallback), { context: "value" });
 	}
-	for (const definition of variableDefinitions) definition.remove();
 }
 
 //#endregion
@@ -19193,7 +19174,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 +19216,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 +19284,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 +19301,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]) {
@@ -19445,48 +19447,47 @@ function sanitizeDeclarations(nodeContainingDeclarations) {
 				enter(hash, hashParentListItem) {
 					const hex = hash.value.trim();
 					if (hex.length === 3) {
-						const r$1 = Number.parseInt(hex.charAt(0) + hex.charAt(0), 16);
-						const g$1 = Number.parseInt(hex.charAt(1) + hex.charAt(1), 16);
-						const b$1 = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
-						hashParentListItem.data = parse(`rgb(${r$1},${g$1},${b$1})`, { context: "value" });
+						hashParentListItem.data = parse(`rgb(${Number.parseInt(hex.charAt(0) + hex.charAt(0), 16)},${Number.parseInt(hex.charAt(1) + hex.charAt(1), 16)},${Number.parseInt(hex.charAt(2) + hex.charAt(2), 16)})`, { context: "value" });
 						return;
 					}
 					if (hex.length === 4) {
-						const r$1 = Number.parseInt(hex.charAt(0) + hex.charAt(0), 16);
-						const g$1 = Number.parseInt(hex.charAt(1) + hex.charAt(1), 16);
-						const b$1 = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
-						const a$1 = Number.parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255;
-						hashParentListItem.data = parse(`rgb(${r$1},${g$1},${b$1},${a$1.toFixed(1)})`, { context: "value" });
+						hashParentListItem.data = parse(`rgb(${Number.parseInt(hex.charAt(0) + hex.charAt(0), 16)},${Number.parseInt(hex.charAt(1) + hex.charAt(1), 16)},${Number.parseInt(hex.charAt(2) + hex.charAt(2), 16)},${(Number.parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255).toFixed(1)})`, { context: "value" });
 						return;
 					}
 					if (hex.length === 5) {
-						const r$1 = Number.parseInt(hex.slice(0, 2), 16);
-						const g$1 = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
-						const b$1 = Number.parseInt(hex.charAt(3) + hex.charAt(3), 16);
-						const a$1 = Number.parseInt(hex.charAt(4) + hex.charAt(4), 16) / 255;
-						hashParentListItem.data = parse(`rgb(${r$1},${g$1},${b$1},${a$1.toFixed(1)})`, { context: "value" });
+						hashParentListItem.data = parse(`rgb(${Number.parseInt(hex.slice(0, 2), 16)},${Number.parseInt(hex.charAt(2) + hex.charAt(2), 16)},${Number.parseInt(hex.charAt(3) + hex.charAt(3), 16)},${(Number.parseInt(hex.charAt(4) + hex.charAt(4), 16) / 255).toFixed(1)})`, { context: "value" });
 						return;
 					}
 					if (hex.length === 6) {
-						const r$1 = Number.parseInt(hex.slice(0, 2), 16);
-						const g$1 = Number.parseInt(hex.slice(2, 4), 16);
-						const b$1 = Number.parseInt(hex.slice(4, 6), 16);
-						hashParentListItem.data = parse(`rgb(${r$1},${g$1},${b$1})`, { context: "value" });
+						hashParentListItem.data = parse(`rgb(${Number.parseInt(hex.slice(0, 2), 16)},${Number.parseInt(hex.slice(2, 4), 16)},${Number.parseInt(hex.slice(4, 6), 16)})`, { context: "value" });
 						return;
 					}
 					if (hex.length === 7) {
-						const r$1 = Number.parseInt(hex.slice(0, 2), 16);
-						const g$1 = Number.parseInt(hex.slice(2, 4), 16);
-						const b$1 = Number.parseInt(hex.slice(4, 6), 16);
-						const a$1 = Number.parseInt(hex.charAt(6) + hex.charAt(6), 16) / 255;
-						hashParentListItem.data = parse(`rgb(${r$1},${g$1},${b$1},${a$1.toFixed(1)})`, { context: "value" });
+						hashParentListItem.data = parse(`rgb(${Number.parseInt(hex.slice(0, 2), 16)},${Number.parseInt(hex.slice(2, 4), 16)},${Number.parseInt(hex.slice(4, 6), 16)},${(Number.parseInt(hex.charAt(6) + hex.charAt(6), 16) / 255).toFixed(1)})`, { context: "value" });
 						return;
 					}
-					const r = Number.parseInt(hex.slice(0, 2), 16);
-					const g = Number.parseInt(hex.slice(2, 4), 16);
-					const b = Number.parseInt(hex.slice(4, 6), 16);
-					const a = Number.parseInt(hex.slice(6, 8), 16) / 255;
-					hashParentListItem.data = parse(`rgb(${r},${g},${b},${a.toFixed(1)})`, { context: "value" });
+					hashParentListItem.data = parse(`rgb(${Number.parseInt(hex.slice(0, 2), 16)},${Number.parseInt(hex.slice(2, 4), 16)},${Number.parseInt(hex.slice(4, 6), 16)},${(Number.parseInt(hex.slice(6, 8), 16) / 255).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") {
@@ -19552,10 +19553,7 @@ function sanitizeNonInlinableRules(node) {
 		enter(rule) {
 			if (!isRuleInlinable(rule)) {
 				walk(rule.prelude, (node$1) => {
-					if (node$1.type === "ClassSelector") {
-						const unescapedClassName = decode$1(node$1.name);
-						node$1.name = sanitizeClassName(unescapedClassName);
-					}
+					if (node$1.type === "ClassSelector") node$1.name = sanitizeClassName(decode$1(node$1.name));
 				});
 				walk(rule, {
 					visit: "Declaration",
@@ -19594,10 +19592,7 @@ function mapReactTree(value, process) {
 			const newProps = { ...node.props };
 			if (node.props.children && !isComponent(node)) newProps.children = mapReactTree(node.props.children, process);
 			const processed = process(react.default.cloneElement(node, newProps, newProps.children));
-			if (react.default.isValidElement(processed) && isComponent(processed)) {
-				const rendered = (typeof processed.type === "object" ? processed.type.render : processed.type)(processed.props);
-				return mapReactTree(rendered, process);
-			}
+			if (react.default.isValidElement(processed) && isComponent(processed)) return mapReactTree((typeof processed.type === "object" ? processed.type.render : processed.type)(processed.props), process);
 			return processed;
 		}
 		return process(node);
@@ -19612,8 +19607,8 @@ const fromDashCaseToCamelCase = (text) => {
 };
 
 //#endregion
-//#region src/utils/compatibility/convert-css-property-to-react-property.ts
-function convertCssPropertyToReactProperty(prop) {
+//#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));
@@ -19624,12 +19619,41 @@ function convertCssPropertyToReactProperty(prop) {
 //#region src/utils/css/make-inline-styles-for.ts
 function makeInlineStylesFor(inlinableRules) {
 	const styles = {};
+	const localVariableDeclarations = /* @__PURE__ */ new Set();
 	for (const rule of inlinableRules) walk(rule, {
 		visit: "Declaration",
 		enter(declaration) {
-			styles[convertCssPropertyToReactProperty(declaration.property)] = generate(declaration.value) + (declaration.important ? "!important" : "");
+			if (declaration.property.startsWith("--")) localVariableDeclarations.add(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 = Array.from(localVariableDeclarations).find((declaration) => variableName === declaration.property);
+						if (definition) funcParentListItem.data = definition.value;
+					}
+				}
+			}
+		});
+		walk(rule, {
+			visit: "Declaration",
+			enter(declaration) {
+				if (declaration.property.startsWith("--")) return;
+				styles[getReactProperty(declaration.property)] = generate(declaration.value) + (declaration.important ? "!important" : "");
+			}
+		});
+	}
 	return styles;
 }
 
@@ -21457,7 +21481,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 +21519,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 +21572,7 @@ const pixelBasedPreset = { theme: {
 		80: "320px",
 		96: "384px"
 	}
-} };
+} } };
 function Tailwind({ children, config }) {
 	const tailwindSetup = useSuspensedPromise(() => setupTailwind(config ?? {}), JSON.stringify(config));
 	let classesUsed = [];