Top-level pseudo selector not giving correct output

[daanvosdewael]

When using the plug-in with the following CSS:

:where(.foo) {
  color: #000;

  &__bar {
    font-size: 1rem;
  }
}

The output currently is this:

:where(.foo) {
  color: #000;
}

:where(.foo)__bar {
  font-size: 1rem;
}

I get that the logic is supposed to be putting __bar at the end of the & parent, but in this case I would expect the following instead:

:where(.foo) {
  color: #000;
}

:where(.foo__bar) {
  font-size: 1rem;
}

Is there a way to make this happen?

For context, I'm using this setup to make BEM-style selectors that can easily be overridden due to the :where selector that brings the specificity down to 0.

[ai]

It looks too complicated to me.

If you can sent PR with simple and easy-to-maintain code, we can add this feature.

[daanvosdewael]

I wouldn't know where to begin to fix this if I'm honest 😅 I could write you a test, but that is the easy part hahah.

For now I have a workaround that is a little cumbersome, but I'll put it up here for others that stumble on this issue in the future:

.foo {
  :where(&) {
    color: #000;
  }

  &__bar {
    :where(&) {
      font-size: 1rem;
    }
  }
}

Will yield the following:

:where(.foo) {
  color: #000;
}

:where(.foo__bar) {
  font-size: 1rem;
}