feat: removeStyle() function

Author: gabrieljablonski

rollup.config.prod.js

@@ -98,8 +98,8 @@ const config = allBuildFormats.map(
       replaceBeforeSaveFile({
         // this only works for the react-tooltip.css because it's the first file
         // writen in our build process before the javascript files.
-        "'temp-content-for-styles'": 'file:react-tooltip.css',
-        '"temp-content-for-styles"': 'file:react-tooltip.css',
+        "'react-tooltip-css-placeholder'": 'file:react-tooltip.css',
+        '"react-tooltip-css-placeholder"': 'file:react-tooltip.css',
       }),
     ]
 

src/index.tsx

@@ -1,6 +1,6 @@
 import './tokens.css'
 
-import styleInject from 'utils/style-inject'
+import { injectStyle } from 'utils/handle-style'
 
 import type {
   ChildrenType,
@@ -17,10 +17,9 @@ import type { ITooltipController } from './components/TooltipController/TooltipC
 import type { ITooltipWrapper } from './components/TooltipProvider/TooltipProviderTypes'
 
 // this content will be replaced in build time with the `react-tooltip.css` builded content
-const TooltipStyles = 'temp-content-for-styles'
+const TooltipStyles = 'react-tooltip-css-placeholder'
 
-// @ts-ignore
-styleInject(TooltipStyles)
+injectStyle(TooltipStyles)
 
 export { TooltipController as Tooltip } from './components/TooltipController'
 export { TooltipProvider, TooltipWrapper } from './components/TooltipProvider'
@@ -37,3 +36,5 @@ export type {
   IPosition,
   Middleware,
 }
+
+export { removeStyle } from './utils/handle-style'

src/utils/style-inject.ts src/utils/handle-style.tssrc/utils/style-inject.ts renamed to src/utils/handle-style.ts

@@ -1,17 +1,21 @@
-function styleInject(css: string, ref?: any) {
+const REACT_TOOLTIP_STYLES_ID = 'react-tooltip-styles'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function injectStyle(css: string, ref?: any) {
   if (!ref) {
     // eslint-disable-next-line no-param-reassign
     ref = {}
   }
   const { insertAt } = ref
 
-  if (!css || typeof document === 'undefined' || document.getElementById('react-tooltip-styles')) {
+  if (!css || typeof document === 'undefined' || document.getElementById(REACT_TOOLTIP_STYLES_ID)) {
     return
   }
 
   const head = document.head || document.getElementsByTagName('head')[0]
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const style: any = document.createElement('style')
-  style.id = 'react-tooltip-styles'
+  style.id = REACT_TOOLTIP_STYLES_ID
   style.type = 'text/css'
 
   if (insertAt === 'top') {
@@ -31,4 +35,12 @@ function styleInject(css: string, ref?: any) {
   }
 }
 
-export default styleInject
+function removeStyle() {
+  const style = document.getElementById(REACT_TOOLTIP_STYLES_ID)
+  if (!style) {
+    return
+  }
+  style.remove()
+}
+
+export { injectStyle, removeStyle }