How can I substitute CSS variables with visitors

[nix6839]

I want to substitute specific CSS variables (like --space-n).
Example:

/* Before */
.foo {
	padding-inline: var(--space-1);
	padding-block: var(--space-3);
}

:root {
	--space-1: calc(0.25rem * 1);
	--space-2: calc(0.25rem * 2);
	--space-3: calc(0.25rem * 3);
}

/* After */
.foo {
	padding-inline: calc(0.25rem * 1);
	padding-block: calc(0.25rem * 3);
}

In the PostCSS plugin, I was collecting the names and values of variables, as well as the declarations where the actual variables are being used, and then substituting them all at once at the end:

import type {PluginCreator, Declaration } from 'postcss';

const postcssSubstitutionSpaceVariables: PluginCreator<never> = () => {
	const spaceVarValueMap = new Map<string, string>();
	const declsUsingSpaceVar = new Set<Declaration>();

	return {
		postcssPlugin: 'substitution-space-variables',
		Declaration: (decl) => {
			if (/^--space-\d{1,2}$/.test(decl.prop)) {
				spaceVarValueMap.set(decl.prop, decl.value);
				decl.remove();
			} else if (/^var\(--space-\d{1,2}\)$/.test(decl.value)) {
				declsUsingSpaceVar.add(decl);
			}
		},
		RootExit: () => {
			for (const declUsingSpaceVar of declsUsingSpaceVar.values()) {
				const matched = /^var\((--space-\d{1,2})\)$/.exec(
					declUsingSpaceVar.value,
				);
				if (matched === null) {
					return;
				}
				const spaceVar = matched[1];
				const actualSpaceVarValue = spaceVarValueMap.get(spaceVar);
				if (actualSpaceVarValue === undefined) {
					return;
				}
				declUsingSpaceVar.value = actualSpaceVarValue;
				declsUsingSpaceVar.delete(declUsingSpaceVar);
			}
		},
	};
};
postcssSubstitutionSpaceVariables.postcss = true;

I tried a similar approach in Lightning CSS's visitor as I did with the PostCSS plugin (it's not exactly the same due to Lightning CSS visitors modifying CSS by returning values from functions):

import type { TokenOrValue, Visitor } from 'lightningcss';

const spaceVariableRegex = /^--space-\d{1,2}$/;
const spaceVarValueMap = new Map<string, TokenOrValue[]>();
const substitutionSpaceVariablesVisitor: Visitor<never> = {
	Declaration(property) {
		if (
			property.property === 'custom'
			&& spaceVariableRegex.test(property.value.name)
		) {
			spaceVarValueMap.set(property.value.name, property.value.value);
			return [];
		}
	},
	Variable(variable) {
		if (spaceVariableRegex.test(variable.name.ident)) {
			const actualSpaceVarValue = spaceVarValueMap.get(variable.name.ident);
			if (actualSpaceVarValue === undefined) {
				return;
			}
			return actualSpaceVarValue;
		}
	},
};

But Variable() is called before Declaration(), so the substitution does not work. Of course, I am aware that it would work if the variables were defined before their actual use. However, I cannot arbitrarily control the order because I am using framework like Vite.

Could someone give me any ideas or hints on which visitor to use for this?
Thank you for reading my long question.

P.S. Lightning CSS is really awesome! Big thanks to the maintainers and contributors!