@readme/markdown 9.0.1 → 9.0.3

package/components/TailwindStyle/index.tsx

@@ -11,29 +11,47 @@ const traverse = (node: Node, callback: (element: Node) => void) => {
   });
 };
 
-const TailwindStyle = ({ children }: React.PropsWithChildren<unknown>) => {
+interface Props {
+  children: React.ReactNode;
+  darkModeDataAttribute?: boolean;
+}
+
+const TailwindStyle = ({ children, darkModeDataAttribute }: Props) => {
   const [stylesheet, setStylesheet] = useState('');
-  const classes = useRef(new Set<string>());
-  const ref = useRef<HTMLDivElement>(null);
+  const classesSet = useRef(new Set<string>());
+  const ref = useRef<HTMLStyleElement>(null);
+  const [classes, setClasses] = useState<string[]>([]);
 
   const addClasses = useCallback((element: Node) => {
     if (!(element instanceof HTMLElement)) return;
 
     element.classList.forEach(className => {
-      classes.current.add(className);
+      classesSet.current.add(className);
     });
   }, []);
 
-  const updateStylesheet = useCallback(async () => {
-    const candidates = classes.current;
-    if (candidates.size === 0) return;
+  /*
+   * @note: regenerate stylesheet
+   */
+  useEffect(() => {
+    const run = async () => {
+      if (classes.length === 0) {
+        setStylesheet('');
+        return;
+      }
+
+      const sheet = await tailwindCompiler(classes, {
+        prefix: `.${tailwindPrefix}`,
+        darkModeDataAttribute,
+      });
+      /* @note: don't insert an empty stylesheet */
+      if (sheet.css.match(/^@layer utilities;/m)) 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);
+    };
 
-    setStylesheet(sheet.css);
-  }, []);
+    run();
+  }, [classes, darkModeDataAttribute]);
 
   /*
    * @note: execute once on load
@@ -41,9 +59,9 @@ const TailwindStyle = ({ children }: React.PropsWithChildren<unknown>) => {
   useEffect(() => {
     if (!ref.current) return;
 
-    ref.current.querySelectorAll(`.${tailwindPrefix}`).forEach(child => traverse(child, addClasses));
-    updateStylesheet();
-  });
+    ref.current.parentElement.querySelectorAll(`.${tailwindPrefix}`).forEach(child => traverse(child, addClasses));
+    setClasses(Array.from(classesSet.current));
+  }, [addClasses]);
 
   /*
    * @note: observe for changes
@@ -70,12 +88,12 @@ const TailwindStyle = ({ children }: React.PropsWithChildren<unknown>) => {
         }
 
         if (shouldUpdate) {
-          updateStylesheet();
+          setClasses(Array.from(classesSet.current));
         }
       });
     });
 
-    observer.observe(ref.current, {
+    observer.observe(ref.current.parentElement, {
       subtree: true,
       childList: true,
       attributes: true,
@@ -84,13 +102,15 @@ const TailwindStyle = ({ children }: React.PropsWithChildren<unknown>) => {
 
     // eslint-disable-next-line consistent-return
     return () => observer.disconnect();
-  }, [addClasses, updateStylesheet]);
+  }, [addClasses]);
 
   return (
-    <div ref={ref} style={{ display: 'contents' }}>
-      <style data-tailwind-stylesheet>{stylesheet}</style>
+    <>
+      <style ref={ref} data-tailwind-stylesheet>
+        {stylesheet}
+      </style>
       {children}
-    </div>
+    </>
   );
 };
 

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

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

package/dist/example/components.d.ts

@@ -4,5 +4,6 @@ declare const components: {
     MultipleExports: string;
     TailwindRootTest: string;
     Steps: string;
+    DarkMode: string;
 };
 export default components;

package/dist/main.js

@@ -18720,21 +18720,26 @@ async function loadStylesheet(id, base) {
 async function loadModule() {
     throw new Error('The browser build does not support plugins or config files.');
 }
-async function createCompiler() {
-    const css = `
+async function createCompiler({ darkModeDataAttribute }) {
+    let css = `
 @layer theme, base, components, utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
 `;
+    if (darkModeDataAttribute) {
+        css += `
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));`;
+    }
     return tl(css, {
         base: '/',
         loadStylesheet,
         loadModule,
     });
 }
-async function tailwindCompiler(classes, { prefix }) {
-    const compiler = await createCompiler();
+async function tailwindCompiler(classes, { prefix, darkModeDataAttribute }) {
+    const compiler = await createCompiler({ darkModeDataAttribute });
     const css = compiler.build(Array.from(classes));
     return lib_postcss([postcss_prefix_selector_default()({ prefix })]).process(css, { from: undefined });
 }
@@ -18749,36 +18754,47 @@ const traverse = (node, callback) => {
         traverse(child, callback);
     });
 };
-const TailwindStyle = ({ children }) => {
+const TailwindStyle = ({ children, darkModeDataAttribute }) => {
     const [stylesheet, setStylesheet] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)('');
-    const classes = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useRef)(new Set());
+    const classesSet = (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 [classes, setClasses] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)([]);
     const addClasses = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useCallback)((element) => {
         if (!(element instanceof HTMLElement))
             return;
         element.classList.forEach(className => {
-            classes.current.add(className);
+            classesSet.current.add(className);
         });
     }, []);
-    const updateStylesheet = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useCallback)(async () => {
-        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);
-    }, []);
+    /*
+     * @note: regenerate stylesheet
+     */
+    (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
+        const run = async () => {
+            if (classes.length === 0) {
+                setStylesheet('');
+                return;
+            }
+            const sheet = await tailwindCompiler(classes, {
+                prefix: `.${tailwindPrefix}`,
+                darkModeDataAttribute,
+            });
+            /* @note: don't insert an empty stylesheet */
+            if (sheet.css.match(/^@layer utilities;/m))
+                return;
+            setStylesheet(sheet.css);
+        };
+        run();
+    }, [classes, darkModeDataAttribute]);
     /*
      * @note: execute once on load
      */
     (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
         if (!ref.current)
             return;
-        ref.current.querySelectorAll(`.${tailwindPrefix}`).forEach(child => traverse(child, addClasses));
-        updateStylesheet();
-    });
+        ref.current.parentElement.querySelectorAll(`.${tailwindPrefix}`).forEach(child => traverse(child, addClasses));
+        setClasses(Array.from(classesSet.current));
+    }, [addClasses]);
     /*
      * @note: observe for changes
      */
@@ -18803,11 +18819,11 @@ const TailwindStyle = ({ children }) => {
                     shouldUpdate = true;
                 }
                 if (shouldUpdate) {
-                    updateStylesheet();
+                    setClasses(Array.from(classesSet.current));
                 }
             });
         });
-        observer.observe(ref.current, {
+        observer.observe(ref.current.parentElement, {
             subtree: true,
             childList: true,
             attributes: true,
@@ -18815,9 +18831,9 @@ const TailwindStyle = ({ children }) => {
         });
         // eslint-disable-next-line consistent-return
         return () => observer.disconnect();
-    }, [addClasses, updateStylesheet]);
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { ref: ref, style: { display: 'contents' } },
-        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("style", { "data-tailwind-stylesheet": true }, stylesheet),
+    }, [addClasses]);
+    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);
@@ -83755,7 +83771,7 @@ const compile_compile = async (text, { components = {}, copyButtons, useTailwind
             ...opts,
         });
         const string = String(vfile)
-            .replace(/await import\(_resolveDynamicMdxSpecifier\(('react'|"react")\)\)/, 'arguments[0].imports.React')
+            .replaceAll(/await import\(_resolveDynamicMdxSpecifier\(('react'|"react")\)\)/g, 'arguments[0].imports.React')
             .replace('"use strict";', '"use strict";\nconst { user } = arguments[0].imports;\n');
         return string;
     }

package/dist/main.node.js

@@ -21749,21 +21749,26 @@ async function loadStylesheet(id, base) {
 async function loadModule() {
     throw new Error('The browser build does not support plugins or config files.');
 }
-async function createCompiler() {
-    const css = `
+async function createCompiler({ darkModeDataAttribute }) {
+    let css = `
 @layer theme, base, components, utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
 `;
+    if (darkModeDataAttribute) {
+        css += `
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));`;
+    }
     return tl(css, {
         base: '/',
         loadStylesheet,
         loadModule,
     });
 }
-async function tailwindCompiler(classes, { prefix }) {
-    const compiler = await createCompiler();
+async function tailwindCompiler(classes, { prefix, darkModeDataAttribute }) {
+    const compiler = await createCompiler({ darkModeDataAttribute });
     const css = compiler.build(Array.from(classes));
     return lib_postcss([postcss_prefix_selector_default()({ prefix })]).process(css, { from: undefined });
 }
@@ -21778,36 +21783,47 @@ const traverse = (node, callback) => {
         traverse(child, callback);
     });
 };
-const TailwindStyle = ({ children }) => {
+const TailwindStyle = ({ children, darkModeDataAttribute }) => {
     const [stylesheet, setStylesheet] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)('');
-    const classes = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useRef)(new Set());
+    const classesSet = (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 [classes, setClasses] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)([]);
     const addClasses = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useCallback)((element) => {
         if (!(element instanceof HTMLElement))
             return;
         element.classList.forEach(className => {
-            classes.current.add(className);
+            classesSet.current.add(className);
         });
     }, []);
-    const updateStylesheet = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useCallback)(async () => {
-        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);
-    }, []);
+    /*
+     * @note: regenerate stylesheet
+     */
+    (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
+        const run = async () => {
+            if (classes.length === 0) {
+                setStylesheet('');
+                return;
+            }
+            const sheet = await tailwindCompiler(classes, {
+                prefix: `.${tailwindPrefix}`,
+                darkModeDataAttribute,
+            });
+            /* @note: don't insert an empty stylesheet */
+            if (sheet.css.match(/^@layer utilities;/m))
+                return;
+            setStylesheet(sheet.css);
+        };
+        run();
+    }, [classes, darkModeDataAttribute]);
     /*
      * @note: execute once on load
      */
     (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
         if (!ref.current)
             return;
-        ref.current.querySelectorAll(`.${tailwindPrefix}`).forEach(child => traverse(child, addClasses));
-        updateStylesheet();
-    });
+        ref.current.parentElement.querySelectorAll(`.${tailwindPrefix}`).forEach(child => traverse(child, addClasses));
+        setClasses(Array.from(classesSet.current));
+    }, [addClasses]);
     /*
      * @note: observe for changes
      */
@@ -21832,11 +21848,11 @@ const TailwindStyle = ({ children }) => {
                     shouldUpdate = true;
                 }
                 if (shouldUpdate) {
-                    updateStylesheet();
+                    setClasses(Array.from(classesSet.current));
                 }
             });
         });
-        observer.observe(ref.current, {
+        observer.observe(ref.current.parentElement, {
             subtree: true,
             childList: true,
             attributes: true,
@@ -21844,9 +21860,9 @@ const TailwindStyle = ({ children }) => {
         });
         // eslint-disable-next-line consistent-return
         return () => observer.disconnect();
-    }, [addClasses, updateStylesheet]);
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { ref: ref, style: { display: 'contents' } },
-        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("style", { "data-tailwind-stylesheet": true }, stylesheet),
+    }, [addClasses]);
+    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);
@@ -88347,7 +88363,7 @@ const compile_compile = async (text, { components = {}, copyButtons, useTailwind
             ...opts,
         });
         const string = String(vfile)
-            .replace(/await import\(_resolveDynamicMdxSpecifier\(('react'|"react")\)\)/, 'arguments[0].imports.React')
+            .replaceAll(/await import\(_resolveDynamicMdxSpecifier\(('react'|"react")\)\)/g, 'arguments[0].imports.React')
             .replace('"use strict";', '"use strict";\nconst { user } = arguments[0].imports;\n');
         return string;
     }