How can I fix my postcss config so that the ":has" plugin works?

Question

I am using postcss with vue 3 (vite). Here is my config:

package.json

    "postcss-preset-env": "^7.8.3",

postcss.config.js

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

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

Nesting is working as expected, so I guess my config is correct

has-pseudo-class is doing nothing on Firefox 107

I know that this isn't working because the following code produces a purple border on Chromium (which natively supports :has ), but nothing on Firefox 107:

.draggable:has(div) {
  border: 1px solid purple !important;
}

What am I doing wrong? Have I misunderstood what the plugin does or how to use it?

Answer 1

This was not working because I needed to import and bootstrap the browser polyfill.

To solve the issue I added the following code to my HTML head

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

Note that you need to match the browser polyfill to the version of postcss-preset-env that you are using.

Thanks a bunch to the very helpful folks on the postcss discord chan for helping me troubleshoot this.

Answer 2

Firefox doesn't support the:has pseudo-class, so it won't polyfill it.

The Mozilla CSS Docs State "From version 103: this feature is behind thelayout.css.has-selector.enabled preferences (needs to be set to true). To change preferences in Firefox, visit about:config."

See browser specifications here