Wrong output when mixing selectors

[MoOx]

@custom-selector :--button button, .button;
:--button a, b {}

gives

button a,
.button a, b {}

Which doesn't seems correct. (edit: it is)

This lead to a bug into cssnext where

@custom-selector :--button button, .button;

:--button:matches(:focus) {}

:--button:matches(.is-focused, .is-broken) {}

gives

button:focus,
.button:focus {}

button:matches(.is-focused,
.button.is-focused, button:matches(.is-focused,
.button.is-broken {}

It's probably because this plugin currently use .selector instead of .selectors when playing with selectors :)

Bug reported by @jaredadobe

[jaredadobe]

I am going to take a stab at fixing. Will get a chance in about 2 hours.

[yisibl]

The specification does not seem this syntax.

But we can think about how to expand it.

@custom-selector = @custom-selector <custom-selector> <selector> ;
<custom-selector> = <custom-arg>? : <extension-name> [ ( <custom-arg>+#? ) ]? ;
<custom-arg> = $ <ident-token> ;

[MoOx]

Oh... In fact I say

button a,
.button a, b {}

was incorrect but it is not.

But the second example with matches is still wrong.
We should throw a exception if spec doesn't allow that, or make it like we might expect:

button:matches(.is-focused,.is-broken),
.button:matches(.is-focused,.is-broken) {}

This way, postcss-selector-matches will be able to do his job.

[yisibl]

What's the final CSS? Like this?

button.is-focused,
.button.is-focused, button.is-broken,
.button.is-focused, button.is-focused,
.button.is-broken, button.is-broken,
.button.is-broken {}

[MoOx]

This plugin doesn't need to know since postcss-selector-matches will handle to conversion correctly when this one have done his job correctly ;)

(But yes is will look like what you showed)

[jaredadobe]

Working on it now. That is what it should look like.

FYI
here is the test i have added

@custom-selector :--buttons button, .button;

:--buttons:matches(:focus) {
    border: red;
    display: block;
}


:--buttons:matches(:focus, .is-focused) {
    border: red;
    display: block;
}

the output is currently as follows

button:matches(:focus),
.button:matches(:focus) {
    border: red;
    display: block;
}


button:matches(:focus,
.button:matches(:focus, .is-focused) {
    border: red;
    display: block;
}

I am aiming to produce the following as my expected. Let me know if you have any problems with the output

button:matches(:focus),
.button:matches(:focus) {
    border: red;
    display: block;
}


button:matches(:focus, .is-focused),
.button:matches(:focus, .is-focused) {
    border: red;
    display: block;
}

[jaredadobe]

I have a fix, but i would like to try out another solution before opening the PR.

[MoOx]

#5 (comment)

[MoOx]

The last output seems fine.

[jaredadobe]

This can now be closed.