postcss-custom-properties test for full support. Is this correct ?

input.css

:root,
.light {
  --color: black;
}

.dark,
.light--inverted {
  --color: white;
}

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

a,
.link {
  color: var(--color);
}

#important {
  --color: red
}

output.css

p,
.light p,
p.light {background: black;}

.dark p,
p.dark,
.light--inverted p,
p.light--inverted {background: white;}

#important p,
p#important {background: red;}

a,
.light a,
a.light,
.link,
.light .link,
.link.light {color: black;}

.dark a,
a.dark,
.light--inverted a,
a.light--inverted,
.dark .link,
.link.dark,
.light--inverted .link,
.link.light--inverted {color: white;}

#important a,
a#important,
#important .link,
.link#important {color: red;}

Am I wrong in thinking the only selectors that should be printed are those using at least one not-custom property (in this case, p and a, .link)?

I think. Checkout this example (on firefox) http://jsbin.com/hokode/1/edit

Doesn't work with:

<div class="dark">
    <p>Text</p>
</div>

And many other combinations...Not run many tests for now.

@iamvdo it seems I've forgotten the combination using space in the other way around

I've updated the gist with a modification. There is still redundant selectors & can be optimized, but it's better than missing selectors :)

Doesn't work with:

<div class="dark">
    <div class="light">
        <p>Text</p>
    </div>
</div>

I think that it's impossible to anticipate all cases?

p .light is incorrect - you don't set background on .light elements, you set it on p elements.

Ultimately, I'm also pretty sure it's impossible to be completely correct, for all possible nestings of .light and .dark. If you have .light p and .dark p, then when you nest light and dark, it's the ordering of the rules that affects the value rather than the nesting of the elements, so you need a .light .dark p and .dark .light p, but then if you nest three of them, some combinations will again devolve to rule order rather than nesting, etc.

I've an idea about generating a reverse cascade to handle nesting of selector.

This will make pretty freaking huge selectors, but this might work "as expected" (lol).

Example adjusted to remove p .light like selectors. I was a bug related to \n converted to space & shablahblah...

I need to work on the reverse cascade by adding a prepended selectors on generated selector that have custom prop defined after. eg: for .light in .dark, I "just need" to generate something like this

/* normal generation */
p,
.light p,
p.light,
/* + reverse cascade for .dark */
.dark .light p,
.dark p.light
{background: black;}

Each time we got a redefined custom prop, we need to add prefixed values for values defined before in case of this use case. Should be enough.

Here I think I got something http://jsbin.com/hunuy/2/edit