@readme/markdown 9.0.0 → 9.0.2

package/components/TailwindStyle/index.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 
 import { tailwindPrefix } from '../../utils/consts';
 import { tailwindCompiler } from '../../utils/tailwind-compiler';
@@ -12,10 +11,10 @@ const traverse = (node: Node, callback: (element: Node) => void) => {
   });
 };
 
-const TailwindStyle = () => {
+const TailwindStyle = ({ children }: React.PropsWithChildren<unknown>) => {
   const [stylesheet, setStylesheet] = useState('');
-  const hasDom = typeof document !== 'undefined';
   const classes = useRef(new Set<string>());
+  const ref = useRef<HTMLStyleElement>(null);
 
   const addClasses = useCallback((element: Node) => {
     if (!(element instanceof HTMLElement)) return;
@@ -26,13 +25,31 @@ const TailwindStyle = () => {
   }, []);
 
   const updateStylesheet = useCallback(async () => {
-    const sheet = await tailwindCompiler(Array.from(classes.current), { prefix: `.${tailwindPrefix}` });
+    const candidates = classes.current;
+    if (candidates.size === 0) return;
+
+    const sheet = await tailwindCompiler(Array.from(candidates), { prefix: `.${tailwindPrefix}` });
+    /* @note: don't insert an empty stylesheet */
+    if (sheet.css.match(/^@layer utilities;/m)) return;
+
     setStylesheet(sheet.css);
   }, []);
 
-  // Set up mutation observer to update classes
+  /*
+   * @note: execute once on load
+   */
   useEffect(() => {
-    if (!hasDom) return;
+    if (!ref.current) return;
+
+    ref.current.parentElement.querySelectorAll(`.${tailwindPrefix}`).forEach(child => traverse(child, addClasses));
+    updateStylesheet();
+  });
+
+  /*
+   * @note: observe for changes
+   */
+  useEffect(() => {
+    if (!ref.current) return;
 
     const observer = new MutationObserver((records: MutationRecord[]) => {
       let shouldUpdate = false;
@@ -58,7 +75,7 @@ const TailwindStyle = () => {
       });
     });
 
-    observer.observe(document.body, {
+    observer.observe(ref.current.parentElement, {
       subtree: true,
       childList: true,
       attributes: true,
@@ -67,12 +84,15 @@ const TailwindStyle = () => {
 
     // eslint-disable-next-line consistent-return
     return () => observer.disconnect();
-  }, [addClasses, hasDom, updateStylesheet]);
-
-  return hasDom ? (
-    createPortal(<style data-tailwind-stylesheet>{stylesheet}</style>, document.head)
-  ) : (
-    <style data-tailwind-stylesheet>{stylesheet}</style>
+  }, [addClasses, updateStylesheet]);
+
+  return (
+    <>
+      <style ref={ref} data-tailwind-stylesheet>
+        {stylesheet}
+      </style>
+      {children}
+    </>
   );
 };
 

package/dist/components/TailwindStyle/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const TailwindStyle: () => React.JSX.Element;
+declare const TailwindStyle: ({ children }: React.PropsWithChildren<unknown>) => React.JSX.Element;
 export default TailwindStyle;

package/dist/main.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("@readme/variable"), require("@tippyjs/react"), require("mermaid"), require("react"), require("react-dom"));
+		module.exports = factory(require("@readme/variable"), require("@tippyjs/react"), require("mermaid"), require("react"));
 	else if(typeof define === 'function' && define.amd)
-		define(["@readme/variable", "@tippyjs/react", "mermaid", "react", "react-dom"], factory);
+		define(["@readme/variable", "@tippyjs/react", "mermaid", "react"], factory);
 	else {
-		var a = typeof exports === 'object' ? factory(require("@readme/variable"), require("@tippyjs/react"), require("mermaid"), require("react"), require("react-dom")) : factory(root["@readme/variable"], root["@tippyjs/react"], root["mermaid"], root["React"], root["ReactDOM"]);
+		var a = typeof exports === 'object' ? factory(require("@readme/variable"), require("@tippyjs/react"), require("mermaid"), require("react")) : factory(root["@readme/variable"], root["@tippyjs/react"], root["mermaid"], root["React"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(self, (__WEBPACK_EXTERNAL_MODULE__8167__, __WEBPACK_EXTERNAL_MODULE__6570__, __WEBPACK_EXTERNAL_MODULE__1387__, __WEBPACK_EXTERNAL_MODULE__1307__, __WEBPACK_EXTERNAL_MODULE__8759__) => {
+})(self, (__WEBPACK_EXTERNAL_MODULE__8167__, __WEBPACK_EXTERNAL_MODULE__6570__, __WEBPACK_EXTERNAL_MODULE__1387__, __WEBPACK_EXTERNAL_MODULE__1307__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -17766,14 +17766,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__1307__;
 
 /***/ }),
 
-/***/ 8759:
-/***/ ((module) => {
-
-"use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__8759__;
-
-/***/ }),
-
 /***/ 9746:
 /***/ (() => {
 
@@ -18589,8 +18581,6 @@ const TailwindRoot = ({ children, flow }) => {
 };
 /* harmony default export */ const components_TailwindRoot = (TailwindRoot);
 
-// EXTERNAL MODULE: external {"amd":"react-dom","commonjs2":"react-dom","commonjs":"react-dom","root":"ReactDOM","umd":"react-dom"}
-var external_amd_react_dom_commonjs2_react_dom_commonjs_react_dom_root_ReactDOM_umd_react_dom_ = __webpack_require__(8759);
 // EXTERNAL MODULE: ./node_modules/postcss/lib/postcss.js
 var postcss = __webpack_require__(2895);
 var postcss_default = /*#__PURE__*/__webpack_require__.n(postcss);
@@ -18753,17 +18743,16 @@ async function tailwindCompiler(classes, { prefix }) {
 
 
 
-
 const traverse = (node, callback) => {
     callback(node);
     node.childNodes.forEach(child => {
         traverse(child, callback);
     });
 };
-const TailwindStyle = () => {
+const TailwindStyle = ({ children }) => {
     const [stylesheet, setStylesheet] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)('');
-    const hasDom = typeof document !== 'undefined';
     const classes = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useRef)(new Set());
+    const ref = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useRef)(null);
     const addClasses = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useCallback)((element) => {
         if (!(element instanceof HTMLElement))
             return;
@@ -18772,12 +18761,29 @@ const TailwindStyle = () => {
         });
     }, []);
     const updateStylesheet = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useCallback)(async () => {
-        const sheet = await tailwindCompiler(Array.from(classes.current), { prefix: `.${tailwindPrefix}` });
+        const candidates = classes.current;
+        if (candidates.size === 0)
+            return;
+        const sheet = await tailwindCompiler(Array.from(candidates), { prefix: `.${tailwindPrefix}` });
+        /* @note: don't insert an empty stylesheet */
+        if (sheet.css.match(/^@layer utilities;/m))
+            return;
         setStylesheet(sheet.css);
     }, []);
-    // Set up mutation observer to update classes
+    /*
+     * @note: execute once on load
+     */
     (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
-        if (!hasDom)
+        if (!ref.current)
+            return;
+        ref.current.parentElement.querySelectorAll(`.${tailwindPrefix}`).forEach(child => traverse(child, addClasses));
+        updateStylesheet();
+    });
+    /*
+     * @note: observe for changes
+     */
+    (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
+        if (!ref.current)
             return;
         const observer = new MutationObserver((records) => {
             let shouldUpdate = false;
@@ -18801,7 +18807,7 @@ const TailwindStyle = () => {
                 }
             });
         });
-        observer.observe(document.body, {
+        observer.observe(ref.current.parentElement, {
             subtree: true,
             childList: true,
             attributes: true,
@@ -18809,8 +18815,10 @@ const TailwindStyle = () => {
         });
         // eslint-disable-next-line consistent-return
         return () => observer.disconnect();
-    }, [addClasses, hasDom, updateStylesheet]);
-    return hasDom ? ((0,external_amd_react_dom_commonjs2_react_dom_commonjs_react_dom_root_ReactDOM_umd_react_dom_.createPortal)(external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("style", { "data-tailwind-stylesheet": true }, stylesheet), document.head)) : (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("style", { "data-tailwind-stylesheet": true }, stylesheet));
+    }, [addClasses, updateStylesheet]);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement((external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default()).Fragment, null,
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("style", { ref: ref, "data-tailwind-stylesheet": true }, stylesheet),
+        children));
 };
 /* harmony default export */ const components_TailwindStyle = (TailwindStyle);
 

package/dist/main.node.js

@@ -21772,17 +21772,16 @@ async function tailwindCompiler(classes, { prefix }) {
 
 
 
-
 const traverse = (node, callback) => {
     callback(node);
     node.childNodes.forEach(child => {
         traverse(child, callback);
     });
 };
-const TailwindStyle = () => {
+const TailwindStyle = ({ children }) => {
     const [stylesheet, setStylesheet] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)('');
-    const hasDom = typeof document !== 'undefined';
     const classes = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useRef)(new Set());
+    const ref = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useRef)(null);
     const addClasses = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useCallback)((element) => {
         if (!(element instanceof HTMLElement))
             return;
@@ -21791,12 +21790,29 @@ const TailwindStyle = () => {
         });
     }, []);
     const updateStylesheet = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useCallback)(async () => {
-        const sheet = await tailwindCompiler(Array.from(classes.current), { prefix: `.${tailwindPrefix}` });
+        const candidates = classes.current;
+        if (candidates.size === 0)
+            return;
+        const sheet = await tailwindCompiler(Array.from(candidates), { prefix: `.${tailwindPrefix}` });
+        /* @note: don't insert an empty stylesheet */
+        if (sheet.css.match(/^@layer utilities;/m))
+            return;
         setStylesheet(sheet.css);
     }, []);
-    // Set up mutation observer to update classes
+    /*
+     * @note: execute once on load
+     */
     (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
-        if (!hasDom)
+        if (!ref.current)
+            return;
+        ref.current.parentElement.querySelectorAll(`.${tailwindPrefix}`).forEach(child => traverse(child, addClasses));
+        updateStylesheet();
+    });
+    /*
+     * @note: observe for changes
+     */
+    (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
+        if (!ref.current)
             return;
         const observer = new MutationObserver((records) => {
             let shouldUpdate = false;
@@ -21820,7 +21836,7 @@ const TailwindStyle = () => {
                 }
             });
         });
-        observer.observe(document.body, {
+        observer.observe(ref.current.parentElement, {
             subtree: true,
             childList: true,
             attributes: true,
@@ -21828,8 +21844,10 @@ const TailwindStyle = () => {
         });
         // eslint-disable-next-line consistent-return
         return () => observer.disconnect();
-    }, [addClasses, hasDom, updateStylesheet]);
-    return hasDom ? ((0,external_amd_react_dom_commonjs2_react_dom_commonjs_react_dom_root_ReactDOM_umd_react_dom_namespaceObject.createPortal)(external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("style", { "data-tailwind-stylesheet": true }, stylesheet), document.head)) : (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("style", { "data-tailwind-stylesheet": true }, stylesheet));
+    }, [addClasses, updateStylesheet]);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement((external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default()).Fragment, null,
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("style", { ref: ref, "data-tailwind-stylesheet": true }, stylesheet),
+        children));
 };
 /* harmony default export */ const components_TailwindStyle = (TailwindStyle);