`:has` pseudo selector not working properly on hover

[nlhkabu]

Bug description

I have an interface where I have items nested inside other items.

Each item has a handle for drag and drop (on the left) and a menu (on the right).

i want to show the handle and menu on hover, but only for the item that I am directly hovering on, not it's parent (or parents)

This is working well on Chrome (without polyfill):

But this is what I get with Firefox (107):

My setup

package.json

"postcss-preset-env": "8.0.0-alpha.1",

index.html

<script src="https://unpkg.com/css-has-pseudo@4.0.1/dist/browser-global.js"></script>
<script>cssHasPseudo(document)</script>

postcss.config.js

const postcssPresetEnv = require("postcss-preset-env");

module.exports = {
  plugins: [
    postcssPresetEnv({
      features: {
        "nesting-rules": true,
        "has-pseudo-class": true,
      },
    }),
  ],
};

Source CSS

.draggable:hover:not(:has(.nested-list:hover)) {
  & > .entry .grabber {
    display: flex;
  }

  & > .entry .entry-menu {
    display: inline;
  }
}

Expected CSS

??

Actual CSS

??

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

N/A

Debug output

No response

Extra config

No response

What plugin are you experiencing this issue on?

CSS Has Pseudo

Plugin version

8.0.0-alpha.1

What OS are you experiencing this on?

Linux

Node Version

v16.15.1

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

[romainmenke]

@nlhkabu Do you also have an html snippet we could use to test with?

[nlhkabu]

@romainmenke here you go:

<div class="draggable" role="listitem" >
    <div class="entry">
        <span class="grabber"></span>
        <span class="bullet">⏷</span>
        <div class="content">
            <p>a</p>
        </div>
        <div class="entry-menu"></div>
    </div>
    <div class="entry-list nested-list" role="list">
        <div class="draggable" role="listitem" >
            <div class="entry">
                <span class="grabber"></span>
                <span class="bullet">•</span>
                <div class="content">
                    <p>b</p>
                </div>
                <div class="entry-menu"></div>
            </div>
        </div>
        <div class="draggable" role="listitem" >
            <div class="entry">
                <span class="grabber"></span>
                <span class="bullet">•</span>
                <div class="content">
                    <p>c</p>
                </div>
                <div class="entry-menu"></div>
            </div>
        </div>
    </div>
</div>

[romainmenke]

@nlhkabu We have just released v4.0.2 : https://www.npmjs.com/package/css-has-pseudo
Can you check that version to see if your issue is resolved?

[romainmenke]

Just to make sure I also made two codepens :

• native without any polyfill or postcss : https://codepen.io/romainmenke/pen/xxzoRoG
• for older browsers : https://codepen.io/romainmenke/pen/yLEdgyw

There was one thing I forgot to mention before.
You also need to enable certain watchers if you want to use these :

• :hover
• specific attributes

https://www.npmjs.com/package/css-has-pseudo#:~:text=Internet%20Explorer%209.-,Browser%20Usage,-hover

<script>cssHasPseudo(document, { hover: true })</script>

With the latest version and the setting I can no longer spot a difference between the native behavior and the polyfill.

[nlhkabu]

Thanks @romainmenke

I added { hover: true } and this has solved my problem, using "postcss-preset-env": "8.0.0-alpha.1" and version 4.0.1 of the broswer polyfill.

Thanks again! 🎉 🚀