Max CSS variable depth

Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.

You're attempting to animate to a CSS variable that contains another CSS variable as a fallback.

animate(element, { color: "var(--alert, var(--background))" })

Or points to another CSS variable:

div {
  --alert: var(--background);
}

Explanation

In the above example, if —-alert is undefined, we need a color to animate to. So we use the CSS variable fallback. Or it points to another CSS variable.

When the fallback value is a CSS variable, we need to then resolve this fallback CSS variable. If the fallback itself resolves to another CSS variable that contains a CSS variable as fallback value, we need to resolve that, and so on.

If this sounds unlikely - it is. It is rare to have deep chains of fallback values defined in this way. What's more likely is a circular dependency.

div {
  --alert: var(--background);
  --background: var(--alert);
}

Solution

Fix the circular dependency. Motion will attempt to resolve 4 CSS variables before throwing this error.

animate(element, { color: "var(--alert, #fff)" })

Or:

div {
  --red: #f00;
  --alert: var(--red);
  --background: var(--red);
}