Is this not supported yet?

[sty1iss]

I can't search this case, because my english. result was not like my thought.

before

:root {
    --head-color: red;
}

h2 {
    --head-color: green;
}

h1,
h2 {
    color: var(--head-color);
}

@media (max-width: 1000px) {
    :root {
        --head-color: blue;
    }

    h2 {
        --head-color: yellow;
    }
}

after

:root {
    --head-color: red;
}

h2 {
    --head-color: green;
}

h1,
h2 {
    color: red;
    color: var(--head-color);
}

@media (max-width: 1000px) {
    :root {
        --head-color: blue;
    }

    h2 {
        --head-color: yellow;
    }
}

as i want

:root {
    --head-color: red;
}

h2 {
    --head-color: green;
}

h1,
h2 {
    color:red;
    color: var(--head-color);
}

h2 {
    color:blue;
    color: var(--head-color);
}

@media (max-width: 1000px) {
    :root {
        --head-color: blue;
    }

    h2 {
        --head-color: yellow;
    }

    h1 {
        color:blue;
        color: var(--head-color);
    }

    h2 {
        color:yellow;
        color: var(--head-color);
    }
}

[sty1iss]

I Found postcss-css-variables for this case. anyway thanks for learned difference.