PostCSS parent Selector is adding :is() pseudo after compilation and not producing compatible css

I have just migrated from SCSS to PostCSS and encountered only one issue I cannot resolve.

The issue concerns how to alter a the styles of a nested element when its parent has a specific class.

The following is a simplified representation of the problem. Real use cases are much more nested than this which is why the function had merit when using SASS.

Input

.nav {
  position: relative;
  height: 50px;

  & .nav-backdrop {
    height: 100%
    background-color: green;
    
    .nav:not(.is-open) & {
      background-color: red;
    }
  }
}

Expected result:

.nav {
  position: relative;
  height: 50px;
}
.nav .nav-backdrop {
  height: 100%;
  background-color: green;
}
.nav:not(.is-open) .nav-backdrop {
  background-color: red;
}

Actual result:

.nav {
  position: relative;
  height: 50px;
}
.nav .nav-backdrop {
  height: 100%;
  background-color: green;
}
.nav:not(.is-open) :is(.nav .nav-backdrop) {
  background-color: red;
}

The use of the pseudo :is() is not supposed to be the intense output to support the compatible browsers and I cannot see why it is outputting in this way.

In SASS I used a custom mixin and function called parent-append to have complete control over how nested I wanted to go. Ideally I would like to try and replicate the same but I cannot even get this basic representation to work.

I also tried to make use of postcss-nested-ancestors but that did not change anything.

The error I receive is can not be transformed to an equivalent selector without ':is()

Is there a way to achieve what I am trying to do.

Plugins included:

{
  "postcss-calc": "^10.1.1",
  "postcss-combine-media-query": "^2.0.0",
  "postcss-nested-ancestors": "^3.0.0",
  "postcss-preset-env": "^10.3.1",
  "postcss-simple-vars": "^7.0.1"
}