Merge pull request #1041 from ReactTooltip/feat/add-manual-inject-styles-flow

feat: add manual inject styles function into the project

Author: danielbarion

.npmignore

@@ -25,11 +25,18 @@ coverage/
 .vscode/
 .husky/
 .github/
+rollup-plugins/
 
 // misc files
 bundlesize.config.json
+prebuild.js
+jest.config.ts
 
 // bundler - rollup
 rollup.config.dev.js
 rollup.config.prod.js
 rollup.config.types.js
+
+// bundler - esbuild
+esbuild.config.dev.mjs
+esbuild.config.prod.mjs

docs/docs/examples/anchor-select.mdx

@@ -63,7 +63,7 @@ import { Tooltip } from 'react-tooltip';
 
 :::info
 
-A CSS selector for a specific id begins with a `.`. Don't forget to put it before the class on your selector!
+A CSS selector for a specific class begins with a `.`. Don't forget to put it before the class on your selector!
 
 :::
 
@@ -99,7 +99,7 @@ Once you've understood how it works, you can write CSS selectors as complex as y
 
 `[attr^='prefix']` can be read as "any element that has an attribute `attr` in which its value starts with `prefix`". Remove the `^` for an exact match.
 
-This example uses the name attribute, but it works for any HTML attribute (id, class, ...).
+This example uses the `name` attribute, but it works for any HTML attribute (id, class, ...).
 
 :::
 

docs/docs/examples/render.mdx

@@ -39,7 +39,7 @@ The `render` prop can be used to render the tooltip content dynamically based on
 The function signature is as follows:
 
 ```ts
-;(render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
+(render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
 ```
 
 - `content` is available for quick access to the `data-tooltip-content` attribute on the anchor element

docs/docs/examples/styling.mdx

@@ -6,11 +6,12 @@ sidebar_position: 1
 
 How to customize tooltip styles in ReactTooltip styles.
 
-Tooltip arrow inherits its background color from tooltip (its parent).
+The tooltip arrow inherits its background color from the tooltip (its parent).
 
 import { Tooltip } from 'react-tooltip'
 import CodeBlock from '@theme/CodeBlock'
 import TooltipStyles from '!!raw-loader!../../../src/components/Tooltip/styles.module.css'
+import TooltipCoreStyles from '!!raw-loader!../../../src/components/Tooltip/core-styles.module.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -38,7 +39,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
 
 ### Inline Styling
 
-You can add styles into the tooltip with inline styling.
+You can add styles to the tooltip with inline styling.
 
 ```jsx
 import { Tooltip } from 'react-tooltip'
@@ -101,19 +102,27 @@ import { Tooltip } from 'react-tooltip'
 
 #### Explanation
 
-In this example, we are adding an extra level to the CSS classes. The following are the default styles for the tooltip:
+:::info
+Please note that **Core** styles are different from **Base** styles, for more information, please check the [Disabling ReactTooltip CSS](#disabling-reacttooltip-css) section.
+:::
+
+In this example, we are adding an extra level to the CSS classes. The following are the default **base** styles for the tooltip:
 
 <CodeBlock language="css">{TooltipStyles}</CodeBlock>
 
-If we only add new classes like below, it will not work because it has the same level of specificity than the default dark variant.
+And the following are the **core** styles for the tooltip:
+
+<CodeBlock language="css">{TooltipCoreStyles}</CodeBlock>
+
+If we only add new classes like below, it will not work because it has the same level of specificity as the default dark variant.
 
 ```css
 .example {
   color: #222;
   background-color: rgb(0, 247, 255);
 }
 
-/** add next line only if you want to have tooltip arrow with a different background color from tooltip **/
+/** Add next line only if you want to have a tooltip arrow with a different background color from the tooltip **/
 .example .example-arrow {
   background-color: rgb(255, 0, 0);
 }
@@ -127,7 +136,7 @@ To make this work as expected, we need to add another level of specificity:
   background-color: rgb(0, 247, 255);
 }
 
-/** add next line only if you want to have tooltip arrow with a different background color from tooltip **/
+/** Add next line only if you want to have a tooltip arrow with a different background color from the tooltip **/
 .some-class-or-rule .example .example-arrow {
   background-color: rgb(255, 0, 0);
 }
@@ -358,3 +367,48 @@ import { Tooltip } from 'react-tooltip'
 In summary, if you do it correctly you can use CSS specificity instead of `!important`.
 
 :::
+
+### Disabling ReactTooltip CSS
+
+There are two ways to remove the ReactTooltip CSS:
+
+#### Environment Variables
+
+You can prevent ReactTooltip from injecting styles into the page by using environment variables, we currently support two types of styles: `core styles` and `base styles`.
+
+- Core Styles: basic styles that are necessary to make the tooltip work.
+- Base Styles: visual styles to make the tooltip pretty.
+
+:::info
+
+We strongly recommend using this way because it's cleaner and better for performance to choose not to inject the styles instead of injecting and removing them when the page loads.
+
+:::
+
+| name                                | type      | required | default | values         | description                                                                                                                                                                                                                                   |
+| ----------------------------------- | --------- | -------- | ------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `REACT_TOOLTIP_DISABLE_CORE_STYLES` | `boolean` | no       | `false` | `true` `false` | Environment variable to disable **core** styles from being injected into the page by ReactTooltip.<br /><br /> We strongly recommend to keep the core styles being injected into the project unless you know what you are doing.              |
+| `REACT_TOOLTIP_DISABLE_BASE_STYLES` | `boolean` | no       | `false` | `true` `false` | Environment variable to disable **base** styles from being injected into the page by ReactTooltip.<br /><br /> Those styles are just visual styles like colors, padding, etc... And can be disabled if you want to write your tooltip styles. |
+
+#### Using removeStyle function
+
+:::caution
+
+Only use this method if you really can't use the environment variables to disable the style injection of ReactTooltip because this can impact the page performance.
+
+:::
+
+The function `removeStyle` accepts the following params:
+
+| name | type   | required | default | values        | description                                                                                                                                |
+| ---- | ------ | -------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| type | string | no       | `base`  | `base` `core` | If `core` is defined, the core styles will be removed from the page, if nothing is defined, `base` styles will be removed as default value |
+
+```jsx
+import { removeStyle } from 'react-tooltip'
+
+...
+
+removeStyle() // removes the injected base style of ReactTooltip
+removeStyle({ type: 'core' }) // removes the injected core style of ReactTooltip - this can affect the basic functionality of ReactTooltip
+```