Add pseudoClasses option

[dan-gamble]

If this is true then pseudo classes (&:hover, &:focus) are included in the parent chain

This would need to be merged after #2 as it includes #2 commits in this as well :)

[toomuchdesign]

Hi @dan-gamble, thanks for your PR!
You've implemented a quite original feature. Would you please help me find an use case for this?

Cheers!

[dan-gamble]

Sure :)

I came across this when using another plugin postcss-ref where you can do:

.foo {
   background: red;
}

.bar {
 color: ref(.foo, background);
}

The use case i had was:

.lst-Split_Item {
  @apply --Font-14;
  @apply --GridColumn;

  width: calc(percentage(1, 2) - (var(--Grid_Gutter) * 2));
  padding-top: 0.5vr;
  padding-bottom: @padding-top;

  font-weight: 700;
  letter-spacing: calc(100em / 1000);
  text-transform: uppercase;

  border-bottom: 1px solid var(--Color_Border);
  color: var(--Color_Blue-dark);

  &:nth-child(-n+2) {
    border-top: ref(^&, border-bottom);
  }
}

The problem here is:

  &:nth-child(-n+2) {
    border-top: ref(^&, border-bottom);
  }

^& doesn't work because it thinks it's already at the top level .lst-Split_Item and i couldn't get to .lst-Split_Item. & === .lst-Split_Item:nth-child(-n+2) ^& === undefined`

require('postcss-nested-ancestors')({ pseudoClasses: true }),

^& === .lst-Split_Item

Does that explain it? :)

[toomuchdesign]

Now I see what you're trying to do!

The main reason why postcss-nested-ancestors is not able to replace placeholders into CSS rules is that it currently cast the replacement function on CSS selectors.

Anyway, we might try to merge it as an optional feature.

I'll get back to you as soon as I have the time to better check your additions. Thanks again @dan-gamble!

[dan-gamble]

Awesome, thanks! I added it as an optional feature, { pseudoClasses: true } and by default it's false so nothing changes by default :)

[toomuchdesign]

Hi @dan-gamble, here is your merged pull request.
Please have a look at it. I think I'm going to publish next week. Cheers!

[dan-gamble]

Looks good to me :)

[toomuchdesign]

Shipped in v0.1.0!