Variables within functions do not resolve

[kaisellgren]

It seems that variables are not resolved when used with functions such as:

:root {
  --foo: hsl(200, 50%, 50%);
}

a {
  color: var(--foo);
}

The compiled output has color: var(--foo); but I expected to also see the actual color in the output for backwards compatibility for IE (IE does not support CSS variables).

This is what I should see instead:

a {
  color: hsl(200, 50%, 50%);
}

[jonathantneal]

I tested the following CSS @ https://preset-env.cssdb.org/playground:

:root {
  --foo: hsl(200, 50%, 50%);
}

a {
  color: var(--foo);
}

I set the browserslist to ie >= 11 and observed the following result:

:root {
  --foo: hsl(200, 50%, 50%);
}

a {
  color: hsl(200, 50%, 50%);
  color: var(--foo);
}

Is it possible that Internet Explorer usage has dropped globally to a point where you must force your browserslist to include support for it? I know I’ve had to explicitly add it for clients when their own analytics do not reflect global usage.