fix: check if CSS.supports() is available

Author: gabrieljablonski

src/components/TooltipController/TooltipController.tsx

@@ -12,6 +12,7 @@ import type {
 } from 'components/Tooltip/TooltipTypes'
 import { useTooltip } from 'components/TooltipProvider'
 import { TooltipContent } from 'components/TooltipContent'
+import cssSupports from 'utils/css-supports'
 import type { ITooltipController } from './TooltipControllerTypes'
 
 const TooltipController = ({
@@ -274,15 +275,15 @@ const TooltipController = ({
       // eslint-disable-next-line no-console
       console.warn('[react-tooltip] Do not set `style.border`. Use `border` prop instead.')
     }
-    if (border && !CSS.supports('border', `${border}`)) {
+    if (border && !cssSupports('border', `${border}`)) {
       // eslint-disable-next-line no-console
       console.warn(`[react-tooltip] "${border}" is not a valid \`border\`.`)
     }
     if (style?.opacity) {
       // eslint-disable-next-line no-console
       console.warn('[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead.')
     }
-    if (opacity && !CSS.supports('opacity', `${opacity}`)) {
+    if (opacity && !cssSupports('opacity', `${opacity}`)) {
       // eslint-disable-next-line no-console
       console.warn(`[react-tooltip] "${opacity}" is not a valid \`opacity\`.`)
     }

src/utils/css-supports.ts

@@ -0,0 +1,9 @@
+const cssSupports = (property: string, value: string): boolean => {
+  const hasCssSupports = 'CSS' in window && 'supports' in window.CSS
+  if (!hasCssSupports) {
+    return true
+  }
+  return window.CSS.supports(property, value)
+}
+
+export default cssSupports