When mixing vars with MQs, vars fallback if not redeclared

[mikestreety]

Quite a confusing title, I apologise. Essentially, if a variable is declared and altered in a MQ and then mixed in the same declaration as one that isn't, it falls back to its original value.

:root {
    --gutter: 1rem;
    --gutterLarge: 2rem;

    @include mq(tablet) {
        --gutter: 1.5rem;
        --gutterLarge: 3rem;
    }

    @include mq(desktop) {
        --gutterLarge: 4rem;
    }
}

div {
    padding: var(--gutter) var(--gutterLarge);
}

This will output:

div {
    padding:  1rem 2rem;
}

@media (min-width: 46.25em) {
    div {
        padding: 1.5rem 3rem;
    }
}

@media (min-width: 61.25em) {
    div {
        padding: 1rem 4rem;
    }
}

I would expect the last one to be 1.5rem 4rem.

[MadLittleMods]

@mikestreety Can you provide the output after the @include plugin runs so we know exactly what is being passed into postcss-css-variables? Also would help to add a full expected snippet instead of just explaining.

[mikestreety]

Ah sorry, it was where I was copying and pasting. It just expands into a media query.

So:

Input

:root {
    --gutter: 1rem;
    --gutterLarge: 2rem;

    @media (min-width: 46.25em) {
        --gutter: 1.5rem;
        --gutterLarge: 3rem;
    }

    @media (min-width: 61.25em) {
        --gutterLarge: 4rem;
    }
}

div {
    padding: var(--gutter) var(--gutterLarge);
}

Actual Output

div {
    padding:  1rem 2rem;
}

@media (min-width: 46.25em) {
    div {
        padding: 1.5rem 3rem;
    }
}

@media (min-width: 61.25em) {
    div {
        padding: 1rem 4rem;
    }
}

Expected output

div {
    padding:  1rem 2rem;
}

@media (min-width: 46.25em) {
    div {
        padding: 1.5rem 3rem;
    }
}

@media (min-width: 61.25em) {
    div {
        padding: 1.5rem 4rem;
    }
}

Note the padding in the last media query

Thanks!

[MadLittleMods]

@mikestreety Are you sure that is the actual input and output? It looks like you are using a nesting plugin

It seems like the input/output would be the following which isn't very clean but does seem to have the respective padding: 1rem 2rem;, padding: 1.5rem 3rem;, padding: 1rem 4rem; at various breakpoints as the last ones in the source which would apply.

Input

:root {
    --gutter: 1rem;
    --gutterLarge: 2rem;
}

@media (min-width: 46.25em) {
    :root {
        --gutter: 1.5rem;
        --gutterLarge: 3rem;
    }
}

@media (min-width: 61.25em) {
    :root {
        --gutterLarge: 4rem;
    }
}

div {
    padding: var(--gutter) var(--gutterLarge);
}

Output

div {
    padding: 1rem 2rem;
}

@media (min-width: 61.25em) {

    div {
    padding: 1rem 4rem;
    }
}

@media (min-width: 46.25em) {

    div {
    padding: 1.5rem 3rem;
    }
}

@media (min-width: 46.25em) {

    div {
    padding: 1.5rem 3rem;
    }
}

@media (min-width: 61.25em) {

    div {
    padding: 1rem 4rem;
    }
}

@media (min-width: 46.25em) {

    div {
    padding: 1.5rem 3rem;
    }
}

@media (min-width: 46.25em) {

    div {
    padding: 1.5rem 3rem;
    }
}

[mikestreety]

Sorry, I don't seem to be very good at this 😉 - the input is also processed by SCSS.

I will isolate the plugin and do some tests and get back to you 👍