Missing ability to break parent selector chain for ampersand

[aczekajski]

I am using some external scss file. Let's assume I want to isolate the external styles to work only for elements that are wrapped in some additional element. In effect, I end up with

.my-wrapper {
  @import "external";
}

In general this works ok, until trailing ampersand selector happens to be used in external styles. We then end up with a structure like this:

.my-wrapper {
  .external-children {
    .external-parent & {
      color: red;
    }
  }
}

which in turn gets compiled to this:

.external-parent .my-wrapper .external-children {
  color: red;
}

while in fact I wanted to achieve this:

.my-wrapper .external-parent .external-children {
  color: red;
}

Of course current behavior is correct, but it seems that currently there is no way to achieve what I wanted without editing external.scss. I tried experimenting with @at-root but it removes .my-wrapper completely from the selector chain. A directive similar to @at-root might be needed to do that. So I can type something like this:

.my-wrapper {
  @reset-parent {
    .external-children {
      .external-parent & {
        color: red;
      }
    }
  }
}

which will cause & to not see the part of parent selector that happened before @reset-parent but still be output as style inside the wrapper.

[nex3]

I understand what you want to do here, but it's a pretty narrow use-case. I don't think it's worth adding an entirely new directive for.

[M3kH]

I will argue that this is not a narrow use-case since css-module is spreading.

[aczekajski]

@M3kH you meant that you will argue that this IS a narrow use-case, right? 😅

[M3kH]

@aczekajski correct :-)

In short worth looking again to this, since stuff like:

:local(.embed){

    @at-root {
        @import "@my-component-library/my-component";
        ...
    }
...
}

Should help to isolate style in a more modular way.