css-has-pseudo is not working when hovering on child

[3bdallahz]

Hi,
I have css like this

.wrapper:has(> input:hover) {
  /* style links that contain an image */
  background-color: green;
}

When hovering on the input nothing happens, but clicking on the input, the wrapper turns green, the same behaviour happens
if we replaced input:hover with button:hover.
if we replaced input:hover with p:hover for example, nothing happens

I'm using css-has-pseudo version 3.0.1

here is the html just in case

<div className="wrapper">
  <input />
</div>

[romainmenke]

Note :

Copy source css and run :

pbpaste | npx -y css-has-pseudo

Input

.wrapper:has(> input:hover) {
  /* style links that contain an image */
  background-color: green;
}

Output

.wrapper[\:has\(\%3E\%20input\:hover\)] {
  /* style links that contain an image */
  background-color: green;
}

[romainmenke]

@abdallahz3 Did you include the javascript polyfill on your page?
And could you create and share a demo html page?

[romainmenke]

Noticed two things :

<div className="wrapper">
  <input />
</div>

This html is incorrect and should be :

<div class="wrapper">
  <input />
</div>

---

The Javascript polyfill doesn't support :hover.
This was maybe done for performance as this requires mouseenter mouseleave event listeners.

[3bdallahz]

@abdallahz3 Did you include the javascript polyfill on your page? And could you create and share a demo html page?

Yes I did include the javascript polyfill, here is the reproduce link https://stackblitz.com/edit/vite-ekfuvl?file=index.html

[3bdallahz]

Noticed two things :

<div className="wrapper">
  <input />
</div>

This html is incorrect and should be :

<div class="wrapper">
  <input />
</div>

The Javascript polyfill doesn't support :hover. This was maybe done for performance as this requires mouseenter mouseleave event listeners.

yeah I used react, sorry for that mistake

Is hover support planed or css has selector does not support hover

[romainmenke]

Is hover support planed or css has selector does not support hover

@jonathantneal Do you remember why :hover is not supported in css-has-pseudo?
Maybe this was an oversight or was there a specific reason?

[Antonio-Laguna]

I reckon we could do it separately with a separate function or flag so it's on the dev to potentially enable that expensive behaviour

[romainmenke]

@abdallahz3 Work is ongoing here : #101
But I fear we will have to hold off on releasing any of this until the feature is a bit more stable in at least Safari.

We don't want to have too many breaking changes in this plugin and postcss-preset-env.
So we prefer getting it right in a single change.

this might take a while

[3bdallahz]

woah that was quick, Thanks for taking the time to implement this
How can I try out the change if you don't mind me asking

[romainmenke]

@abdallahz3 I am afraid we can't ship this any time soon.
The feature is only in Safari Preview and subject to more changes.

I want to avoid multiple breaking changes in the coming weeks as more and more people start using :has and spot bugs in this plugin.

I have started a discussion about this here : #102
If other maintainers are open to the proposal there we might be able to ship an experimental version sooner.

[romainmenke]

@abdallahz3 Just a quick update.

We are moving ahead with some form of experimental plugin releases.
The exact details of how this will work will be communicated later.
But it does mean we should have something for you sooner.

At the moment we are working on making sure that the updated version passes all tests from wpt.
This will give us some confidence that we are moving in the right direction.

[romainmenke]

@abdallahz3 We have just released an experimental version you can test : https://github.com/csstools/postcss-plugins/tree/main/experimental/css-has-pseudo#readme

const postcss = require('postcss');
const cssHasPseudoExperimental = require('@csstools/css-has-pseudo-experimental');

postcss([
  cssHasPseudoExperimental(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

Hover events have to be enabled manually :

https://github.com/csstools/postcss-plugins/blob/main/experimental/css-has-pseudo/README-BROWSER.md#hover

cssHasPseudo(document, { hover: true });

Please let us know if you have any issues with this version.
Any feedback at all would be much appreciated.

This can range from the naming of options to actual bugs.

[3bdallahz]

Thanks a lot @romainmenke and for everyone involved.

I noticed a weird issue where on mouse enter it triggers styling but mouse leave does not work, sometimes if you move the mourse fast it will trigger mouse leave, I'm not sure.

here is video of the issue I noticed
https://www.loom.com/share/6100015136674a4d93ab0dffb626cf3b

I also tried this on firefox(stackblitz does not support firefox, I tried that locally), same behaviour

link of the reproduce issue
https://stackblitz.com/edit/vite-jhn1hf?file=index.html

[romainmenke]

I was wondering if that would be an issue :D

If you want you can fix it by adding an event listener for pointerleave under this line :
https://github.com/csstools/postcss-plugins/blob/main/experimental/css-has-pseudo/src/browser.js#L149