Stylus being able to use css variables inside stylus variables correctly.

[Ares328]

The problem:

If you define a test-color or test-spacing for example and assign it to stylus variables:

:root {
    --test-color: #047308;
    --test-spacing: 2px;
}
$test-color ?= var(--test-color);
$test-spacing?= var(--test-spacing);

.test
  background: $test-color;
  padding: $test-spacing;

This works just fine and you're able to manipulate the color/size dynamically with javascript.
But the moment you try and add for example rgba, hsla, ... for the colors or if you try and multiply the spacing you get a error cause the css variable isn't compiled to what stylus can understand.
example:

.test
  background: rgba($test-color, 0.7)
  spacing:  $test-spacing * 2;

Possible solution

Make sure the css variable is compiled before other infleunces happen to the variable?
I'm not exactly sure the what's or how's..

[vendethiel]

That’s not possible. CSS variables are dynamically scoped.

[Ares328]

Alright, unfortunate.

[cyfung1031]

the beauty of using custom style properties is that you can override them and apply dynamically.
It is no use to just put into :root

:root {
    --span-color: blue;
}

p > span.special {
  --span-color: red;
}

span {
  color: var(--span-color);
}

This color rule will be set as a very low priority and allow other rules to override it easily.
This feature cannot be achieved in the past.

Instead, you should do like this.

default-color = #047308

:root {
    --test-color: default-color;
}

and that default-color can be from the user config.

[Ares328]

I appreciate the quick reply, thank you that does make sense :)