Merge pull request #1014 from ReactTooltip/feat/auto-inject-css

feat: change the build to auto inject css into the page

Author: danielbarion

README.md

@@ -6,6 +6,7 @@
 [![npm download][download-image]][download-url]
 ![minified](https://badgen.net/bundlephobia/min/react-tooltip)
 ![minified gzip](https://badgen.net/bundlephobia/minzip/react-tooltip)
+
 <!-- ![last commit](https://badgen.net/github/last-commit/reacttooltip/react-tooltip) -->
 
 [download-image]: https://img.shields.io/npm/dm/react-tooltip.svg?style=flat-square
@@ -17,7 +18,7 @@
   </a>
 </p>
 
-If you like the project, please give the project a GitHub 🌟 
+If you like the project, please give the project a GitHub 🌟
 
 ## Demo
 
@@ -55,20 +56,23 @@ yarn add react-tooltip
 
 ## Usage
 
+> :warning: ReactTooltip will inject the default styles into the page by default on version `5.13.0` or newer.
+> The `react-tooltip/dist/react-tooltip.css` file is only for style reference and doesn't need to be imported manually anymore if you are already using `v5.13.0` or upper.
+
 > :warning: If you were already using `react-tooltip<=5.7.5`, you'll be getting some deprecation warnings regarding the `anchorId` prop and some other features.
-In versions >=5.8.0, we've introduced the `data-tooltip-id` attribute, and the `anchorSelect` prop, which are our recommended methods of using the tooltip moving forward. Check [the docs](https://react-tooltip.com/docs/getting-started) for more details.
+> In versions >=5.8.0, we've introduced the `data-tooltip-id` attribute, and the `anchorSelect` prop, which are our recommended methods of using the tooltip moving forward. Check [the docs](https://react-tooltip.com/docs/getting-started) for more details.
 
 ### Using NPM package
 
 1 . Import the CSS file to set default styling.
 
-> :warning: You must import the CSS file or the tooltip won't show!
+> :warning: If you are using a version before than `v5.13.0`, you must import the CSS file or the tooltip won't show!
 
 ```js
 import 'react-tooltip/dist/react-tooltip.css'
 ```
 
-This needs to be done only once. We suggest you do it on your `src/index.js` or equivalent file.
+This needs to be done only once and only if you are using a version before than `5.13.0`. We suggest you do it on your `src/index.js` or equivalent file.
 
 2 . Import `react-tooltip` after installation.
 
@@ -123,7 +127,7 @@ You can import `node_modules/react-tooltip/dist/react-tooltip.[mode].js` into yo
 
 mode: `esm` `cjs` `umd`
 
-Don't forget to import the CSS file from `node_modules/react-tooltip/dist/react-tooltip.css` to set default styling. This needs to be done only once in your application.
+If you are using a version older than `v5.13.0` don't forget to import the CSS file from `node_modules/react-tooltip/dist/react-tooltip.css` to set default styling. This needs to be done only once in your application. Version `v5.13.0` or newer already inject the default styles into the page by default.
 
 PS: all the files have a minified version and a non-minified version.
 
@@ -145,7 +149,7 @@ You can use [`renderToStaticMarkup()` function](https://reactjs.org/docs/react-d
 ```jsx
 import ReactDOMServer from 'react-dom/server';
 [...]
-<a 
+<a
   data-tooltip-id="my-tooltip"
   data-tooltip-html={ReactDOMServer.renderToStaticMarkup(<div>I am <b>JSX</b> content</div>)}
 >
@@ -172,7 +176,7 @@ If there isn't, feel free to [submit a new issue](https://github.com/ReactToolti
 
 ### The tooltip is broken/not showing up
 
-Make sure you've imported the default styling. You only need to do this once on your application, `App.jsx`/`App.tsx` is usually a good place to do it.
+Make sure you've imported the default styling. You only need to do this once on your application and only if you are using a version before `5.13.0`, `App.jsx`/`App.tsx` is usually a good place to do it.
 
 ```jsx
 import 'react-tooltip/dist/react-tooltip.css'
@@ -184,7 +188,7 @@ If `data-tooltip-content` and `data-tooltip-html` are both unset (or they have e
 
 ### Next.js `TypeError: f is not a function`
 
-This problem seems to be caused by a bug related to the SWC bundler used by Next.js. 
+This problem seems to be caused by a bug related to the SWC bundler used by Next.js.
 The best way to solve this is to upgrade to `[email protected]` or later versions.
 
 Less ideally, if you're unable to upgrade, you can set `swcMinify: false` on your `next.config.js` file.
@@ -199,7 +203,7 @@ This is specially relevant when using components that are conditionally rendered
 
 Always try to keep the `<Tooltip />` component rendered, so if you're having issues with a tooltip you've placed inside a component which is placed/removed from the DOM dynamically, try to move the tooltip outside of it.
 
-We usually recommend placing the tooltip component directly inside the root component of your application (usually on `App.jsx`/`App.tsx`). You can also move the `import 'react-tooltip/dist/react-tooltip.css'` there.
+We usually recommend placing the tooltip component directly inside the root component of your application (usually on `App.jsx`/`App.tsx`).
 
 #### Dynamically generated anchor elements
 
@@ -212,18 +216,12 @@ Here's a simple example on how to improve performance when using dynamically gen
 ```jsx
 // ❌ BAD
 <div className="items-container">
-  {
-    myItems.map(({ id, content, tooltip }) => (
-      <div
-        key={id}
-        className="item"
-        data-tooltip-id={`tooltip-${id}`}
-      >
-        {content}
-        <Tooltip id={`tooltip-${id}`} content={tooltip} />
-      </div>
-    ))
-  }
+  {myItems.map(({ id, content, tooltip }) => (
+    <div key={id} className="item" data-tooltip-id={`tooltip-${id}`}>
+      {content}
+      <Tooltip id={`tooltip-${id}`} content={tooltip} />
+    </div>
+  ))}
 </div>
 ```
 
@@ -268,7 +266,6 @@ Here's a simple example on how to improve performance when using dynamically gen
 
 [wwayne](https://github.com/wwayne) (inactive) - Creator of the original React Tooltip (V1.x ~ V4.x.)
 
-
 We would gladly accept a new maintainer to help out!
 
 ## Contributing

docs/docs/examples/anchor-select.mdx

@@ -7,7 +7,6 @@ sidebar_position: 1
 Using the ReactTooltip anchor select prop.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -48,7 +47,6 @@ A CSS selector for a specific id begins with a `#`. Don't forget to put it befor
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a id="my-anchor-element-id">◕‿‿◕</a>
 <Tooltip
@@ -59,10 +57,7 @@ import 'react-tooltip/dist/react-tooltip.css';
 ```
 
 <TooltipAnchor id="my-anchor-element-id">◕‿‿◕</TooltipAnchor>
-<Tooltip
-  anchorSelect="#my-anchor-element-id"
-  content="Hello world!"
-/>
+<Tooltip anchorSelect="#my-anchor-element-id" content="Hello world!" />
 
 #### Using class attribute
 
@@ -74,7 +69,6 @@ A CSS selector for a specific id begins with a `.`. Don't forget to put it befor
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a className="my-anchor-element-class">◕‿‿◕</a>
 <a className="my-anchor-element-class">◕‿‿◕</a>
@@ -88,23 +82,12 @@ import 'react-tooltip/dist/react-tooltip.css';
 ```
 
 <div style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}>
-  <TooltipAnchor className="my-anchor-element-class">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <TooltipAnchor className="my-anchor-element-class">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <TooltipAnchor className="my-anchor-element-class">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <TooltipAnchor className="my-anchor-element-class">
-    ◕‿‿◕
-  </TooltipAnchor>
+  <TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
+  <TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
+  <TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
+  <TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
 </div>
-<Tooltip
-  anchorSelect=".my-anchor-element-class"
-  content="Hello world!"
-/>
+<Tooltip anchorSelect=".my-anchor-element-class" content="Hello world!" />
 
 ### Complex selectors
 
@@ -122,7 +105,6 @@ This example uses the name attribute, but it works for any HTML attribute (id, c
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a name="my-anchor-element-1">◕‿‿◕</a>
 <a name="my-anchor-element-2">◕‿‿◕</a>
@@ -135,23 +117,12 @@ import 'react-tooltip/dist/react-tooltip.css';
 ```
 
 <div style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}>
-  <TooltipAnchor name="my-anchor-element-1">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <TooltipAnchor name="my-anchor-element-2">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <TooltipAnchor name="my-anchor-element-3">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <TooltipAnchor name="my-anchor-element-4">
-    ◕‿‿◕
-  </TooltipAnchor>
+  <TooltipAnchor name="my-anchor-element-1">◕‿‿◕</TooltipAnchor>
+  <TooltipAnchor name="my-anchor-element-2">◕‿‿◕</TooltipAnchor>
+  <TooltipAnchor name="my-anchor-element-3">◕‿‿◕</TooltipAnchor>
+  <TooltipAnchor name="my-anchor-element-4">◕‿‿◕</TooltipAnchor>
 </div>
-<Tooltip
-  anchorSelect="[name^='my-anchor-element-']"
-  content="Hello world!"
-/>
+<Tooltip anchorSelect="[name^='my-anchor-element-']" content="Hello world!" />
 
 #### Child selector
 
@@ -165,7 +136,6 @@ Often you can just use a class selector or something else much simpler.
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <section id="section-anchor-select" style={{ marginTop: '100px' }}>
   <a>◕‿‿◕</a>
@@ -183,7 +153,7 @@ import 'react-tooltip/dist/react-tooltip.css';
 />
 ```
 
-<section 
+<section
   id="section-anchor-select"
   style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}
 >
@@ -199,4 +169,4 @@ import 'react-tooltip/dist/react-tooltip.css';
 <Tooltip
   anchorSelect="section[id='section-anchor-select'] > span:nth-child(even)"
   content="I am an even child!"
-/>
+/>

docs/docs/examples/basic-examples.mdx

@@ -7,7 +7,6 @@ sidebar_position: 0
 Some basic examples of how to use the ReactTooltip component.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -38,7 +37,6 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
   ◕‿‿◕
@@ -49,7 +47,15 @@ import 'react-tooltip/dist/react-tooltip.css';
 <Tooltip id="my-tooltip" />
 ```
 
-<div style={{ display: 'flex', flexDirection: 'row', width: 'fit-content', margin: 'auto', gap: '5px' }}>
+<div
+  style={{
+    display: 'flex',
+    flexDirection: 'row',
+    width: 'fit-content',
+    margin: 'auto',
+    gap: '5px',
+  }}
+>
   <TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
     ◕‿‿◕
   </TooltipAnchor>
@@ -61,25 +67,20 @@ import 'react-tooltip/dist/react-tooltip.css';
 
 ### Props
 
-
 #### Using anchor element `id`
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css'
 
 <a id="my-anchor-element">◕‿‿◕</a>
-<Tooltip 
+<Tooltip
   anchorSelect="#my-anchor-element"
   content="Hello world!"
 />
 ```
 
 <TooltipAnchor id="my-anchor-element">◕‿‿◕</TooltipAnchor>
-<Tooltip 
-  anchorSelect="#my-anchor-element"
-  content="Hello world!"
-/>
+<Tooltip anchorSelect="#my-anchor-element" content="Hello world!" />
 
 #### Using anchor elements `className`
 
@@ -91,21 +92,25 @@ Check the [Anchor select examples](./anchor-select.mdx) for more complex use cas
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css'
 
 <a className="my-anchor-element">◕‿‿◕</a>
 <a className="my-anchor-element">◕‿‿◕</a>
-<Tooltip 
+<Tooltip
   anchorSelect=".my-anchor-element"
   content="Hello world!"
 />
 ```
 
-<div style={{ display: 'flex', flexDirection: 'row', width: 'fit-content', margin: 'auto', gap: '5px' }}>
+<div
+  style={{
+    display: 'flex',
+    flexDirection: 'row',
+    width: 'fit-content',
+    margin: 'auto',
+    gap: '5px',
+  }}
+>
   <TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
   <TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
 </div>
-<Tooltip 
-  anchorSelect=".my-anchor-element"
-  content="Hello world!"
-/>
+<Tooltip anchorSelect=".my-anchor-element" content="Hello world!" />

docs/docs/examples/children.mdx

@@ -7,7 +7,6 @@ sidebar_position: 1
 Using children for setting the ReactTooltip content.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -41,7 +40,6 @@ This is useful for setting a placeholder for the tooltip content.
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a data-tooltip-id="my-tooltip">◕‿‿◕</a>
 <Tooltip id="my-tooltip">