Some styles only apply to these states which currently have to be triggered by doing the corresponding interaction in the frame.
As a result, you cannot quickly make changes and preview them, you have to go back and forth.
Previously, a solution for this was included, however it was not a general solution: it only worked for custom properties, and they had to have a specific naming scheme. The related code was preserved partially as a comment because it still gives a good idea of the intended behavior.
With the CSS parser almost ready, it should become possible to trigger these states in a reliable way for all CSS.
Then, hovering any style property that applies only to such state, would result in a message sent to the frame to add the forced class to the inspected element and/or its parents.
Open questions
Where to add the classes?
A few options:
Add to deepest element: Minimal changes to DOM, however would need :is(:hover, :has(.force-hover)). The latter is still behind a flag on Firefox, and might also incur performance issues (remember it has to be applied to all pseudo states in all rules of all sheets).
Add to deepest element + all parents: Easiest way to do it, but would probably cause a full page style recalculation that is hard to prevent.
Detect which elements need the class to only assign the right ones: While technically more correct, it seems too challenging.
The first options seems best if there's no significant performance impact.
Some styles only apply to these states which currently have to be triggered by doing the corresponding interaction in the frame. As a result, you cannot quickly make changes and preview them, you have to go back and forth.
Previously, a solution for this was included, however it was not a general solution: it only worked for custom properties, and they had to have a specific naming scheme. The related code was preserved partially as a comment because it still gives a good idea of the intended behavior.
With the CSS parser almost ready, it should become possible to trigger these states in a reliable way for all CSS.
To do this, the relevant CSS rules can be adapted to change any instance of
:hoverwith:is(:hover,._force-hover)(same for other states). See https://github.com/Inwerpsel/use-theme-editor/blob/8ec7c5a71ea9d2c78ce846228dca4f330c575d7e/src/functions/parseCss.js#L443Then, hovering any style property that applies only to such state, would result in a message sent to the frame to add the forced class to the inspected element and/or its parents.
Open questions
Where to add the classes?
A few options:
:is(:hover, :has(.force-hover)). The latter is still behind a flag on Firefox, and might also incur performance issues (remember it has to be applied to all pseudo states in all rules of all sheets).The first options seems best if there's no significant performance impact.