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/[email protected]/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.