@depup/react-email 5.2.10-depup.1 → 6.9.0-depup.1

package/dist/components/tailwind/utils/css/sanitize-declarations.mjs

@@ -0,0 +1,309 @@
+import { List, generate, parse, walk } from "css-tree/dist/csstree.esm";
+//#region src/components/tailwind/utils/css/sanitize-declarations.ts
+function rgbNode(r, g, b, alpha) {
+	const children = new List();
+	children.appendData({
+		type: "Number",
+		value: r.toFixed(0)
+	});
+	children.appendData({
+		type: "Operator",
+		value: ","
+	});
+	children.appendData({
+		type: "Number",
+		value: g.toFixed(0)
+	});
+	children.appendData({
+		type: "Operator",
+		value: ","
+	});
+	children.appendData({
+		type: "Number",
+		value: b.toFixed(0)
+	});
+	if (alpha !== 1 && alpha !== void 0) {
+		children.appendData({
+			type: "Operator",
+			value: ","
+		});
+		children.appendData({
+			type: "Number",
+			value: alpha.toString()
+		});
+	}
+	return {
+		type: "Function",
+		name: "rgb",
+		children
+	};
+}
+const LAB_TO_LMS = {
+	l: [.3963377773761749, .2158037573099136],
+	m: [-.1055613458156586, -.0638541728258133],
+	s: [-.0894841775298119, -1.2914855480194092]
+};
+const LSM_TO_RGB = {
+	r: [
+		4.076741636075958,
+		-3.307711539258063,
+		.2309699031821043
+	],
+	g: [
+		-1.2684379732850315,
+		2.609757349287688,
+		-.341319376002657
+	],
+	b: [
+		-.0041960761386756,
+		-.7034186179359362,
+		1.7076146940746117
+	]
+};
+function lrgbToRgb(input) {
+	const absoluteNumber = Math.abs(input);
+	const sign = input < 0 ? -1 : 1;
+	if (absoluteNumber > .0031308) return sign * (absoluteNumber ** (1 / 2.4) * 1.055 - .055);
+	return input * 12.92;
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function oklchToOklab(oklch) {
+	return {
+		l: oklch.l,
+		a: oklch.c * Math.cos(oklch.h / 180 * Math.PI),
+		b: oklch.c * Math.sin(oklch.h / 180 * Math.PI)
+	};
+}
+/** Convert oklab to RGB */
+function oklchToRgb(oklch) {
+	const oklab = oklchToOklab(oklch);
+	const l = (oklab.l + LAB_TO_LMS.l[0] * oklab.a + LAB_TO_LMS.l[1] * oklab.b) ** 3;
+	const m = (oklab.l + LAB_TO_LMS.m[0] * oklab.a + LAB_TO_LMS.m[1] * oklab.b) ** 3;
+	const s = (oklab.l + LAB_TO_LMS.s[0] * oklab.a + LAB_TO_LMS.s[1] * oklab.b) ** 3;
+	const r = 255 * lrgbToRgb(LSM_TO_RGB.r[0] * l + LSM_TO_RGB.r[1] * m + LSM_TO_RGB.r[2] * s);
+	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: clamp(r, 0, 255),
+		g: clamp(g, 0, 255),
+		b: clamp(b, 0, 255)
+	};
+}
+function separteShorthandDeclaration(shorthandToReplace, [start, end]) {
+	shorthandToReplace.property = start;
+	const values = shorthandToReplace.value.type === "Value" ? shorthandToReplace.value.children.toArray().filter((child) => child.type !== "Operator" && child.type !== "WhiteSpace") : [shorthandToReplace.value];
+	let endValue = shorthandToReplace.value;
+	if (values.length === 2) {
+		endValue = {
+			type: "Value",
+			children: new List().fromArray([values[1]])
+		};
+		shorthandToReplace.value = {
+			type: "Value",
+			children: new List().fromArray([values[0]])
+		};
+	}
+	return {
+		type: "Declaration",
+		property: end,
+		value: endValue,
+		important: shorthandToReplace.important
+	};
+}
+/**
+* Meant to do all the things necessary, in a per-declaration basis, to have the best email client
+* support possible.
+*
+* Here's the transformations it does so far:
+* - convert all `rgb` with space-based syntax into a comma based one;
+* - convert all `oklch` values into `rgb`;
+* - convert all hex values into `rgb`;
+* - convert `padding-inline` into `padding-left` and `padding-right`;
+* - convert `padding-block` into `padding-top` and `padding-bottom`;
+* - convert `margin-inline` into `margin-left` and `margin-right`;
+* - convert `margin-block` into `margin-top` and `margin-bottom`.
+*/
+function sanitizeDeclarations(nodeContainingDeclarations) {
+	walk(nodeContainingDeclarations, {
+		visit: "Declaration",
+		enter(declaration, item, list) {
+			if (declaration.value.type === "Raw") declaration.value = parse(declaration.value.value, { context: "value" });
+			if (/border-(?:[a-z]+-){0,2}radius\s*:\s*calc\s*\(\s*infinity\s*\*\s*1px\s*\)/i.test(generate(declaration))) declaration.value = parse("9999px", { context: "value" });
+			walk(declaration, {
+				visit: "Function",
+				enter(func, funcParentListItem) {
+					const children = func.children.toArray();
+					if (func.name === "oklch") {
+						let l;
+						let c;
+						let h;
+						let a;
+						for (const child of children) {
+							if (child.type === "Number") {
+								if (l === void 0) {
+									l = Number.parseFloat(child.value);
+									continue;
+								}
+								if (c === void 0) {
+									c = Number.parseFloat(child.value);
+									continue;
+								}
+								if (h === void 0) {
+									h = Number.parseFloat(child.value);
+									continue;
+								}
+								if (a === void 0) {
+									a = Number.parseFloat(child.value);
+									continue;
+								}
+							}
+							if (child.type === "Dimension" && child.unit === "deg") {
+								if (h === void 0) {
+									h = Number.parseFloat(child.value);
+									continue;
+								}
+							}
+							if (child.type === "Percentage") {
+								if (l === void 0) {
+									l = Number.parseFloat(child.value) / 100;
+									continue;
+								}
+								if (a === void 0) a = Number.parseFloat(child.value) / 100;
+							}
+						}
+						if (l === void 0 || c === void 0 || h === void 0) throw new Error("Could not determine the parameters of an oklch() function.", { cause: declaration });
+						const rgb = oklchToRgb({
+							l,
+							c,
+							h
+						});
+						funcParentListItem.data = rgbNode(rgb.r, rgb.g, rgb.b, a);
+					}
+					if (func.name === "rgb" || func.name === "rgba") {
+						let r;
+						let g;
+						let b;
+						let a;
+						for (const child of children) {
+							if (child.type === "Number") {
+								if (r === void 0) {
+									r = Number.parseFloat(child.value);
+									continue;
+								}
+								if (g === void 0) {
+									g = Number.parseFloat(child.value);
+									continue;
+								}
+								if (b === void 0) {
+									b = Number.parseFloat(child.value);
+									continue;
+								}
+								if (a === void 0) {
+									a = Number.parseFloat(child.value);
+									continue;
+								}
+							}
+							if (child.type === "Percentage") {
+								if (r === void 0) {
+									r = Number.parseFloat(child.value) * 255 / 100;
+									continue;
+								}
+								if (g === void 0) {
+									g = Number.parseFloat(child.value) * 255 / 100;
+									continue;
+								}
+								if (b === void 0) {
+									b = Number.parseFloat(child.value) * 255 / 100;
+									continue;
+								}
+								if (a === void 0) a = Number.parseFloat(child.value) / 100;
+							}
+						}
+						if (r === void 0 || g === void 0 || b === void 0) throw new Error("Could not determine the parameters of an rgb() function.", { cause: declaration });
+						if (a === void 0 || a === 1) funcParentListItem.data = rgbNode(r, g, b);
+						else funcParentListItem.data = rgbNode(r, g, b, a);
+					}
+				}
+			});
+			walk(declaration, {
+				visit: "Hash",
+				enter(hash, hashParentListItem) {
+					const hex = hash.value.trim();
+					if (hex.length === 3) {
+						hashParentListItem.data = rgbNode(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));
+						return;
+					}
+					if (hex.length === 4) {
+						hashParentListItem.data = rgbNode(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);
+						return;
+					}
+					if (hex.length === 5) {
+						hashParentListItem.data = rgbNode(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);
+						return;
+					}
+					if (hex.length === 6) {
+						hashParentListItem.data = rgbNode(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16));
+						return;
+					}
+					if (hex.length === 7) {
+						hashParentListItem.data = rgbNode(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);
+						return;
+					}
+					hashParentListItem.data = rgbNode(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);
+				}
+			});
+			walk(declaration, {
+				visit: "Function",
+				enter(func, parentListItem) {
+					if (func.name === "color-mix") {
+						const children = func.children.toArray();
+						const color = children[3];
+						const opacity = children[4];
+						if (func.children.last?.type === "Identifier" && func.children.last.name === "transparent" && color?.type === "Function" && color?.name === "rgb" && opacity) {
+							if (opacity.type === "Percentage") {
+								const alpha = Number.parseFloat(opacity.value) / 100;
+								if (alpha < 1) {
+									color.children.appendData({
+										type: "Operator",
+										value: ","
+									});
+									color.children.appendData({
+										type: "Number",
+										value: alpha.toString()
+									});
+								}
+							} else {
+								color.children.appendData({
+									type: "Operator",
+									value: ","
+								});
+								color.children.appendData(opacity);
+							}
+							parentListItem.data = color;
+						}
+					}
+				}
+			});
+			if (declaration.property === "padding-inline") {
+				const paddingRight = separteShorthandDeclaration(declaration, ["padding-left", "padding-right"]);
+				list.insertData(paddingRight, item);
+			}
+			if (declaration.property === "padding-block") {
+				const paddingBottom = separteShorthandDeclaration(declaration, ["padding-top", "padding-bottom"]);
+				list.insertData(paddingBottom, item);
+			}
+			if (declaration.property === "margin-inline") {
+				const marginRight = separteShorthandDeclaration(declaration, ["margin-left", "margin-right"]);
+				list.insertData(marginRight, item);
+			}
+			if (declaration.property === "margin-block") {
+				const paddingBottom = separteShorthandDeclaration(declaration, ["margin-top", "margin-bottom"]);
+				list.insertData(paddingBottom, item);
+			}
+		}
+	});
+}
+//#endregion
+export { sanitizeDeclarations };

package/dist/components/tailwind/utils/css/sanitize-non-inlinable-rules.cjs

@@ -0,0 +1,46 @@
+require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_is_rule_inlinable = require("./is-rule-inlinable.cjs");
+const require_strip_empty_tailwind_vars = require("./strip-empty-tailwind-vars.cjs");
+const require_sanitize_class_name = require("../compatibility/sanitize-class-name.cjs");
+let css_tree = require("css-tree");
+//#region src/components/tailwind/utils/css/sanitize-non-inlinable-rules.ts
+/**
+* This function goes through a few steps to ensure the best email client support and
+* to ensure that media queries and pseudo classes are applied correctly alongside
+* the inline styles.
+*
+* What it does:
+* 1. Converts all declarations in all rules into important ones
+* 2. Sanitizes class selectors of all non-inlinable rules
+* 3. Removes --tw-* custom property declarations — by this point all CSS
+*    variables have been resolved, so these are dead weight in email HTML.
+* 4. Strips empty-fallback var(--tw-*,) refs that Tailwind v4 emits for
+*    variant-stacking idioms (filter, font-variant-numeric, etc.) — email
+*    clients can't resolve CSS custom properties reliably, so any --tw-*
+*    left as a bare empty-fallback ref would reach the client broken.
+*/
+function sanitizeNonInlinableRules(node) {
+	(0, css_tree.walk)(node, {
+		visit: "Rule",
+		enter(rule) {
+			if (!require_is_rule_inlinable.isRuleInlinable(rule)) {
+				(0, css_tree.walk)(rule.prelude, (node) => {
+					if (node.type === "ClassSelector") node.name = require_sanitize_class_name.sanitizeClassName(css_tree.string.decode(node.name));
+				});
+				(0, css_tree.walk)(rule, {
+					visit: "Declaration",
+					enter(declaration, item, list) {
+						if (declaration.property.startsWith("--tw-")) {
+							list.remove(item);
+							return;
+						}
+						declaration.important = true;
+						require_strip_empty_tailwind_vars.stripEmptyTailwindVars(declaration.value);
+					}
+				});
+			}
+		}
+	});
+}
+//#endregion
+exports.sanitizeNonInlinableRules = sanitizeNonInlinableRules;

package/dist/components/tailwind/utils/css/sanitize-non-inlinable-rules.mjs

@@ -0,0 +1,45 @@
+import { isRuleInlinable } from "./is-rule-inlinable.mjs";
+import { stripEmptyTailwindVars } from "./strip-empty-tailwind-vars.mjs";
+import { sanitizeClassName } from "../compatibility/sanitize-class-name.mjs";
+import { string, walk } from "css-tree/dist/csstree.esm";
+//#region src/components/tailwind/utils/css/sanitize-non-inlinable-rules.ts
+/**
+* This function goes through a few steps to ensure the best email client support and
+* to ensure that media queries and pseudo classes are applied correctly alongside
+* the inline styles.
+*
+* What it does:
+* 1. Converts all declarations in all rules into important ones
+* 2. Sanitizes class selectors of all non-inlinable rules
+* 3. Removes --tw-* custom property declarations — by this point all CSS
+*    variables have been resolved, so these are dead weight in email HTML.
+* 4. Strips empty-fallback var(--tw-*,) refs that Tailwind v4 emits for
+*    variant-stacking idioms (filter, font-variant-numeric, etc.) — email
+*    clients can't resolve CSS custom properties reliably, so any --tw-*
+*    left as a bare empty-fallback ref would reach the client broken.
+*/
+function sanitizeNonInlinableRules(node) {
+	walk(node, {
+		visit: "Rule",
+		enter(rule) {
+			if (!isRuleInlinable(rule)) {
+				walk(rule.prelude, (node) => {
+					if (node.type === "ClassSelector") node.name = sanitizeClassName(string.decode(node.name));
+				});
+				walk(rule, {
+					visit: "Declaration",
+					enter(declaration, item, list) {
+						if (declaration.property.startsWith("--tw-")) {
+							list.remove(item);
+							return;
+						}
+						declaration.important = true;
+						stripEmptyTailwindVars(declaration.value);
+					}
+				});
+			}
+		}
+	});
+}
+//#endregion
+export { sanitizeNonInlinableRules };

package/dist/components/tailwind/utils/css/split-mixed-rule.cjs

@@ -0,0 +1,41 @@
+require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_is_part_inlinable = require("./is-part-inlinable.cjs");
+let css_tree = require("css-tree");
+//#region src/components/tailwind/utils/css/split-mixed-rule.ts
+/**
+* Split a rule into inlinable and non-inlinable parts. Caller must only pass rules
+* for which isRuleInlinable(rule) is false. Returns clones so the original stylesheet is never mutated.
+*
+* @returns inlinablePart: rule with only inlinable block children, or null if none.
+*          nonInlinablePart: rule with only non-inlinable block children, or null if none.
+*/
+function splitMixedRule(rule) {
+	if (rule.prelude !== null && (0, css_tree.find)(rule.prelude, (node) => node.type === "PseudoClassSelector" || node.type === "PseudoElementSelector") !== null) return {
+		inlinablePart: null,
+		nonInlinablePart: (0, css_tree.clone)(rule)
+	};
+	const ruleCloneInlinable = (0, css_tree.clone)(rule);
+	const ruleCloneNonInlinable = (0, css_tree.clone)(rule);
+	const inlinableParts = [];
+	const nonInlinableParts = [];
+	for (const part of ruleCloneInlinable.block.children.toArray()) if (require_is_part_inlinable.isPartInlinable(part)) inlinableParts.push(part);
+	else nonInlinableParts.push(part);
+	return {
+		inlinablePart: inlinableParts.length > 0 ? {
+			...ruleCloneInlinable,
+			block: {
+				type: "Block",
+				children: new css_tree.List().fromArray(inlinableParts)
+			}
+		} : null,
+		nonInlinablePart: nonInlinableParts.length > 0 ? {
+			...ruleCloneNonInlinable,
+			block: {
+				type: "Block",
+				children: new css_tree.List().fromArray(nonInlinableParts)
+			}
+		} : null
+	};
+}
+//#endregion
+exports.splitMixedRule = splitMixedRule;

package/dist/components/tailwind/utils/css/split-mixed-rule.mjs

@@ -0,0 +1,40 @@
+import { isPartInlinable } from "./is-part-inlinable.mjs";
+import { List, clone, find } from "css-tree/dist/csstree.esm";
+//#region src/components/tailwind/utils/css/split-mixed-rule.ts
+/**
+* Split a rule into inlinable and non-inlinable parts. Caller must only pass rules
+* for which isRuleInlinable(rule) is false. Returns clones so the original stylesheet is never mutated.
+*
+* @returns inlinablePart: rule with only inlinable block children, or null if none.
+*          nonInlinablePart: rule with only non-inlinable block children, or null if none.
+*/
+function splitMixedRule(rule) {
+	if (rule.prelude !== null && find(rule.prelude, (node) => node.type === "PseudoClassSelector" || node.type === "PseudoElementSelector") !== null) return {
+		inlinablePart: null,
+		nonInlinablePart: clone(rule)
+	};
+	const ruleCloneInlinable = clone(rule);
+	const ruleCloneNonInlinable = clone(rule);
+	const inlinableParts = [];
+	const nonInlinableParts = [];
+	for (const part of ruleCloneInlinable.block.children.toArray()) if (isPartInlinable(part)) inlinableParts.push(part);
+	else nonInlinableParts.push(part);
+	return {
+		inlinablePart: inlinableParts.length > 0 ? {
+			...ruleCloneInlinable,
+			block: {
+				type: "Block",
+				children: new List().fromArray(inlinableParts)
+			}
+		} : null,
+		nonInlinablePart: nonInlinableParts.length > 0 ? {
+			...ruleCloneNonInlinable,
+			block: {
+				type: "Block",
+				children: new List().fromArray(nonInlinableParts)
+			}
+		} : null
+	};
+}
+//#endregion
+export { splitMixedRule };

package/dist/components/tailwind/utils/css/strip-empty-tailwind-vars.cjs

@@ -0,0 +1,52 @@
+require("../../../../_virtual/_rolldown/runtime.cjs");
+let css_tree = require("css-tree");
+//#region src/components/tailwind/utils/css/strip-empty-tailwind-vars.ts
+/**
+* Tailwind v4 emits variant-stacking idioms like
+*   font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) tabular-nums var(--tw-numeric-fraction,)
+*   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-invert,) ...
+* where each var() has an empty fallback so missing variants collapse to nothing.
+* Tailwind deliberately leaves these variant vars undefined until used, so they
+* stay in the output here and produce unresolvable custom properties in email HTML
+* (no email client supports CSS custom properties reliably). Per the CSS spec
+* (https://www.w3.org/TR/css-variables-1/#using-variables) an empty fallback means
+* "use empty string if the variable is undefined", which is exactly what we want.
+*
+* Scoped to the `--tw-` prefix so any user-authored empty-fallback var() refs
+* are left untouched.
+*
+* Uses post-order traversal so an outer var(--tw-X, var(--tw-Y,)) collapses
+* correctly after the inner var() has been removed.
+*/
+function stripEmptyTailwindVars(node) {
+	(0, css_tree.walk)(node, {
+		visit: "Function",
+		leave(func, funcItem, funcList) {
+			if (func.name !== "var") return;
+			let variableName;
+			(0, css_tree.walk)(func, {
+				visit: "Identifier",
+				enter(identifier) {
+					variableName = identifier.name;
+					return this.break;
+				}
+			});
+			if (!variableName?.startsWith("--tw-")) return;
+			let sawComma = false;
+			let hasFallbackContent = false;
+			func.children.forEach((child) => {
+				if (!sawComma) {
+					if (child.type === "Operator" && child.value === ",") sawComma = true;
+					return;
+				}
+				let childValue = (0, css_tree.generate)(child).trim();
+				if (child.type === "Raw") childValue = childValue.replaceAll(/var\(--tw-[^,()]+,\s*\)/g, "").trim();
+				if (childValue.length > 0) hasFallbackContent = true;
+			});
+			if (!sawComma || hasFallbackContent) return;
+			funcList.remove(funcItem);
+		}
+	});
+}
+//#endregion
+exports.stripEmptyTailwindVars = stripEmptyTailwindVars;

package/dist/components/tailwind/utils/css/strip-empty-tailwind-vars.mjs

@@ -0,0 +1,51 @@
+import { generate, walk } from "css-tree/dist/csstree.esm";
+//#region src/components/tailwind/utils/css/strip-empty-tailwind-vars.ts
+/**
+* Tailwind v4 emits variant-stacking idioms like
+*   font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) tabular-nums var(--tw-numeric-fraction,)
+*   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-invert,) ...
+* where each var() has an empty fallback so missing variants collapse to nothing.
+* Tailwind deliberately leaves these variant vars undefined until used, so they
+* stay in the output here and produce unresolvable custom properties in email HTML
+* (no email client supports CSS custom properties reliably). Per the CSS spec
+* (https://www.w3.org/TR/css-variables-1/#using-variables) an empty fallback means
+* "use empty string if the variable is undefined", which is exactly what we want.
+*
+* Scoped to the `--tw-` prefix so any user-authored empty-fallback var() refs
+* are left untouched.
+*
+* Uses post-order traversal so an outer var(--tw-X, var(--tw-Y,)) collapses
+* correctly after the inner var() has been removed.
+*/
+function stripEmptyTailwindVars(node) {
+	walk(node, {
+		visit: "Function",
+		leave(func, funcItem, funcList) {
+			if (func.name !== "var") return;
+			let variableName;
+			walk(func, {
+				visit: "Identifier",
+				enter(identifier) {
+					variableName = identifier.name;
+					return this.break;
+				}
+			});
+			if (!variableName?.startsWith("--tw-")) return;
+			let sawComma = false;
+			let hasFallbackContent = false;
+			func.children.forEach((child) => {
+				if (!sawComma) {
+					if (child.type === "Operator" && child.value === ",") sawComma = true;
+					return;
+				}
+				let childValue = generate(child).trim();
+				if (child.type === "Raw") childValue = childValue.replaceAll(/var\(--tw-[^,()]+,\s*\)/g, "").trim();
+				if (childValue.length > 0) hasFallbackContent = true;
+			});
+			if (!sawComma || hasFallbackContent) return;
+			funcList.remove(funcItem);
+		}
+	});
+}
+//#endregion
+export { stripEmptyTailwindVars };

package/dist/components/tailwind/utils/css/unwrap-value.cjs

@@ -0,0 +1,7 @@
+//#region src/components/tailwind/utils/css/unwrap-value.ts
+function unwrapValue(value) {
+	if (value.type === "Value" && value.children.size === 1) return value.children.first ?? value;
+	return value;
+}
+//#endregion
+exports.unwrapValue = unwrapValue;

package/dist/components/tailwind/utils/css/unwrap-value.mjs

@@ -0,0 +1,7 @@
+//#region src/components/tailwind/utils/css/unwrap-value.ts
+function unwrapValue(value) {
+	if (value.type === "Value" && value.children.size === 1) return value.children.first ?? value;
+	return value;
+}
+//#endregion
+export { unwrapValue };

package/dist/components/tailwind/utils/react/is-component.cjs

@@ -0,0 +1,7 @@
+const require_element_marker = require("../../../element-marker.cjs");
+//#region src/components/tailwind/utils/react/is-component.ts
+const isComponent = (element) => {
+	return (typeof element.type === "function" || element.type.render !== void 0) && !(require_element_marker.elementMarker in element.type);
+};
+//#endregion
+exports.isComponent = isComponent;

package/dist/components/tailwind/utils/react/is-component.mjs

@@ -0,0 +1,7 @@
+import { elementMarker } from "../../../element-marker.mjs";
+//#region src/components/tailwind/utils/react/is-component.ts
+const isComponent = (element) => {
+	return (typeof element.type === "function" || element.type.render !== void 0) && !(elementMarker in element.type);
+};
+//#endregion
+export { isComponent };

package/dist/components/tailwind/utils/react/map-react-tree.cjs

@@ -0,0 +1,32 @@
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_is_component = require("./is-component.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+//#region src/components/tailwind/utils/react/map-react-tree.ts
+/**
+* A function made for deep mapping a React tree from a node, even through its components.
+* For all the components it finds, it renders them by directly calling them. This has a few issues
+* with hooks, and the only solution is `renderAsync` here, which will probably be done in the future.
+*
+* @param process - The callback that will be called every time a new element has been reached.
+*
+* For components, this is going to be called, most of the time, two times. This is because the best
+* approach is to process *both* before rendering the components (i.e. on the props.children of a component element)
+* and after rendering them because the children themselves might have been modified in the component's
+* rendering.
+*/
+function mapReactTree(value, process) {
+	const mapped = react.default.Children.map(value, (node) => {
+		if (react.default.isValidElement(node)) {
+			const newProps = { ...node.props };
+			if (node.props.children && !require_is_component.isComponent(node)) newProps.children = mapReactTree(node.props.children, process);
+			const processed = process(react.default.cloneElement(node, newProps, newProps.children));
+			if (react.default.isValidElement(processed) && require_is_component.isComponent(processed)) return mapReactTree((typeof processed.type === "object" ? processed.type.render : processed.type)(processed.props), process);
+			return processed;
+		}
+		return process(node);
+	});
+	return mapped && mapped.length === 1 ? mapped[0] : mapped;
+}
+//#endregion
+exports.mapReactTree = mapReactTree;