perf: always load focus-visible polyfill (#1780)

src/client.js

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

src/routes/_utils/supportsSelector.js

@@ -1,13 +0,0 @@
-// 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
-}