chore: split css between styles and core styles

Author: danielbarion

rollup-plugins/replace-before-save-file.js

@@ -41,17 +41,36 @@ export default function replaceBeforeSaveFile(replaceObject = {}) {
               regex = new RegExp(key, 'g')
 
               if (bundle[file].code.includes(key)) {
-                if (replaceObject[key].includes('file:')) {
+                if (key.includes('css') && replaceObject[key].includes('file:')) {
                   const [, fileName] = replaceObject[key].split(':')
                   const fileContent = await readFile(`./dist/${fileName}`, 'utf8')
 
-                  if (options.file.includes('.min')) {
-                    bundle[file].code = bundle[file].code.replace(
-                      regex,
-                      `\`${cssMinifier(fileContent)}\``,
-                    )
-                  } else {
-                    bundle[file].code = bundle[file].code.replace(regex, `\`${fileContent}\``)
+                  const splittedCSSContent = fileContent.split('/** end - core styles **/')
+
+                  if (key.includes('core-css')) {
+                    if (options.file.includes('.min')) {
+                      bundle[file].code = bundle[file].code.replace(
+                        regex,
+                        `\`${cssMinifier(splittedCSSContent[0])}\``,
+                      )
+                    } else {
+                      bundle[file].code = bundle[file].code.replace(
+                        regex,
+                        `\`${splittedCSSContent[0]}\``,
+                      )
+                    }
+                  } else if (!key.includes('core-css')) {
+                    if (options.file.includes('.min')) {
+                      bundle[file].code = bundle[file].code.replace(
+                        regex,
+                        `\`${cssMinifier(splittedCSSContent[1])}\``,
+                      )
+                    } else {
+                      bundle[file].code = bundle[file].code.replace(
+                        regex,
+                        `\`${splittedCSSContent[1]}\``,
+                      )
+                    }
                   }
                 } else {
                   bundle[file].code = bundle[file].code.replace(regex, replaceObject[key])

rollup.config.prod.js

@@ -100,6 +100,8 @@ const config = allBuildFormats.map(
         // writen in our build process before the javascript files.
         "'react-tooltip-css-placeholder'": 'file:react-tooltip.css',
         '"react-tooltip-css-placeholder"': 'file:react-tooltip.css',
+        "'react-tooltip-core-css-placeholder'": 'file:react-tooltip.css',
+        '"react-tooltip-core-css-placeholder"': 'file:react-tooltip.css',
       }),
     ]
 

src/components/Tooltip/Tooltip.tsx

@@ -5,6 +5,7 @@ import { useTooltip } from 'components/TooltipProvider'
 import useIsomorphicLayoutEffect from 'utils/use-isomorphic-layout-effect'
 import { getScrollParent } from 'utils/get-scroll-parent'
 import { computeTooltipPosition } from 'utils/compute-positions'
+import coreStyles from './core-styles.module.css'
 import styles from './styles.module.css'
 import type { IPosition, ITooltip, PlacesType } from './TooltipTypes'
 
@@ -583,28 +584,34 @@ const Tooltip = ({
       role="tooltip"
       className={classNames(
         'react-tooltip',
-        styles['tooltip'],
+        coreStyles['tooltip'],
         styles[variant],
         className,
         `react-tooltip__place-${actualPlacement}`,
         {
-          [styles['show']]: canShow,
-          [styles['fixed']]: positionStrategy === 'fixed',
-          [styles['clickable']]: clickable,
+          [coreStyles['show']]: canShow,
+          [coreStyles['fixed']]: positionStrategy === 'fixed',
+          [coreStyles['clickable']]: clickable,
         },
       )}
       style={{ ...externalStyles, ...inlineStyles }}
       ref={tooltipRef}
     >
       {content}
       <WrapperElement
-        className={classNames('react-tooltip-arrow', styles['arrow'], classNameArrow, {
-          /**
-           * changed from dash `no-arrow` to camelcase because of:
-           * https://github.com/indooorsman/esbuild-css-modules-plugin/issues/42
-           */
-          [styles['noArrow']]: noArrow,
-        })}
+        className={classNames(
+          'react-tooltip-arrow',
+          coreStyles['arrow'],
+          styles['arrow'],
+          classNameArrow,
+          {
+            /**
+             * changed from dash `no-arrow` to camelcase because of:
+             * https://github.com/indooorsman/esbuild-css-modules-plugin/issues/42
+             */
+            [coreStyles['noArrow']]: noArrow,
+          },
+        )}
         style={inlineArrowStyles}
         ref={tooltipArrowRef}
       />

src/components/Tooltip/core-styles.module.css

@@ -0,0 +1,38 @@
+.tooltip {
+  visibility: hidden;
+  width: max-content;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 8px 16px;
+  border-radius: 3px;
+  font-size: 90%;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease-out;
+  will-change: opacity, visibility;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.arrow {
+  position: absolute;
+  background: inherit;
+}
+
+.noArrow {
+  display: none;
+}
+
+.clickable {
+  pointer-events: auto;
+}
+
+.show {
+  visibility: visible;
+  opacity: var(--rt-opacity);
+}
+
+/** end - core styles **/

src/components/Tooltip/styles.module.css

@@ -1,43 +1,9 @@
-.tooltip {
-  visibility: hidden;
-  width: max-content;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 8px 16px;
-  border-radius: 3px;
-  font-size: 90%;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.3s ease-out;
-  will-change: opacity, visibility;
-}
-
-.fixed {
-  position: fixed;
-}
-
 .arrow {
-  position: absolute;
-  background: inherit;
   width: 8px;
   height: 8px;
   transform: rotate(45deg);
 }
 
-.noArrow {
-  display: none;
-}
-
-.clickable {
-  pointer-events: auto;
-}
-
-.show {
-  visibility: visible;
-  opacity: var(--rt-opacity);
-}
-
 /** Types variant **/
 .dark {
   background: var(--rt-color-dark);

src/index.tsx

@@ -16,9 +16,11 @@ import type {
 import type { ITooltipController } from './components/TooltipController/TooltipControllerTypes'
 import type { ITooltipWrapper } from './components/TooltipProvider/TooltipProviderTypes'
 
-// this content will be replaced in build time with the `react-tooltip.css` builded content
+// those content will be replaced in build time with the `react-tooltip.css` builded content
+const TooltipCoreStyles = 'react-tooltip-core-css-placeholder'
 const TooltipStyles = 'react-tooltip-css-placeholder'
 
+injectStyle(TooltipCoreStyles, 'react-tooltip-core-styles')
 injectStyle(TooltipStyles)
 
 export { TooltipController as Tooltip } from './components/TooltipController'

src/utils/handle-style.ts

@@ -1,7 +1,7 @@
 const REACT_TOOLTIP_STYLES_ID = 'react-tooltip-styles'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function injectStyle(css: string, ref?: any) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, default-param-last
+function injectStyle(css: string, id = REACT_TOOLTIP_STYLES_ID, ref?: any) {
   if (!ref) {
     // eslint-disable-next-line no-param-reassign
     ref = {}
@@ -15,7 +15,7 @@ function injectStyle(css: string, ref?: any) {
   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_ID
+  style.id = id
   style.type = 'text/css'
 
   if (insertAt === 'top') {
@@ -35,8 +35,8 @@ function injectStyle(css: string, ref?: any) {
   }
 }
 
-function removeStyle() {
-  const style = document.getElementById(REACT_TOOLTIP_STYLES_ID)
+function removeStyle(id = REACT_TOOLTIP_STYLES_ID) {
+  const style = document.getElementById(id)
   style?.remove()
 }