Scoping issue on multiple class attributes - `undefined`

[WolfgangKluge]

I am using postcss-nested and postcss-css-variables plugins in the order as mentioned.

I don't know which plugin is to blame, but if I have something like:

.test {
    --a: 10px;
    &.sub {
        width: var(--a);
    }
}

I get:

.test.sub {
    width: undefined;
}

If I add whitespace between & and .sub, it works as expected (apart from the fact it's no multiple class attribute anymore g). Even if I switch the order of the plugins, it works (but I've no idea what will not work then)...

[MadLittleMods]

@WolfgangKluge Thanks for the issue. This is currently not implemented.

I will be sure to include this scope feature in the new refactor with postcss-selector-parser.

---

When you add whitespace between & and .sub, after running through postcss-nested it results in .test .sub which is a descendant selector which postcss-css-variables can handle.

When you switch the order of the plugins(postcss-css-variables first), the variable is available in the outer/ancestor .test scope still because postcss-nested hasn't expanded it yet. But this has the side-effect of & not being referenced properly (in this simple test use-case, no effect).

I am trying to come up with an example that shows off the conflict but I can't think of one at the moment. It is a possibility that it doesn't matter which order but I am not ruling that yet because I thought I had a use case.

[WolfgangKluge]

so, no workaround at the moment..

[stephenway]

This appears to be working on the latest and this issue can be closed.

[MadLittleMods]

@stephenway :+1: Thanks for catching this :grinning:

[stephenway]

no prob :)