From c5e9fa62c0e7a215cb3b466571201a5889019af4 Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Sun, 12 Nov 2023 14:56:40 -0300 Subject: [PATCH 1/2] fix: check if `CSS.supports()` is available --- src/components/TooltipController/TooltipController.tsx | 5 +++-- src/utils/css-supports.ts | 9 +++++++++ 2 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 src/utils/css-supports.ts diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx index 2176df9b..b5613170 100644 --- a/src/components/TooltipController/TooltipController.tsx +++ b/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,7 +275,7 @@ 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\`.`) } @@ -282,7 +283,7 @@ const TooltipController = ({ // 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\`.`) } diff --git a/src/utils/css-supports.ts b/src/utils/css-supports.ts new file mode 100644 index 00000000..1f2b7b86 --- /dev/null +++ b/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 From 945adfd5e08b80adeb066edbaebf0ba13946bc4f Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Mon, 13 Nov 2023 12:10:58 -0300 Subject: [PATCH 2/2] fix: reduce verbosity --- src/utils/css-supports.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/utils/css-supports.ts b/src/utils/css-supports.ts index 1f2b7b86..c9380517 100644 --- a/src/utils/css-supports.ts +++ b/src/utils/css-supports.ts @@ -1,9 +1,6 @@ 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) + return hasCssSupports ? window.CSS.supports(property, value) : true } export default cssSupports