javascript - 如何修复我的 postcss 配置，以便 ":has"插件工作？

Question

我在 vue 3 (vite) 中使用 postcss。这是我的配置:

包.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,
      },
    }),
  ],
};

嵌套按预期工作，所以我想我的配置是正确的

has-pseudo-class 在 Firefox 107 上什么都不做

我知道这是行不通的，因为以下代码在 Chromium(原生支持 :has)上生成紫色边框，但在 Firefox 107 上没有任何内容:

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

我做错了什么？我是否误解了插件的功能或使用方法？

Answer 1

这不起作用，因为我需要导入和引导浏览器 polyfill。

为了解决这个问题，我在 HTML head 中添加了以下代码

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

请注意，您需要将浏览器 polyfill 与您正在使用的 postcss-preset-env 版本相匹配。

非常感谢 postcss discord chan 上非常乐于助人的人们帮助我解决这个问题。