Generate identical regular CSS class rules for pseudo class rules - css

Question

As an HTML element's pseudo classes ("pseudo states") cannot be triggered via JavaScript, I want to emulate pseudo-class CSS styling by creating identical CSS rules with regular classes, then use JavaScript to toggle these emulated pseudo classes:
document.getElementById('action-button').addEventListener('click', () => {
const underTest = document.getElementById('under-test');
underTest.classList.contains('hover') ?
underTest.classList.remove('hover') :
underTest.classList.add('hover');
});
button:hover {
background-color: pink;
}
button.hover {
background-color: pink;
}
<button id="action-button">
Regular button<br />
Hover for seeing :hover pseudo class styling<br />
Click for toggling emulated .hover class on "under test" button
</button>
<br />
<br />
<button id="under-test" class="hover">under test: Pseudo-class hover button</button>
This approach works for my purposes. Now I'm looking for a solution which generates such emulated CSS rules automatically from my SASS / .scss stylesheets:
For example, given this input input.scss:
span {
a:focus {
color: red;
}
}
I'd like this output output.css:
span a:focus {
color: red;
}
span a.focus {
color: red;
}
or
span a:focus,
span a.focus {
color: red;
}
Is there a SASS configuration or some Webpack plugin which automatically derives additional "emulated CSS rules" from all pseudo-class rules?