Question: How to disable feature of `selection-chain`?

[sectore]

With v.0.2.7 (commit 25053b6) there is a new feature to apply pseudo classes to the first element in a selector chain. Is there an option to disable it? Because in some cases you don't wan't to add buttons pseudo classes to its parent element.

Example:

.container {
    &__link {
      button-color: skyblue white white;
    }
}

Note: This example above ^ is using post-css-nested to deal w/ nested rules.

Output will be similar like this:

.container:active,
.container__link:active {
  color: white;
}
.container:hover,
.container__link:hover {
  color: white;
}

But I would like to have an output like this (w/o adding pseudo classes to .container):

.container__link:active {
  color: white;
}
.container__link:hover {
  color: white;
}

[francoisromain]

Which plugin do you use to resolve the nesting rule?

[sectore]

It's post-css-nested.

[francoisromain]

I just made a test with postcss-nested and your rule above, and it seems to produce the result you expected (no pseudo selector on the parent).

Check it here: input, output

Anything I am missing?

[sectore]

Maybe my example is to simple and I've not tested it. Here is a more complex example where I ran into this issue today: https://github.com/input-output-hk/cardano-sl/blob/master/explorer/frontend/src/Explorer/View/common.css#L138-L311

The .transaction-body has some nested classes with buttons (look for two nested &__value classes). After building all CSS all pseudo classes of those buttons are added to .transaction-body. If I use v.0.2.6 everything works well.

[francoisromain]

Ok I see. your link is different from your example because in the processed output, .transaction-body is indeed a parent in the selector chain. So it worked as expected.

The reason to attach the active / hover classes to the parent element is that it is very common to have something like <li class="active"><a class"btn">.

The best way to disable it would be to remove the parent nesting (transaction-body ) from your css declaration. Otherwise, I have to think about a way to pass an option…

[sectore]

Yeah, an option to disable this feature would be great :) Thanks for checking this out!

[francoisromain]

Now, classes are applied to the parent only when it is set by the user. See here:
https://github.com/francoisromain/postcss-button#classes

207d9b5

Does it fixes your problem?

[sectore]

Ooops, I have not seen your commit ^. It seems we have been worked in parallel on this :) Your commit looks nice! What do you think to provide parent not just as a global option, but also as an option of each button (see PR #2 )

[francoisromain]

Haha yes we produced almost the same code :). Now you can use:

• either button-class-parent: true
• or button-class: active disabled true

You can use these globally in a config atRule declaration or in a specific button declaration. I rewrote the docs and I hope this is clearer.

Is it what you asked for?

[sectore]

Yes, it is very nice :) Thanks again for your help!
P.S. I will close my PR ;)