@readme/markdown 15.3.0 → 15.4.0

package/components/TailwindStyle/index.tsx

@@ -14,9 +14,11 @@ const traverse = (node: Node, callback: (element: Node) => void) => {
 interface Props {
   children: React.ReactNode;
   darkModeDataAttribute?: string | null;
+  /** See the matching param on `tailwindCompiler` in `utils/tailwind-compiler.ts`. */
+  darkModeRootSelector?: string | null;
 }
 
-const TailwindStyle = ({ children, darkModeDataAttribute }: Props) => {
+const TailwindStyle = ({ children, darkModeDataAttribute, darkModeRootSelector }: Props) => {
   const [stylesheet, setStylesheet] = useState('');
   const classesSet = useRef(new Set<string>());
   const ref = useRef<HTMLStyleElement>(null);
@@ -43,6 +45,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }: Props) => {
       const sheet = await tailwindCompiler(classes, {
         prefix: `.${tailwindPrefix}`,
         darkModeDataAttribute,
+        darkModeRootSelector,
       });
       /* @note: don't insert an empty stylesheet */
       if (sheet.css.match(/^@layer utilities;/m)) return;
@@ -51,7 +54,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }: Props) => {
     };
 
     run();
-  }, [classes, darkModeDataAttribute]);
+  }, [classes, darkModeDataAttribute, darkModeRootSelector]);
 
   /*
    * @note: execute once on load

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

@@ -2,6 +2,8 @@ import React from 'react';
 interface Props {
     children: React.ReactNode;
     darkModeDataAttribute?: string | null;
+    /** See the matching param on `tailwindCompiler` in `utils/tailwind-compiler.ts`. */
+    darkModeRootSelector?: string | null;
 }
-declare const TailwindStyle: ({ children, darkModeDataAttribute }: Props) => React.JSX.Element;
+declare const TailwindStyle: ({ children, darkModeDataAttribute, darkModeRootSelector }: Props) => React.JSX.Element;
 export default TailwindStyle;

package/dist/main.js

@@ -12675,7 +12675,7 @@ async function loadStylesheet(id, base) {
 async function loadModule() {
     throw new Error('The browser build does not support plugins or config files.');
 }
-async function createCompiler({ darkModeDataAttribute }) {
+async function createCompiler({ darkModeDataAttribute, darkModeRootSelector, }) {
     let css = `
 @layer theme, base, components, utilities;
 
@@ -12683,9 +12683,12 @@ async function createCompiler({ darkModeDataAttribute }) {
 @import "tailwindcss/utilities.css" layer(utilities);
 `;
     if (darkModeDataAttribute) {
+        // Anchors `dark:` to `darkModeRootSelector`'s own attribute instead of any ancestor's,
+        // when supplied — see the `darkModeRootSelector` param doc below for why there's no default.
+        const root = darkModeRootSelector || '';
         css += `
 
-@custom-variant dark (&:where([${darkModeDataAttribute}=dark], [${darkModeDataAttribute}=dark] *));`;
+@custom-variant dark (&:where(${root}[${darkModeDataAttribute}=dark], ${root}[${darkModeDataAttribute}=dark] *));`;
     }
     return Hu(css, {
         base: '/',
@@ -12693,8 +12696,8 @@ async function createCompiler({ darkModeDataAttribute }) {
         loadModule,
     });
 }
-async function tailwindCompiler(classes, { prefix, darkModeDataAttribute }) {
-    const compiler = await createCompiler({ darkModeDataAttribute });
+async function tailwindCompiler(classes, { prefix, darkModeDataAttribute, darkModeRootSelector, }) {
+    const compiler = await createCompiler({ darkModeDataAttribute, darkModeRootSelector });
     const css = compiler.build(Array.from(classes));
     return lib_postcss([postcss_prefix_selector_default()({ prefix })]).process(css, { from: undefined });
 }
@@ -12709,7 +12712,7 @@ const traverse = (node, callback) => {
         traverse(child, callback);
     });
 };
-const TailwindStyle = ({ children, darkModeDataAttribute }) => {
+const TailwindStyle = ({ children, darkModeDataAttribute, darkModeRootSelector }) => {
     const [stylesheet, setStylesheet] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)('');
     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);
@@ -12733,6 +12736,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
             const sheet = await tailwindCompiler(classes, {
                 prefix: `.${tailwindPrefix}`,
                 darkModeDataAttribute,
+                darkModeRootSelector,
             });
             /* @note: don't insert an empty stylesheet */
             if (sheet.css.match(/^@layer utilities;/m))
@@ -12740,7 +12744,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
             setStylesheet(sheet.css);
         };
         run();
-    }, [classes, darkModeDataAttribute]);
+    }, [classes, darkModeDataAttribute, darkModeRootSelector]);
     /*
      * @note: execute once on load
      */

package/dist/main.node.js

@@ -25260,7 +25260,7 @@ async function loadStylesheet(id, base) {
 async function loadModule() {
     throw new Error('The browser build does not support plugins or config files.');
 }
-async function createCompiler({ darkModeDataAttribute }) {
+async function createCompiler({ darkModeDataAttribute, darkModeRootSelector, }) {
     let css = `
 @layer theme, base, components, utilities;
 
@@ -25268,9 +25268,12 @@ async function createCompiler({ darkModeDataAttribute }) {
 @import "tailwindcss/utilities.css" layer(utilities);
 `;
     if (darkModeDataAttribute) {
+        // Anchors `dark:` to `darkModeRootSelector`'s own attribute instead of any ancestor's,
+        // when supplied — see the `darkModeRootSelector` param doc below for why there's no default.
+        const root = darkModeRootSelector || '';
         css += `
 
-@custom-variant dark (&:where([${darkModeDataAttribute}=dark], [${darkModeDataAttribute}=dark] *));`;
+@custom-variant dark (&:where(${root}[${darkModeDataAttribute}=dark], ${root}[${darkModeDataAttribute}=dark] *));`;
     }
     return Hu(css, {
         base: '/',
@@ -25278,8 +25281,8 @@ async function createCompiler({ darkModeDataAttribute }) {
         loadModule,
     });
 }
-async function tailwindCompiler(classes, { prefix, darkModeDataAttribute }) {
-    const compiler = await createCompiler({ darkModeDataAttribute });
+async function tailwindCompiler(classes, { prefix, darkModeDataAttribute, darkModeRootSelector, }) {
+    const compiler = await createCompiler({ darkModeDataAttribute, darkModeRootSelector });
     const css = compiler.build(Array.from(classes));
     return lib_postcss([postcss_prefix_selector_default()({ prefix })]).process(css, { from: undefined });
 }
@@ -25294,7 +25297,7 @@ const traverse = (node, callback) => {
         traverse(child, callback);
     });
 };
-const TailwindStyle = ({ children, darkModeDataAttribute }) => {
+const TailwindStyle = ({ children, darkModeDataAttribute, darkModeRootSelector }) => {
     const [stylesheet, setStylesheet] = (0,external_react_.useState)('');
     const classesSet = (0,external_react_.useRef)(new Set());
     const ref = (0,external_react_.useRef)(null);
@@ -25318,6 +25321,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
             const sheet = await tailwindCompiler(classes, {
                 prefix: `.${tailwindPrefix}`,
                 darkModeDataAttribute,
+                darkModeRootSelector,
             });
             /* @note: don't insert an empty stylesheet */
             if (sheet.css.match(/^@layer utilities;/m))
@@ -25325,7 +25329,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
             setStylesheet(sheet.css);
         };
         run();
-    }, [classes, darkModeDataAttribute]);
+    }, [classes, darkModeDataAttribute, darkModeRootSelector]);
     /*
      * @note: execute once on load
      */