var() doesn’t work when used in media query statement

[paulrobertlloyd]

For the following CSS:

:root {
    --breakpoint_a: 32em;
    --breakpoint_b: 48em;
    --breakpoint_c: 64em;
}

@media screen and (min-width: var(--breakpoint_a)) {
    .container {
        background-color: red;
    }
}
@media screen and (min-width: var(--breakpoint_b)) {
    .container {
        background-color: blue;
    }
}
@media screen and (min-width: var(--breakpoint_c)) {
    .container {
        background-color: green;
    }
}

the following CSS is generated:

@media screen and (min-width: var(--breakpoint_a)) {
    .container {
        background-color: red;
    }
}
@media screen and (min-width: var(--breakpoint_b)) {
    .container {
        background-color: blue;
    }
}
@media screen and (min-width: var(--breakpoint_c)) {
    .container {
        background-color: green;
    }
}

Variables work when used as values inside a media query, but not when part of the actual query statement.

[carlcs]

Duplicate of #40

[paulrobertlloyd]

Oh, I see this is a much more complicated issue that I had initially realised. Apologies for the dupe! Closing.