react-email 6.7.0 → 6.8.1

package/dist/components/tailwind/utils/css/downlevel-for-email-clients.cjs

@@ -0,0 +1,126 @@
+require("../../../../_virtual/_rolldown/runtime.cjs");
+let css_tree = require("css-tree");
+//#region src/components/tailwind/utils/css/downlevel-for-email-clients.ts
+/**
+* Downlevels modern CSS features that email clients don't support,
+* operating on a css-tree StyleSheet AST.
+*
+* 1. CSS Nesting: unnests @media rules from inside selectors
+*    `.sm_p-4{@media (min-width:40rem){padding:1rem!important}}`
+*    → `@media (min-width:40rem){.sm_p-4{padding:1rem!important}}`
+*
+* 2. Media Queries Level 4 range syntax → legacy min-width/max-width
+*    `(width>=40rem)` → `(min-width:40rem)`
+*
+* Gmail, Outlook, Yahoo, and most email clients don't support either feature.
+* See: https://www.caniemail.com/features/css-at-media/
+*      https://www.caniemail.com/features/css-nesting/
+*/
+/**
+* Unnest @media at-rules from inside regular rules, and downlevel
+* range media query syntax to legacy min-width/max-width.
+*
+* Mutates the stylesheet in place.
+*/
+function downlevelForEmailClients(styleSheet) {
+	unnestMediaQueries(styleSheet);
+	downlevelRangeMediaQueries(styleSheet);
+}
+/**
+* Walk the stylesheet and unnest any @media/@supports rules that are nested
+* inside regular rules. For each, the parent Rule's selector wraps the
+* at-rule's body.
+*
+* Before: `.sm_p-4 { @media (...) { padding: 1rem } }`
+* After:  `@media (...) { .sm_p-4 { padding: 1rem } }`
+*/
+function unnestMediaQueries(styleSheet) {
+	const transforms = [];
+	(0, css_tree.walk)(styleSheet, {
+		visit: "Rule",
+		enter(rule, item, list) {
+			if (!rule.block || !item) return;
+			const nestedAtrules = [];
+			const remainingChildren = [];
+			rule.block.children.forEach((child) => {
+				if (child.type === "Atrule" && (child.name === "media" || child.name === "supports")) nestedAtrules.push(child);
+				else remainingChildren.push(child);
+			});
+			if (nestedAtrules.length > 0) transforms.push({
+				parentRule: rule,
+				parentItem: item,
+				parentList: list,
+				nestedAtrules,
+				remainingChildren
+			});
+		}
+	});
+	for (let i = transforms.length - 1; i >= 0; i--) {
+		const { parentRule, parentItem, parentList, nestedAtrules, remainingChildren } = transforms[i];
+		const replacements = new css_tree.List();
+		if (remainingChildren.length > 0) {
+			parentRule.block.children = new css_tree.List().fromArray(remainingChildren);
+			replacements.appendData(parentRule);
+		}
+		for (const atrule of nestedAtrules) {
+			const wrappedRule = {
+				type: "Rule",
+				prelude: (0, css_tree.clone)(parentRule.prelude),
+				block: {
+					type: "Block",
+					children: atrule.block ? atrule.block.children : new css_tree.List()
+				}
+			};
+			const newAtrule = {
+				type: "Atrule",
+				name: atrule.name,
+				prelude: atrule.prelude,
+				block: {
+					type: "Block",
+					children: new css_tree.List().fromArray([wrappedRule])
+				}
+			};
+			replacements.appendData(newAtrule);
+		}
+		parentList.replace(parentItem, replacements);
+	}
+}
+/**
+* Walk all nodes and downlevel range syntax (`FeatureRange`) inside @media
+* preludes to legacy `Feature` nodes (`min-width` / `max-width`).
+*/
+function downlevelRangeMediaQueries(styleSheet) {
+	const replacements = [];
+	(0, css_tree.walk)(styleSheet, { enter(originalNode, item) {
+		const node = originalNode;
+		if (item && node.type === "FeatureRange") {
+			const replacement = downlevelFeatureRange(node);
+			if (replacement) replacements.push({
+				item,
+				replacement
+			});
+		}
+	} });
+	for (const { item, replacement } of replacements) item.data = replacement;
+}
+/**
+* Convert a `FeatureRange` node to a `Feature` node (legacy min-/max- syntax).
+*
+* For `width >= 40rem`: left=Identifier("width"), leftComparison=">=", middle=Dimension("40","rem")
+* Result: { type: "Feature", name: "min-width", value: Dimension("40","rem") }
+*/
+function downlevelFeatureRange(range) {
+	if (range.left.type !== "Identifier") return null;
+	let prefix;
+	if (range.leftComparison === ">=" || range.leftComparison === ">") prefix = "min-";
+	else if (range.leftComparison === "<=" || range.leftComparison === "<") prefix = "max-";
+	else return null;
+	return {
+		type: "Feature",
+		kind: "media",
+		name: `${prefix}${range.left.name}`,
+		value: range.middle
+	};
+}
+//#endregion
+exports.downlevelForEmailClients = downlevelForEmailClients;

package/dist/components/tailwind/utils/css/downlevel-for-email-clients.mjs

@@ -0,0 +1,125 @@
+import { List, clone, walk } from "css-tree/dist/csstree.esm";
+//#region src/components/tailwind/utils/css/downlevel-for-email-clients.ts
+/**
+* Downlevels modern CSS features that email clients don't support,
+* operating on a css-tree StyleSheet AST.
+*
+* 1. CSS Nesting: unnests @media rules from inside selectors
+*    `.sm_p-4{@media (min-width:40rem){padding:1rem!important}}`
+*    → `@media (min-width:40rem){.sm_p-4{padding:1rem!important}}`
+*
+* 2. Media Queries Level 4 range syntax → legacy min-width/max-width
+*    `(width>=40rem)` → `(min-width:40rem)`
+*
+* Gmail, Outlook, Yahoo, and most email clients don't support either feature.
+* See: https://www.caniemail.com/features/css-at-media/
+*      https://www.caniemail.com/features/css-nesting/
+*/
+/**
+* Unnest @media at-rules from inside regular rules, and downlevel
+* range media query syntax to legacy min-width/max-width.
+*
+* Mutates the stylesheet in place.
+*/
+function downlevelForEmailClients(styleSheet) {
+	unnestMediaQueries(styleSheet);
+	downlevelRangeMediaQueries(styleSheet);
+}
+/**
+* Walk the stylesheet and unnest any @media/@supports rules that are nested
+* inside regular rules. For each, the parent Rule's selector wraps the
+* at-rule's body.
+*
+* Before: `.sm_p-4 { @media (...) { padding: 1rem } }`
+* After:  `@media (...) { .sm_p-4 { padding: 1rem } }`
+*/
+function unnestMediaQueries(styleSheet) {
+	const transforms = [];
+	walk(styleSheet, {
+		visit: "Rule",
+		enter(rule, item, list) {
+			if (!rule.block || !item) return;
+			const nestedAtrules = [];
+			const remainingChildren = [];
+			rule.block.children.forEach((child) => {
+				if (child.type === "Atrule" && (child.name === "media" || child.name === "supports")) nestedAtrules.push(child);
+				else remainingChildren.push(child);
+			});
+			if (nestedAtrules.length > 0) transforms.push({
+				parentRule: rule,
+				parentItem: item,
+				parentList: list,
+				nestedAtrules,
+				remainingChildren
+			});
+		}
+	});
+	for (let i = transforms.length - 1; i >= 0; i--) {
+		const { parentRule, parentItem, parentList, nestedAtrules, remainingChildren } = transforms[i];
+		const replacements = new List();
+		if (remainingChildren.length > 0) {
+			parentRule.block.children = new List().fromArray(remainingChildren);
+			replacements.appendData(parentRule);
+		}
+		for (const atrule of nestedAtrules) {
+			const wrappedRule = {
+				type: "Rule",
+				prelude: clone(parentRule.prelude),
+				block: {
+					type: "Block",
+					children: atrule.block ? atrule.block.children : new List()
+				}
+			};
+			const newAtrule = {
+				type: "Atrule",
+				name: atrule.name,
+				prelude: atrule.prelude,
+				block: {
+					type: "Block",
+					children: new List().fromArray([wrappedRule])
+				}
+			};
+			replacements.appendData(newAtrule);
+		}
+		parentList.replace(parentItem, replacements);
+	}
+}
+/**
+* Walk all nodes and downlevel range syntax (`FeatureRange`) inside @media
+* preludes to legacy `Feature` nodes (`min-width` / `max-width`).
+*/
+function downlevelRangeMediaQueries(styleSheet) {
+	const replacements = [];
+	walk(styleSheet, { enter(originalNode, item) {
+		const node = originalNode;
+		if (item && node.type === "FeatureRange") {
+			const replacement = downlevelFeatureRange(node);
+			if (replacement) replacements.push({
+				item,
+				replacement
+			});
+		}
+	} });
+	for (const { item, replacement } of replacements) item.data = replacement;
+}
+/**
+* Convert a `FeatureRange` node to a `Feature` node (legacy min-/max- syntax).
+*
+* For `width >= 40rem`: left=Identifier("width"), leftComparison=">=", middle=Dimension("40","rem")
+* Result: { type: "Feature", name: "min-width", value: Dimension("40","rem") }
+*/
+function downlevelFeatureRange(range) {
+	if (range.left.type !== "Identifier") return null;
+	let prefix;
+	if (range.leftComparison === ">=" || range.leftComparison === ">") prefix = "min-";
+	else if (range.leftComparison === "<=" || range.leftComparison === "<") prefix = "max-";
+	else return null;
+	return {
+		type: "Feature",
+		kind: "media",
+		name: `${prefix}${range.left.name}`,
+		value: range.middle
+	};
+}
+//#endregion
+export { downlevelForEmailClients };

package/dist/components/tailwind/utils/css/extract-rules-per-class.cjs

@@ -0,0 +1,45 @@
+require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_is_rule_inlinable = require("./is-rule-inlinable.cjs");
+const require_split_mixed_rule = require("./split-mixed-rule.cjs");
+let css_tree = require("css-tree");
+//#region src/components/tailwind/utils/css/extract-rules-per-class.ts
+function extractRulesPerClass(root, classes) {
+	const classSet = new Set(classes);
+	const inlinableRules = /* @__PURE__ */ new Map();
+	const nonInlinableRules = /* @__PURE__ */ new Map();
+	const appendRule = (map, className, rule) => {
+		const existing = map.get(className);
+		if (existing) existing.push(rule);
+		else map.set(className, [rule]);
+	};
+	(0, css_tree.walk)(root, {
+		visit: "Rule",
+		enter(rule) {
+			const firstSelector = rule.prelude.type === "SelectorList" ? rule.prelude.children.first : null;
+			if (firstSelector?.type === "Selector" && firstSelector.children.first?.type === "NestingSelector") return;
+			const selectorClasses = [];
+			(0, css_tree.walk)(rule.prelude, {
+				visit: "ClassSelector",
+				enter(classSelector) {
+					selectorClasses.push(css_tree.string.decode(classSelector.name));
+				}
+			});
+			if (require_is_rule_inlinable.isRuleInlinable(rule)) {
+				for (const className of selectorClasses) if (classSet.has(className)) appendRule(inlinableRules, className, rule);
+			} else {
+				const { inlinablePart, nonInlinablePart } = require_split_mixed_rule.splitMixedRule(rule);
+				for (const className of selectorClasses) {
+					if (!classSet.has(className)) continue;
+					if (inlinablePart) appendRule(inlinableRules, className, inlinablePart);
+					if (nonInlinablePart) appendRule(nonInlinableRules, className, nonInlinablePart);
+				}
+			}
+		}
+	});
+	return {
+		inlinable: inlinableRules,
+		nonInlinable: nonInlinableRules
+	};
+}
+//#endregion
+exports.extractRulesPerClass = extractRulesPerClass;

package/dist/components/tailwind/utils/css/extract-rules-per-class.mjs

@@ -0,0 +1,44 @@
+import { isRuleInlinable } from "./is-rule-inlinable.mjs";
+import { splitMixedRule } from "./split-mixed-rule.mjs";
+import { string, walk } from "css-tree/dist/csstree.esm";
+//#region src/components/tailwind/utils/css/extract-rules-per-class.ts
+function extractRulesPerClass(root, classes) {
+	const classSet = new Set(classes);
+	const inlinableRules = /* @__PURE__ */ new Map();
+	const nonInlinableRules = /* @__PURE__ */ new Map();
+	const appendRule = (map, className, rule) => {
+		const existing = map.get(className);
+		if (existing) existing.push(rule);
+		else map.set(className, [rule]);
+	};
+	walk(root, {
+		visit: "Rule",
+		enter(rule) {
+			const firstSelector = rule.prelude.type === "SelectorList" ? rule.prelude.children.first : null;
+			if (firstSelector?.type === "Selector" && firstSelector.children.first?.type === "NestingSelector") return;
+			const selectorClasses = [];
+			walk(rule.prelude, {
+				visit: "ClassSelector",
+				enter(classSelector) {
+					selectorClasses.push(string.decode(classSelector.name));
+				}
+			});
+			if (isRuleInlinable(rule)) {
+				for (const className of selectorClasses) if (classSet.has(className)) appendRule(inlinableRules, className, rule);
+			} else {
+				const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
+				for (const className of selectorClasses) {
+					if (!classSet.has(className)) continue;
+					if (inlinablePart) appendRule(inlinableRules, className, inlinablePart);
+					if (nonInlinablePart) appendRule(nonInlinableRules, className, nonInlinablePart);
+				}
+			}
+		}
+	});
+	return {
+		inlinable: inlinableRules,
+		nonInlinable: nonInlinableRules
+	};
+}
+//#endregion
+export { extractRulesPerClass };

package/dist/components/tailwind/utils/css/get-custom-properties.cjs

@@ -0,0 +1,35 @@
+require("../../../../_virtual/_rolldown/runtime.cjs");
+let css_tree = require("css-tree");
+//#region src/components/tailwind/utils/css/get-custom-properties.ts
+function getCustomProperties(node) {
+	const customProperties = /* @__PURE__ */ new Map();
+	(0, css_tree.walk)(node, {
+		visit: "Atrule",
+		enter(atrule) {
+			if (atrule.name === "property" && atrule.prelude) {
+				const prelude = (0, css_tree.generate)(atrule.prelude);
+				if (prelude.startsWith("--")) {
+					let syntax;
+					let inherits;
+					let initialValue;
+					(0, css_tree.walk)(atrule, {
+						visit: "Declaration",
+						enter(declaration) {
+							if (declaration.property === "syntax") syntax = declaration;
+							if (declaration.property === "inherits") inherits = declaration;
+							if (declaration.property === "initial-value") initialValue = declaration;
+						}
+					});
+					customProperties.set(prelude, {
+						syntax,
+						inherits,
+						initialValue
+					});
+				}
+			}
+		}
+	});
+	return customProperties;
+}
+//#endregion
+exports.getCustomProperties = getCustomProperties;

package/dist/components/tailwind/utils/css/get-custom-properties.mjs

@@ -0,0 +1,34 @@
+import { generate, walk } from "css-tree/dist/csstree.esm";
+//#region src/components/tailwind/utils/css/get-custom-properties.ts
+function getCustomProperties(node) {
+	const customProperties = /* @__PURE__ */ new Map();
+	walk(node, {
+		visit: "Atrule",
+		enter(atrule) {
+			if (atrule.name === "property" && atrule.prelude) {
+				const prelude = generate(atrule.prelude);
+				if (prelude.startsWith("--")) {
+					let syntax;
+					let inherits;
+					let initialValue;
+					walk(atrule, {
+						visit: "Declaration",
+						enter(declaration) {
+							if (declaration.property === "syntax") syntax = declaration;
+							if (declaration.property === "inherits") inherits = declaration;
+							if (declaration.property === "initial-value") initialValue = declaration;
+						}
+					});
+					customProperties.set(prelude, {
+						syntax,
+						inherits,
+						initialValue
+					});
+				}
+			}
+		}
+	});
+	return customProperties;
+}
+//#endregion
+export { getCustomProperties };

package/dist/components/tailwind/utils/css/is-part-inlinable.cjs

@@ -0,0 +1,10 @@
+require("../../../../_virtual/_rolldown/runtime.cjs");
+let css_tree = require("css-tree");
+//#region src/components/tailwind/utils/css/is-part-inlinable.ts
+function isPartInlinable(part) {
+	const hasAtRuleInside = (0, css_tree.find)(part, (node) => node.type === "Atrule") !== null;
+	const hasPseudoSelector = (0, css_tree.find)(part, (node) => node.type === "PseudoClassSelector" || node.type === "PseudoElementSelector") !== null;
+	return !hasAtRuleInside && !hasPseudoSelector;
+}
+//#endregion
+exports.isPartInlinable = isPartInlinable;

package/dist/components/tailwind/utils/css/is-part-inlinable.mjs

@@ -0,0 +1,9 @@
+import { find } from "css-tree/dist/csstree.esm";
+//#region src/components/tailwind/utils/css/is-part-inlinable.ts
+function isPartInlinable(part) {
+	const hasAtRuleInside = find(part, (node) => node.type === "Atrule") !== null;
+	const hasPseudoSelector = find(part, (node) => node.type === "PseudoClassSelector" || node.type === "PseudoElementSelector") !== null;
+	return !hasAtRuleInside && !hasPseudoSelector;
+}
+//#endregion
+export { isPartInlinable };

package/dist/components/tailwind/utils/css/is-rule-inlinable.cjs

@@ -0,0 +1,10 @@
+require("../../../../_virtual/_rolldown/runtime.cjs");
+let css_tree = require("css-tree");
+//#region src/components/tailwind/utils/css/is-rule-inlinable.ts
+function isRuleInlinable(rule) {
+	const hasAtRuleInside = (0, css_tree.find)(rule, (node) => node.type === "Atrule") !== null;
+	const hasPseudoSelector = (0, css_tree.find)(rule, (node) => node.type === "PseudoClassSelector" || node.type === "PseudoElementSelector") !== null;
+	return !hasAtRuleInside && !hasPseudoSelector;
+}
+//#endregion
+exports.isRuleInlinable = isRuleInlinable;

package/dist/components/tailwind/utils/css/is-rule-inlinable.mjs

@@ -0,0 +1,9 @@
+import { find } from "css-tree/dist/csstree.esm";
+//#region src/components/tailwind/utils/css/is-rule-inlinable.ts
+function isRuleInlinable(rule) {
+	const hasAtRuleInside = find(rule, (node) => node.type === "Atrule") !== null;
+	const hasPseudoSelector = find(rule, (node) => node.type === "PseudoClassSelector" || node.type === "PseudoElementSelector") !== null;
+	return !hasAtRuleInside && !hasPseudoSelector;
+}
+//#endregion
+export { isRuleInlinable };

package/dist/components/tailwind/utils/css/make-inline-styles-for.cjs

@@ -0,0 +1,52 @@
+require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_get_react_property = require("../compatibility/get-react-property.cjs");
+const require_strip_empty_tailwind_vars = require("./strip-empty-tailwind-vars.cjs");
+const require_unwrap_value = require("./unwrap-value.cjs");
+let css_tree = require("css-tree");
+//#region src/components/tailwind/utils/css/make-inline-styles-for.ts
+function makeInlineStylesFor(inlinableRules, customProperties) {
+	const styles = {};
+	const localVariableDeclarations = /* @__PURE__ */ new Map();
+	for (const rule of inlinableRules) (0, css_tree.walk)(rule, {
+		visit: "Declaration",
+		enter(declaration) {
+			if (declaration.property.startsWith("--")) localVariableDeclarations.set(declaration.property, declaration);
+		}
+	});
+	for (const rule of inlinableRules) {
+		(0, css_tree.walk)(rule, {
+			visit: "Function",
+			enter(func, funcParentListItem) {
+				if (func.name === "var") {
+					let variableName;
+					(0, css_tree.walk)(func, {
+						visit: "Identifier",
+						enter(identifier) {
+							variableName = identifier.name;
+							return this.break;
+						}
+					});
+					if (variableName) {
+						const definition = localVariableDeclarations.get(variableName);
+						if (definition) funcParentListItem.data = require_unwrap_value.unwrapValue(definition.value);
+						else {
+							const customProperty = customProperties.get(variableName);
+							if (customProperty?.initialValue) funcParentListItem.data = require_unwrap_value.unwrapValue(customProperty.initialValue.value);
+						}
+					}
+				}
+			}
+		});
+		(0, css_tree.walk)(rule, {
+			visit: "Declaration",
+			enter(declaration) {
+				if (declaration.property.startsWith("--")) return;
+				require_strip_empty_tailwind_vars.stripEmptyTailwindVars(declaration.value);
+				styles[require_get_react_property.getReactProperty(declaration.property)] = (0, css_tree.generate)(declaration.value).trim() + (declaration.important ? "!important" : "");
+			}
+		});
+	}
+	return styles;
+}
+//#endregion
+exports.makeInlineStylesFor = makeInlineStylesFor;

package/dist/components/tailwind/utils/css/make-inline-styles-for.mjs

@@ -0,0 +1,51 @@
+import { getReactProperty } from "../compatibility/get-react-property.mjs";
+import { stripEmptyTailwindVars } from "./strip-empty-tailwind-vars.mjs";
+import { unwrapValue } from "./unwrap-value.mjs";
+import { generate, walk } from "css-tree/dist/csstree.esm";
+//#region src/components/tailwind/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;
+				stripEmptyTailwindVars(declaration.value);
+				styles[getReactProperty(declaration.property)] = generate(declaration.value).trim() + (declaration.important ? "!important" : "");
+			}
+		});
+	}
+	return styles;
+}
+//#endregion
+export { makeInlineStylesFor };

package/dist/components/tailwind/utils/css/resolve-all-css-variables.cjs

@@ -0,0 +1,89 @@
+require("../../../../_virtual/_rolldown/runtime.cjs");
+let css_tree = require("css-tree");
+//#region src/components/tailwind/utils/css/resolve-all-css-variables.ts
+function doSelectorsIntersect(first, second) {
+	if ((0, css_tree.generate)(first) === (0, css_tree.generate)(second)) return true;
+	let hasSomeUniversal = false;
+	const walker = (node, _parentListItem, parentList) => {
+		if (hasSomeUniversal) return;
+		if (node.type === "PseudoClassSelector" && node.name === "root") hasSomeUniversal = true;
+		if (node.type === "TypeSelector" && node.name === "*" && parentList.size === 1) hasSomeUniversal = true;
+	};
+	(0, css_tree.walk)(first, walker);
+	(0, css_tree.walk)(second, walker);
+	if (hasSomeUniversal) return true;
+	return false;
+}
+function resolveAllCssVariables(node) {
+	const variableDefinitions = /* @__PURE__ */ new Set();
+	const variableUses = /* @__PURE__ */ new Set();
+	const path = [];
+	(0, css_tree.walk)(node, {
+		leave() {
+			path.shift();
+		},
+		enter(node) {
+			if (node.type === "Declaration") {
+				const declaration = node;
+				if (path.some((ancestor) => ancestor.type === "Atrule" && ancestor.name === "layer" && ancestor.prelude !== null && (0, css_tree.generate)(ancestor.prelude).includes("properties"))) {
+					path.unshift(node);
+					return;
+				}
+				if (/--[\S]+/.test(declaration.property)) variableDefinitions.add({
+					declaration,
+					path: [...path],
+					variableName: declaration.property,
+					definition: (0, css_tree.generate)(declaration.value)
+				});
+				else {
+					function parseVariableUsesFrom(node) {
+						(0, css_tree.walk)(node, {
+							visit: "Function",
+							enter(funcNode) {
+								if (funcNode.name === "var") {
+									const children = funcNode.children.toArray();
+									const name = (0, css_tree.generate)(children[0]);
+									const fallback = children[2] ? (0, css_tree.generate)(children[2]) : void 0;
+									variableUses.add({
+										declaration,
+										path: [...path],
+										fallback,
+										variableName: name,
+										raw: (0, css_tree.generate)(funcNode)
+									});
+									if (fallback?.includes("var(")) parseVariableUsesFrom((0, css_tree.parse)(fallback, { context: "value" }));
+								}
+							}
+						});
+					}
+					parseVariableUsesFrom(declaration.value);
+				}
+			}
+			path.unshift(node);
+		}
+	});
+	for (const use of variableUses) {
+		let hasReplaced = false;
+		for (const definition of variableDefinitions) {
+			if (use.variableName !== definition.variableName) continue;
+			if (use.path[0]?.type === "Block" && use.path[1]?.type === "Atrule" && use.path[2]?.type === "Block" && use.path[3]?.type === "Rule" && definition.path[0].type === "Block" && definition.path[1].type === "Rule" && doSelectorsIntersect(use.path[3].prelude, definition.path[1].prelude)) {
+				use.declaration.value = (0, css_tree.parse)((0, css_tree.generate)(use.declaration.value).replaceAll(use.raw, definition.definition), { context: "value" });
+				hasReplaced = true;
+				break;
+			}
+			if (use.path[0]?.type === "Block" && use.path[1]?.type === "Rule" && definition.path[0]?.type === "Block" && definition.path[1]?.type === "Rule" && doSelectorsIntersect(use.path[1].prelude, definition.path[1].prelude)) {
+				use.declaration.value = (0, css_tree.parse)((0, css_tree.generate)(use.declaration.value).replaceAll(use.raw, definition.definition), { context: "value" });
+				hasReplaced = true;
+				break;
+			}
+			if (use.path[0]?.type === "Block" && use.path[1]?.type === "Atrule" && use.path[2]?.type === "Block" && use.path[3]?.type === "Rule" && definition.path[0]?.type === "Block" && definition.path[1]?.type === "Atrule" && definition.path[2]?.type === "Block" && definition.path[3]?.type === "Rule" && use.path[1].name === definition.path[1].name && (use.path[1].prelude ? definition.path[1].prelude ? (0, css_tree.generate)(use.path[1].prelude) === (0, css_tree.generate)(definition.path[1].prelude) : false : definition.path[1].prelude === null) && doSelectorsIntersect(use.path[3].prelude, definition.path[3].prelude)) {
+				use.declaration.value = (0, css_tree.parse)((0, css_tree.generate)(use.declaration.value).replaceAll(use.raw, definition.definition), { context: "value" });
+				hasReplaced = true;
+				break;
+			}
+		}
+		if (!hasReplaced && use.fallback) use.declaration.value = (0, css_tree.parse)((0, css_tree.generate)(use.declaration.value).replaceAll(use.raw, use.fallback), { context: "value" });
+	}
+}
+//#endregion
+exports.resolveAllCssVariables = resolveAllCssVariables;