`:active` state not being triggered along with `"@media (hover: hover)":` usage
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
### Describe the issue
When using `"@media (hover: hover)":` along with `:active` selectors on an element, `:active` does not get triggered.
```tsx
backgroundImage: {
default: null,
':hover': {
'@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
},
':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
},
```
### Expected behavior
active has higher specificity over `"@media (hover: hover)":` usage.
### Steps to reproduce
[playground repo](https://stylexjs.com/playground?input=N4IgggDhB0AuDOAPEAuEBLAthA9gJ1gAIAqQgQ3kPlgE8AbAU0UIDM8dNCAdEAAWvpMAVvAD0Axoh4BuLgDssuAoWCEAxjjr5KAX1btOPaKNg4A1gznxoEpjPnzRxYvJKEA6gzobMDQqf8ACz8AZVpGAA1CCDoyGgBzdgBXOQATAEJXFzk3AFFU9CJYYPUcVL8yNKoGP1tKJIhUslg-dCtYStg6GmgswlzECAY8LEsiAHdCwP9zS0pK1KCGX3r4NviZiysbcKY4az6QwLI8P2K-AFUAJQAZGdK6WIAjfGa-fGqqpjJsRkoAnDnPAHHLEUQOORMJREcosMhJOhEFgpNSwdA4HKQCAACgAlCpXIRTrAkngctjCYRCAAeJ5JWCmOSUqkqaBs2yIaAQdgQeDYjnQWHwxEAWROFjweIANFRdtY6QyMbidMyqbQhgBeHgKxk8VWEDEAYTo6DUZg1wDxhA1AD59VTJmkcONoDghnIKSBAgzeShROJdogRNAfKJUjg1PAeDKeAB9J6xORmaPcEByfAMFjDU54Hi4-UqnIsu1FlmEEI1JaEcOR5nU0Q6jElqm42RyQvyDTtWWCSganuSEOnN7Y4CExtyFAE0usSQAcXY4ynAEYpcyCvAYnEpzwWJJo8yyCb4nIAJItTDwHcgNRjYYHmdCJLUdAsGiGjEtOSwa%2B37-3kA1xnCAyFSAo5HiAAhLQzRXAA2ICyxAsD1lPOQTUheDEJZF48HKPArlA9Bnyw5lcPwsJBGvdNIQfMsWkQWAABEGA0PBmnRSdUxohg6JZFhPxCdAAC8GFImcBO-Tx0Hib0pwAVgABkU7CqQ0LQ8CndTtGgCcABUmFgVTCCeMgzUSHAUlSD8NKnMcZypIUER-B4dInAAFEZMBOGhjKpHgUECHAADcALs%2B1U14XwCjIQhsSC0LNMIBLhnzVBU1OVI%2BLLHQ-NTFAzLRUKAtTBMkl4wDmVy5lYHYqxCk4zy3WGWhr1M8zkjSABabTc0qmdasqNY0QxJjSQ4jFr0U6Bl3kqN%2Bqpar21beRAJAUwtmsAUEFQDBsHwIhSAoAcmH0DhIo5EQA0EKQQDbeQoQO0pu16vsTs5WE2gYD92j5eyqSeeJr2Pb0uqaPAzGxABiFgAHY4bhmUoeXAAmVHUbS7CGJcngQdgMHxWh5SVMIGGWBYTHCTUE5UkgoHUzxgmIeh8nWZYJHlyeTnlwpvjqbwyD8Hw4GZNB8HIbweInmxRTCFl2XREIZcABYAFJcRlSXpZR%2BT5MIHW9YNwhFZV9XKaLNEujEhnRfx8X4vgOhsRRuCEMIeSAA5VZlODl2gL2NeSx3nbg2GZQ9tXw%2BXM2%2BPgJInktxgRdku3Ca1mW5czxW4Pk9XNal53df1oujcV2HFJjhbCBNahk7FtOC-lrPCFhuC86JAuja7ovFY9lHK%2Bw-TDLr1PmbJ9nSeJ82AfpRlPKwHyR6ZyHAmDl23c973CF9-329Xp2UfLmVYf74-YYH8dZ4xCsu3Bmgl-t-fnZRlGffPmVN8Dp%2BX9fwgPffluAdzY6BWnINaNwcDxBwPsZAaBFBPSOpQK4DBCpnUMCAYcqJ7AKH2soRB700EXUDFdDk2CHqDCek5RErAUQjRyBAqBo4TqEB0HZE6AB%2BKcApKKRB4QwXQ%2BJ-rPWoIQdAix%2By40gTgLqLw6BZTuhCKkxJSTkjrPAYK8R9TADZDsG6XIeR8jqNAdggIZS2GVPqYK6AGDjEFogLUIAm5wWVsrQgysADM8k9QOSJJoBgDisCaJAPqE46AyBdWeF4BxfCIjeLLM2MsNJYTwASYkmkGEUF4AXERMYEUqRiItAAAwACTADEToLqZBCmFjSWWRAy4HHK2mh7XWqs4m1KpIgFGDjYbKxmu46O7SOk0AaTwAZ0BYbLgAJxtOCT4ssNBuk8HklM-2Uz3GzIiqk2p1JqBugNOTeADBYAOIrjwWUbobL4AcVDXI8kABiUz7n3POXsiAAB5ECahCg0FOec0Q2y0m7NMBAA5LAjknJ4MuZSsyLkQCuXgG5utDTK1yO4-5gKWT1gyScbJBQxiYqpNSHFWT2L4u-Hk0RqQimlPKTI6plL6mNJRjNNGmz5ksi6Q4nO0B3GH3ZR0qkIyHHyTgtARSsMvZDNqYshx7jVnuIjgK2phKsVvLBRC05sK3kIpufcw0TEHlMVeSCz5Zkfl-JAMbVVRL1U4EOcchx0KzlWp1Zoa5PAoaGnuSjD2TFlYYoitir6uKyXWO-Ji%2BsyTI0gWKBFalPARQoymR7Gaillz60Pry12agWXyozfJaAcElbuPFbDfWsN-byqVoWl2rj3GluTfJLqy5S2eMNiylWLaxXKw9h7Ct-sWldRcdAJp5a4IspTYaWahaG1TLccrP2vrx2VtDv25WcFprJv7a26AUzi1NNne48tqbJko0IPK1ZsN3FuPFZ7C9UyWUuMzoq0tG7YZqD9irG9LLFL3pZTnG9fS%2BUHugPJG9YqPaKWVnQItsNVl9vcWoGas0ZrK1WSjPl0Bt28sLS4j2sGT59KmX7WG8liMuwmS0vdI6Paof3X7COYqpnwf9q3Pd%2B692KWLX7dNpb1k7vFeM3tYGX57o9je3j8lK1KVLeBvWvHfVK3FRJ0TYryMezUK7XDxbN1lvPa2ll5Hi2pvA64n%2Bo7lxwS6iR8Vz7d2ius6h2GZGL1yfA8Ovpyly0rL3ROrqEci0sYAFqYHcX08u7iW1TOmtx5cahla-vAxesVKs9aJbvTex92GG1K2mkpcty4T68uVl1J9RWuqFo9lMltpbuPWeTaO9xTnC3Xus540dcF%2B0oz6RJ0rXWhPFp1pZltyleUe1G7y7jtWAOeLK-l5WsMW2md1l1DrraJvTN5dMrqE693Lk271ugLb-ZbfcYpJDXUptefksuK7m7VnQtK-tvps1YbHcY8B31J2WnAcS1d9ZpaitLbRlx9LvLFXBSu9B2DvaoszVbgl-jTmxXpr1nRiZy47tFew1MhTEqct60La25WwXpVlhYOgR4RTSROyhrS1IFSyC4gZRywaVgBJ4EwA49njsRyH37dD%2BSKM0r6gBfqaksbAjxocSKc7hbuMGfA7hrTYrXbztRq1orLdmkuaVusiZHi3GptDvrRdEO7s7srSrCbWa8f61TVMp3a31N8rc0WxStu-bkaVt7rru3UuKvdv7T3o3UfTaq9e47haWMNbAy43NsXcs9qN3BOThXesmcrdB89qbF3lpcyp5toOrPb0rSR0rWOWXwYm6s0VpWdZismfJQ0KM-3YYOwOnOhW2%2Bjt7S2xjaN3alonYV2dKs1C7cs0Nj3zbUbiozalnO3b-Yvzy2BsjsHbvNvjxroTUXeOBdu0tsD4XlMXc23e5WahK3Kw87f1uNaZqbbbVj-WQOPEtpjyx7e01Esg%2BmkVQM2cRmjTyu1RjN1-TfxVjV3gzJzmQ6Up2p2AEKVp2hgZwqSeBZxqVqV50525x4F51iBaGdklUICFxF3J2tQlylxl0TWh1L19ULS6w9ih3OyLR1jUFTUUiH2YJ1iVjFRflcWhWf3PR6yLQzV3VDgzVTUVT1jfQ1zw0S2D0w0Ni-RPhUM8WD3WXLVlixzs2x1HRWSfwGRRmHV5Vcz6UPju0nW1x7Wm3sN01HWmxEI3XnUUnMKsyWz9kVS6lXSi1e0r0AJq2rzj1bktwmR6yn16Tn0rWqwHz3XI2WwhyCOw1D3YPC2SPWTMOawXxB1SxPkNFLUfzbzbXLzX2mTw0dwqI9mY2PTUA8P0OgwzSsJY3mzvQMxZXiKzQuz-jAymX63E31yLX81cPLQbTSNSMWyVi8wnUzl9VHXnX42MI8Wwx3UYzI2CgWM10nyszY1SLbwm3YNDha22zMPN0PS-zOMq1EwzQ8NWRY2EIRzMN3WawvTAyszW3G0NhKyiwVzIKULMP%2BP7Qwx-1ljbVy292PW3g%2BNvV9kIDrxvTqw0LqzXzzzTxhNdkKwKMkOmgEzoBELe2D0lXi0w0SJ3Tk2UI6x0Id3j3PWpOhLv0zn0Jczuz6XhNBw8QP1LT7m60dyHQw2mRbjA2FzK14y61915W%2Bw63I0Kx8O%2B1M2UMaNSw3QByxzKy6NRjKwmUyLV1Dh%2B0wyuL-SBOfyi2Gze0mwlSmWCxFCd3E2ELI3FTTzoGVw8Qm2FzAy2NWS61hkCDv06ymS2L4PkkCGHTw1hmCnLgDIaIEKMP7Ugx6zNyLX-n1j-3LXEJ9PX0OPmLxJqzfWhKw3CwP0ANRi2PUwnV2LxOhJVIay6OcQRI7zzNaxBMbNq3FTXw8LJJaWbR5J4LWyMwSKaTCJsNx3OJoxq16yWybzMMrWvTnwmRB39mcS%2BINin19lKz6TvwPyXXnOmQm3ZLm1IzaN3Q3QPwmTaMo17WVihzTwmRDLK3kih01PcRtIGXZI0NmhZR1kCCwwu2XBuB62IwjhSwwz7lDPGUmSmToBExi28OgydL%2BODIH0nV9MLI8ToEVTvL-l4zx2Ejl3I1HWAsL0gsCAWLdK2IOzWNDLIsVTwuF0LVuyG0ownXkgAAlEtNyX5kMT4NdiiicIdut2S%2B0S1V9%2B0sM6Mb08951U1NdhitylZO0UzxKNdFLCtT09ZwTUd-sqtctbs2MnMZMti4jW1J91Lg8JMD9b8KjOzUdS959m1TMBj9YwNkjQ56S7y1st0z8%2BKri%2Bs5YysTdVTG0%2B41s89fCEMXEbNzyzDyzLKi0D9Z0Qi5NZoyse0h0qtaiEjFJ1kAtV8kq90%2BVcq%2B48zTNZp-LQd-49ZUsU01tvS5jKKVlStldmt4AyKQiFty0RNfUbCOrP1VluMb1wSrDJlMTTd-SWLUzJT20RKG0HShN6Sv0U0lZs83dldGrgo5MBjQtRs0yW0VrlxAhitwt5JJ8dSEjPENyUNi9pontJsLTKMdYp9mip8YCW1XtXYoq0YQjgMyNPqdsRDszGjTNTdkSzTgSGyvqp9bsYTXqRCyMFNet90W1q8z8Hr5J4CIokC6AHE1BSRThvwEUqDxcZx6x1F4gElQEOw5AuwRE6hrR3ohwUESChETEXIhE1J3UkpcZbZl5oYsdVxSYWB5Ihahbp4WEgIQE2wQAdAgA)
- hover shows red
- clicking the button should show blue
- you see active trigger when you click and hold and move hover away from the button
https://github.com/user-attachments/assets/6f41b1c4-d67d-442f-86e8-931818da7a69
### Test case
```
jest.autoMockOff();
import { transformSync } from '@babel/core';
import stylexPlugin from '../src/index';
function transform(source, opts = {}) {
const { code, metadata } = transformSync(source, {
filename: opts.filename,
parserOpts: { flow: 'all' },
babelrc: false,
plugins: [[stylexPlugin, { ...opts }]],
});
return { code, metadata };
}
test('repro 1788', () => {
const { metadata } = transform(`
import * as stylex from '@stylexjs/stylex';
const styles = stylex.create({
root: {
backgroundImage: {
default: null,
':hover': {
'@media (hover: hover)': 'red',
},
':active': 'blue',
},
}
});
`);
expect(metadata).toMatchInlineSnapshot();
});
```
### Additional comments
astryx code usage with the same issue https://github.com/facebook/astryx/blob/0a51f16c3a284751636c1552ce97792be822c9b8/packages/core/src/Button/Button.tsx#L188C7-L190C9
Contributor guide
Assessment
This issue has not been assessed yet.