Edge case nesting causing no substitution

[satazor]

Hello,

I've found an edge case where variables are not being substituted. The above code uses postcss-nesting which is set to run before the postcss-css-variables.

.discussion-fab {
    background-color: var(--color-white);

    &::after {
        content: "";
        box-shadow: inset 0 0 0 0 var(--color-white);
    }

    &.active,
    &:focus {
        background-color: var(--color-science-blue);

        &:hover::after {
            /* This doesn't get substituted! */
            box-shadow: inset 0 0 0 0 var(--color-white);
        }
    }
}

The above works but the :focus and .active had to be duplicated:

.discussion-fab {
    background-color: var(--color-white);

    &::after {
        content: "";
        box-shadow: inset 0 0 0 0 var(--color-white);
    }

    &.active {
        background-color: var(--color-science-blue);

        &:hover::after {
            box-shadow: inset 0 0 0 0 var(--color-white);
        }
    }

    &:focus {
        background-color: var(--color-science-blue);

        &:hover::after {
            box-shadow: inset 0 0 0 0 var(--color-white);
        }
    }
}

I'm unsure how to create a test case. The nesting fixtures don't resemble postcss-nesting syntax.

[MadLittleMods]

Hey @satazor,

We recommend running postcss-nesting before postcss-css-variables, https://github.com/MadLittleMods/postcss-css-variables#nested-rules. It's unclear to me why there are still & nested selectors in your output after running postcss-nesting.

Please provide the input right before it goes into postcss-css-variables, the actual output, and the expected output.

[satazor]

Yes I’m setting postcss-css-variables after the nesting.

The actual code I pasted above was the original css code before any transformations. I will provide what you requested once I arrive home.

Thanks for the help so far.

[satazor]

I haven't still got time but it's on my TODO list!

[satazor]

You were right after all @MadLittleMods. Thanks!