Given the following example third-party SCSS style definition:

// third-party style definition I'd like to re-use
.third-party {
  color: blue;

  &:hover {
    color: red;
  }
}

I can use @extend to re-use the definition in my own styles:

// generates .foo.bar:hover
.foo.bar {
  @extend .third-party;
}

If my parent selector includes a pseudo element such as ::part(), the generated CSS has the :hover part of the original definition placed before the pseudo element insted of the other way round, which is semantically different:

// generates .foo:hover::part(bar) instead of .foo::part(bar):hover
.foo::part(bar) {
  @extend .third-party;
}

Is there a way to achieve the desired .foo::part(bar):hover given that I don’t want to change the original third-party definition?

Here’s a pen to play around: https://codepen.io/shimikano/pen/RwmPEor