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