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

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

@@ -0,0 +1,68 @@
+/* eslint-disable no-await-in-loop */
+import { readFile, writeFile } from 'node:fs/promises'
+
+const cssMinifier = (css) =>
+  css
+    .replace(/([^0-9a-zA-Z.#])\s+/g, '$1')
+    .replace(/\s([^0-9a-zA-Z.#]+)/g, '$1')
+    .replace(/;}/g, '}')
+    .replace(/\/\*.*?\*\//g, '')
+
+/* eslint-disable no-param-reassign */
+/**
+ * This plugin is very similar to the `replace`, but instead of only
+ * check for strings, this plugin check for everything that matches the query.
+ * expected input: { 'lorem:': 'ipsum' }
+ * or
+ * expected input: { 'lorem:': 'file:myfile.css' }
+ */
+export default function replaceBeforeSaveFile(replaceObject = {}) {
+  return {
+    // this name will show up in warnings and errors of rollup execution
+    name: 'modify-generated-files',
+    /**
+     * This write bundle is executed after the files being written.
+     * Docs: https://rollupjs.org/plugin-development/#writebundle
+     */
+    async writeBundle(options, bundle) {
+      const replaceKeys = Object.keys(replaceObject)
+      if (replaceKeys.length > 0) {
+        const files = Object.keys(bundle)
+
+        let file = null
+        let key = null
+        let regex = null
+        for (let index = 0; index < files.length; index += 1) {
+          file = files[index]
+
+          if (file && bundle[file].code) {
+            for (let indexKeys = 0; indexKeys < replaceKeys.length; indexKeys += 1) {
+              key = replaceKeys[indexKeys]
+              regex = new RegExp(key, 'g')
+
+              if (bundle[file].code.includes(key)) {
+                if (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}\``)
+                  }
+                } else {
+                  bundle[file].code = bundle[file].code.replace(regex, replaceObject[key])
+                }
+
+                await writeFile(options.file, bundle[file].code)
+              }
+            }
+          }
+        }
+      }
+    },
+  }
+}

rollup.config.prod.js

@@ -7,6 +7,8 @@ import { nodeResolve } from '@rollup/plugin-node-resolve'
 import ts from '@rollup/plugin-typescript'
 import { terser } from 'rollup-plugin-terser'
 import typescript from 'typescript'
+import { fileURLToPath } from 'node:url'
+import replaceBeforeSaveFile from './rollup-plugins/replace-before-save-file.js'
 import * as pkg from './package.json'
 
 const input = ['src/index.tsx']
@@ -24,21 +26,13 @@ const banner = `
 const external = [
   ...Object.keys(pkg.peerDependencies ?? {}),
   ...Object.keys(pkg.dependencies ?? {}),
+  fileURLToPath(new URL('temp-path-for-styles', import.meta.url)),
 ]
 
 const buildFormats = [
-  /**
-   * Temporary build to keep the extracted CSS file.
-   * I don't want to do a major release now with only the CSS change,
-   * so, we will keep the css being exported by the lib and now
-   * we will inject the css into the head by default.
-   * The CSS file import is deprecated and the file is only
-   * for style reference now.
-   */
   {
     file: 'dist/react-tooltip.mjs',
     format: 'es',
-    extractCSS: true,
   },
   {
     file: 'dist/react-tooltip.umd.js',
@@ -74,37 +68,39 @@ const sharedPlugins = [
     typescript,
     tsconfig: './tsconfig.json',
     noEmitOnError: false,
-    // declaration: true,
-    // declarationDir: './build',
   }),
   commonjs({
     include: 'node_modules/**',
   }),
 ]
 // this step is just to build the minified javascript files
-const minifiedBuildFormats = buildFormats.map(({ file, extractCSS, ...rest }) => ({
+const minifiedBuildFormats = buildFormats.map(({ file, ...rest }) => ({
   file: file.replace(/(\.[cm]?js)$/, '.min$1'),
   ...rest,
   minify: true,
-  extractCSS,
   plugins: [terser({ compress: { directives: false } }), filesize()],
 }))
 
 const allBuildFormats = [...buildFormats, ...minifiedBuildFormats]
 
 const config = allBuildFormats.map(
-  ({ file, format, globals, plugins: specificPlugins, minify, extractCSS }) => {
+  ({ file, format, globals, plugins: specificPlugins, minify }) => {
     const plugins = [
       ...sharedPlugins,
       postcss({
-        // eslint-disable-next-line no-nested-ternary
-        extract: extractCSS ? (minify ? 'react-tooltip.min.css' : 'react-tooltip.css') : false, // this will generate a specific file and override on multiples build, but the css will be the same
+        extract: minify ? 'react-tooltip.min.css' : 'react-tooltip.css', // this will generate a specific file and override on multiples build, but the css will be the same
         autoModules: true,
         include: '**/*.css',
         extensions: ['.css'],
         plugins: [],
         minimize: Boolean(minify),
       }),
+      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',
+      }),
     ]
 
     if (specificPlugins && specificPlugins.length) {

src/index.tsx

@@ -1,4 +1,7 @@
 import './tokens.css'
+
+import styleInject from 'utils/style-inject'
+
 import type {
   ChildrenType,
   DataAttribute,
@@ -13,6 +16,12 @@ 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
+const TooltipStyles = 'temp-content-for-styles'
+
+// @ts-ignore
+styleInject(TooltipStyles)
+
 export { TooltipController as Tooltip } from './components/TooltipController'
 export { TooltipProvider, TooltipWrapper } from './components/TooltipProvider'
 export type {

src/utils/style-inject.ts

@@ -0,0 +1,34 @@
+function styleInject(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')) {
+    return
+  }
+
+  const head = document.head || document.getElementsByTagName('head')[0]
+  const style: any = document.createElement('style')
+  style.id = 'react-tooltip-styles'
+  style.type = 'text/css'
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild)
+    } else {
+      head.appendChild(style)
+    }
+  } else {
+    head.appendChild(style)
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css
+  } else {
+    style.appendChild(document.createTextNode(css))
+  }
+}
+
+export default styleInject