Nested custom selectors don't work

[topaxi]

This isn't working anymore:

@custom-selector :--foobar .foo, .bar;
@custom-selector :--baz .baz;

:--foobar > :--baz {
  color: red;
}

Now produces:

.foo,
.bar {
  color: red;
}

Instead of:

.foo > .baz,
.bar > .baz {
  color: red;
}

Seems to be working fine in plain https://github.com/postcss/postcss-custom-selectors and cssnext@1.6

[topaxi]

Seems like there are even more issues with custom selectors.
Even this simple example doesn't work in cssnext 1.7.1:

@custom-selector :--any .foo, .bar;

:--any h1 {
  margin-top: 16px;
}

produces:

.foo, .bar {
  margin-top: 16px;
}

[MoOx]

I don't get thoses issue on the playground that is using 1.7.1...

[topaxi]

Mh, now I can't reproduce this on the playground too... weird O_o
Did something change, maybe a dependency? do I have hallucinations?

Well one thing I definitely still have which worked pre 1.7

@custom-selector :--checkbox-container .checkbox, .radio;

@custom-selector :--customizable input[type=checkbox]:not(:checked), input[type=checkbox]:checked,
                                 input[type=radio]:not(:checked),    input[type=radio]:checked;

:--checkbox-container > :--customizable {
  position: absolute;
  left: -99999px;
}

Produces:

.checkbox > input[type=radio]:checked,
.radio > input[type=checkbox]:not(:checked),

.radio > input[type=checkbox]:checked,

.radio > input[type=radio]:not(:checked),

.radio > input[type=radio]:checked {
  position: absolute;
  left: -99999px;
}

Instead of:

.radio > input[type=checkbox]:not(:checked),
.radio > input[type=checkbox]:checked,
.radio > input[type=radio]:not(:checked),
.radio > input[type=radio]:checked,
.checkbox > input[type=checkbox]:not(:checked),
.checkbox > input[type=checkbox]:checked,
.checkbox > input[type=radio]:not(:checked),
.checkbox > input[type=radio]:checked {
  position: absolute;
  left: -99999px;
}

[topaxi]

Okay, playground sometimes gets confused, after cutting and pasting something it produces the results from my first two posts. Refreshing I get correct results now.

The above example is a bit complex, here is a much simpler one:

@custom-selector :--fizzbuzz .fizz, .buzz;
@custom-selector :--foobar .foo, .bar;

:--fizzbuzz > :--foobar {
  color: red;
}

Produces:

.fizz > .bar,
.buzz > .foo,

.buzz > .bar {
  color: red;
}

Instead of:

.fizz > .foo,
.fizz > .bar,
.buzz > .foo,
.buzz > .bar {
  color: red;
}

[MoOx]

It's this issue right ? csstools/postcss-custom-selectors#19

[topaxi]

Yep :)

[MoOx]

Complete rewrite of this plugin is on the way csstools/postcss-custom-selectors#27