如何修复我的 postcss 配置以使":has"插件正常工作？

Question

我使用的postcss与vue 3 (vite)。下面是我的配置:

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

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

has-pseudo-class在Firefox 107上不做任何事情

我知道这不起作用，因为下面的代码在Chromium上产生紫色边框(它本身支持:has)，但在Firefox 107上没有:

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

我做错了什么?我是否误解了插件的作用或如何使用它?

Answer 1

这不起作用，因为我需要导入并引导浏览器填充。

为了解决这个问题，我添加了以下代码到我的HTML头

<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不和谐论坛上的一群非常有帮助的人帮助我解决这个问题。

Answer 2

Firefox不支持:has伪类，所以不会对其进行polyfill。

Mozilla CSS文档状态从103版开始:这个特性在layout.css.has-selector后面。启用的首选项(需要设置为true)。要在Firefox中更改首选项，请访问about:config.">

查看浏览器规格