How to add a CSS var() into a stylus built-in function?

Question

I tried this:

:root {
  --primary-color: $black
}

$secondary-color = "lighten(%s, 20%)" % var(--primary-color)

(I took it from here: How to use a Stylus variable in calc?)

I don't receive any errors. However, $secondary-color doesn't render any color.

What's the best way of doing this?

The result is this:

background-color: lighten(var(--primary-color), 20%) so I think something is not rendering well.

Answer 1

This is not going to work because 1. lighten is a pre-processor function that's executed at compile-time while interpolation is just passing through all the stuff and 2. lighten isn't supposed to work with css variables at all because it's extracting numerical values from a color in order to compute another color at compile-time which in case of a css variable just isn't known at that time and furthermore 3. in css this isn't even possible with a css variable containing a full color definition and so a pre-processor couldn't do either: in order to make color mixing work at run-time you would need to break it up like var(--primary-h), var(--primary-s) and var-primary-l and use calc to operate on the values separately.