Resolving Dependency Cycles not work

[hxfdarling]

version: 8.0.9

:root{
  --green: var(--customGreen, #08cb6a);
  --primary: var(--customPrimary, var(--green));
}
.test {
  background: color(var(--primary) shade(5%));
  //output
  background: var(--green);
  background: var(--primary);
  // expect
  background: #08cb6a;
  background: var(--primary);
}

[alexbrazier]

This should be fixed as the above code is a valid way of using CSS variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Custom_Property_fallback_values

Including a custom property as a fallback, as seen in the second example above, is the correct way to provide more than one fallback.

[alexbrazier]

I've done some digging into this and it only seems to be an issue when you define a css variable that is being used.

e.g.

background: var(--primary, var(--primary-default, #fff));

works and returns:

background: #fff;
background: var(--primary, var(--primary-default, #fff));

But

--primary-default: #aaa;
background: var(--primary, var(--primary-default, #fff));

Results in:

--primary-default: #aaa;
background: var(--primary-default, #fff);
background: var(--primary, var(--primary-default, #fff));

[calebdwilliams]

Running into a similar issue, I have something like this

:root {
  --primary: tomato;
}

.btn {
  background: var(--override, var(--primary));
}

the output I'm getting is

:root {
  --primary: tomato;
}

.btn {
  background: var(--primary);
  background: var(--override, var(--primary));
}

and the expected output is

:root {
  --primary: tomato;
}

.btn {
  background: tomato;
  background: var(--override, var(--primary));
}

This is a trivial example, of course, the actual goal of this work is to build out a customizable design system using design tokens, such that for a given project, any consumer could override the system tokens at runtime. Obviously the overrides won't be respected in non-supporting browsers, but the default system should still be in place.

[calebdwilliams]

Also, I'm more than happy to contribute to this project to make the above possible if I could get a little guidance on where to start.