使用 Parcel bundler 构建时如何防止组合 CSS 规则？

问题描述

我正在使用 Parcel Bunder，我有一些 CSS 使用 :focus-visible 及其 polyfill，如下所示：

/* Keyboard focus for all elements. */
:focus {
  z-index: 1;
  outline: medium dotted black;
}

/* Remove mouse focus if :focus-visible is supported. */
:focus:not(:focus-visible) {
  outline: none;
}

/* polyfill for :focus-visible. */
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

我的推理是，如果支持 :focus-visible，无论是否加载了 polyfill，第二条规则都会运行。如果不支持 :focus-visible，则忽略第二条规则，但会运行第三条规则。

当我使用 parcel build src/index.html 构建时，编译后的 CSS 文件具有如下组合规则：

.js-focus-visible :focus:not(.focus-visible),:focus:not(:focus-visible){outline:none}

所以它把第二条和第三条规则合二为一。现在的问题是，不支持 :focus-visible 的浏览器会忽略整个规则。解决此类问题的推荐方法是什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-selectors parceljs