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

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
@@ -19466,48 +19447,26 @@ 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, {
@@ -19594,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",
@@ -19636,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);
@@ -19654,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));
@@ -19666,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;
 }
 

package/dist/index.mjs

@@ -1077,9 +1077,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;
@@ -1362,8 +1360,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);
@@ -4798,8 +4795,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,
@@ -19088,9 +19084,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;
@@ -19102,12 +19096,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;
@@ -19125,11 +19113,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) {
@@ -19146,10 +19131,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" }));
 							}
 						}
 					});
@@ -19175,7 +19157,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
@@ -19464,48 +19445,26 @@ 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, {
@@ -19592,10 +19551,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",
@@ -19634,10 +19590,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.cloneElement(node, newProps, newProps.children));
-			if (React.isValidElement(processed) && isComponent(processed)) {
-				const rendered = (typeof processed.type === "object" ? processed.type.render : processed.type)(processed.props);
-				return mapReactTree(rendered, process);
-			}
+			if (React.isValidElement(processed) && isComponent(processed)) return mapReactTree((typeof processed.type === "object" ? processed.type.render : processed.type)(processed.props), process);
 			return processed;
 		}
 		return process(node);
@@ -19652,8 +19605,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));
@@ -19664,12 +19617,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;
 }