Unwrapping with postcss-nested

[bboro]

Hi!

Thanks for the useful plugin! I think I'm noticing a bug with unwrapping when using postcss-nested plugin.

Consider the following pcss:

.element-a {
  .element-a-inner {
    .title {
      @apply ps-1;
    }
  }
}

This gets compiled into css:

.element-a .element-a-inner [dir="rtl"] .title {
  padding-right: 0.25rem;
}

.element-a .element-a-inner [dir="ltr"] .title {
  padding-left: 0.25rem;
}

which seems wrong. I think it should be:

[dir="rtl"] .element-a .element-a-inner .title {
  padding-right: 0.25rem;
}

[dir="ltr"] .element-a .element-a-inner .title {
  padding-left: 0.25rem;
}

This ends up breaking some elements' layout as paddings are no longer applied.

[20lives]

Hi @bboro,
Thank you for your feedback.

I have very little experience with @apply and none with postcss-nested but from skimming the readme I guess that the ps-1 is applied directly at the title class and the [dir="rtl'] selector is not bubbled intentionally.

by default the only thing the bubble is the @media but can be changed only to other at-rule:
https://github.com/postcss/postcss-nested#bubble

It seems like this thing should be solved from the postcss-nested plugin.