Nuxt.jsで:not(:focus-visible)が動作しない

問題

:focus-visibleでフォーカスリングを制御するために、このように書いたが動作しなかった。

:not(:focus-visible) { outline: none; }

DevToolsを見ると、このような:focus-visibleを.focus-visibleに置き換えたルールが追加されていた。

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

なので:focus-visibleと.focus-visibleが両方とも付かないとoutline: none;が適応されフォーカスリングが表示されなくなっている。

原因

postcss-focus-visibleが:focus-visibleを使ったルールを複製していた。
nuxt -> @nuxt/webpack -> postcss-preset-env -> postcss-focus-visibleという依存関係で追加されてる。

focus-visible polyfillを使うことを前提としているみたいだけど、サポートしているブラウザでもpolyfillがないと動作しなくなってしまっている。

修正する

postcss-focus-visibleが複製することが直接的な原因なので、ひとまずbuild configから無効化することで対処した。

最初はNuxt.jsのドキュメントのサンプルを真似してpluginsから無効化しようとしたが、preset-envによって読み込まれてるので、presetから設定を変える必要があった。

nuxt.config.js

export default {
  build: {
    postcss: {
      preset: {
        features: {
          'focus-visible-pseudo-class': false,
        },
      },
    },
  },
}

現時点でIEを除く主要なブラウザだとSafariとiOS Safariがfocus-visibleをサポートしていないので、そのうちfocus-visible polyfillを導入するかもしれない。