CSS variable declarations in media queries produce duplicate nested output

[jhildenbiddle]

Input:

@media screen and (min-width: 480px) {
    :root {
        --color: blue;
    }

    body {
        background: var(--color);
    }
}

Expected:

@media screen and (min-width: 480px) {
    body {
        background: blue;
    }
}

Actual output:

@media screen and (min-width: 480px) {

    body {
        background: blue;
    }

    @media screen and (min-width: 480px) {

        body {
        background: blue;
        }
    }
}

Reproducible using postcss-css-variables Playground.

[nolimit-developers]

Hello, @jhildenbiddle , will try this plugin https://github.com/hail2u/node-css-mqpacker :) It would be best if the css input was written in OOCSS.

[MadLittleMods]

Closing in favor of https://github.com/MadLittleMods/postcss-css-variables/issues/67