Use import for focus-visible instead of require (#2149)

primer · Jun 27, 2022 · b3a98ba · b3a98ba
1 parent e5be3db
commit b3a98ba
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/.changeset/rude-buckets-fold.md b/.changeset/rude-buckets-fold.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Converted commonjs `require` of `focus-visible` to an esm `import`
diff --git a/@types/focus-visible/index.d.ts b/@types/focus-visible/index.d.ts
@@ -0,0 +1 @@
+declare module 'focus-visible'
diff --git a/src/BaseStyles.tsx b/src/BaseStyles.tsx
@@ -4,6 +4,9 @@ import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './co
 import {useTheme} from './ThemeProvider'
 import {ComponentProps} from './utils/types'
 
+// load polyfill for :focus-visible
+import 'focus-visible'
+
 const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>`
   * { box-sizing: border-box; }
   body { margin: 0; }
@@ -36,9 +39,6 @@ function BaseStyles(props: BaseStylesProps) {
   const {children, ...rest} = props
   const {colorScheme} = useTheme()
 
-  // load polyfill for :focus-visible
-  require('focus-visible')
-
   return (
     <Base {...rest} data-portal-root>
       <GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />