Using multiple custom-selectors in one selector does not work

[topaxi]

For example this:

@custom-selector :--button-types
  .btn-primary,
  .btn-success,
  .btn-info,
  .btn-warning,
  .btn-danger;

:--button-types, :--button-types:active {
  color: white;
}

compiles to this:

.btn-primary, :--button-types:active,
.btn-success, :--button-types:active,
.btn-info, :--button-types:active,
.btn-warning, :--button-types:active,
.btn-danger, :--button-types:active {
  color: white;
}

instead of this:

.btn-primary, .btn-primary:active,
.btn-success, .btn-success:active,
.btn-info, .btn-info:active,
.btn-warning, .btn-warning:active,
.btn-danger, .btn-danger:active {
  color: white;
}

[yisibl]

https://github.com/postcss/postcss-custom-selectors#multiple-selectors

I will consider suppor it.

[MoOx]

Nice :)

[topaxi]

I'm pretty sure this worked before, might be a cssnext update that caused this but:

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

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

Isn't working for me anymore and now produces:

.foo,
.bar {
  color: red;
}

Instead of:

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

Is this the same limitation or just a regression?

cssnext 1.7.1 with postcss-custom-selectors 2.1.0

[topaxi]

Okay the comment above is definitely a cssnext problem, seems to be working with plain postcss-custom-selectors.

[MoOx]

MoOx/postcss-cssnext#163 (comment)

[topaxi]

So the case above was a playground/firefox issue. I tried to simplify the selectors I got and now have a failing case which definitely fails in postcss-custom-selectors and probably isn't related to cssnext.

input.css:

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

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

output.css:

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

actual.css:

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

.buzz > .bar {
  color: red;
}

[MoOx]

It seems related to this part https://github.com/postcss/postcss-custom-selectors/blob/e020e3220644d1975b4dc7102d1acb1e0bec38a0/index.js#L21 which does not reset the list for each plugin executions

[MoOx]

I am on working on this bug.

[MoOx]

@yisibl I am going to completely rewrite this plugin with the codebase of postcss-selector-matches (so using babel). This will be better, are you ok with that?

[hgl]

+1, Mama no longer has to worry that I don't use es 2015 often enough. :)

@MoOx Possible to allow cssnext config file to be written in es 2015 too? Maybe pass that file to babel instead of requiring it directly?

[topaxi]

I think this is the right way to do it, the custom selector spec even says that it expands into :matches() selectors.

[yisibl]

@MoOx This is the reason why I had to use postcss-selector-matches before. #16

You can rest assured that you can change it.

[MoOx]

Almost done. PR is coming really soon. Some fixes will be pushed in postcss-selector-matches at the same time :)

[MoOx]

Complete rewrite has just been pushed as a PR #27