fix: Revert "perf: always load focus-visible polyfill (#1780)" (#1784)

This reverts commit c98b198e60.

src/client.js

@@ -6,13 +6,6 @@ import './routes/_utils/historyEvents'
 import './routes/_utils/loadingMask'
 import './routes/_utils/forceOnline'
 
-// TODO: when some browser supports :focus-visible, feature-detect and async load polyfill
-// Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1445482
-// WebKit: https://bugs.webkit.org/show_bug.cgi?id=185859
-// Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=817199
-// Chrome ITS: https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/XKNtAVyO4AY/ujOrvaYsBwAJ
-import 'focus-visible'
-
 loadPolyfills().then(() => {
   console.log('init()')
   sapper.start({ target: document.querySelector('#sapper') })

src/routes/_utils/asyncPolyfills.js

@@ -17,3 +17,7 @@ export const importCustomElementsPolyfill = () => import(
 export const importIntl = () => import(
   /* webpackChunkName: '$polyfill$-intl' */ 'intl'
 )
+
+export const importFocusVisible = () => import(
+  /* webpackChunkName: '$polyfill$-focus-visible' */ 'focus-visible'
+)

src/routes/_utils/loadPolyfills.js

@@ -1,10 +1,12 @@
 import {
   importCustomElementsPolyfill,
+  importFocusVisible,
   importIndexedDBGetAllShim,
   importIntersectionObserver,
   importIntl,
   importRequestIdleCallback
 } from './asyncPolyfills'
+import { supportsSelector } from './supportsSelector'
 
 export function loadPolyfills () {
   return Promise.all([
@@ -12,6 +14,7 @@ export function loadPolyfills () {
     typeof requestIdleCallback === 'undefined' && importRequestIdleCallback(),
     !IDBObjectStore.prototype.getAll && importIndexedDBGetAllShim(),
     typeof customElements === 'undefined' && importCustomElementsPolyfill(),
-    process.env.LEGACY && typeof Intl === 'undefined' && importIntl()
+    process.env.LEGACY && typeof Intl === 'undefined' && importIntl(),
+    !supportsSelector(':focus-visible') && importFocusVisible()
   ])
 }

src/routes/_utils/supportsSelector.js

@@ -0,0 +1,13 @@
+// See https://stackoverflow.com/a/8533927
+export function supportsSelector (selector) {
+  const style = document.createElement('style')
+  document.head.appendChild(style)
+  try {
+    style.sheet.insertRule(selector + '{}', 0)
+  } catch (e) {
+    return false
+  } finally {
+    document.head.removeChild(style)
+  }
+  return true
+}