@mintlify/common 1.0.318 → 1.0.320

package/dist/mdx/getMDXOptions.d.ts

@@ -10,6 +10,7 @@ type MDXOptionsData = {
     pageMetadata: PageMetaTags;
     config?: DocsConfig | MintConfig;
     subdomain?: string;
+    tailwindSelectors?: string[];
 };
 export declare const getMDXOptions: ({ data, remarkPlugins, rehypePlugins, mdxExtracts, }: {
     data: MDXOptionsData;

package/dist/mdx/getMDXOptions.js

@@ -30,7 +30,7 @@ export const getMDXOptions = ({ data, remarkPlugins = [], rehypePlugins = [], md
             rehypeRawComponents,
             rehypeZoomImages,
             rehypeUnicodeIds,
-            rehypeDynamicTailwindCss,
+            [rehypeDynamicTailwindCss, data.tailwindSelectors],
             ...rehypePlugins,
         ],
         format: 'mdx',

package/dist/mdx/plugins/rehype/rehypeDynamicTailwindCss.d.ts

@@ -1,3 +1,3 @@
 import type { Root } from 'hast';
 export declare const MINTLIFY_TAILWIND_PREFIX = "mint-";
-export declare const rehypeDynamicTailwindCss: () => (tree: Root) => void;
+export declare const rehypeDynamicTailwindCss: (tailwindSelectors?: string[]) => (tree: Root) => void;

package/dist/mdx/plugins/rehype/rehypeDynamicTailwindCss.js

@@ -1,23 +1,47 @@
+import { walk } from 'estree-walker';
 import { visit } from 'unist-util-visit';
 export const MINTLIFY_TAILWIND_PREFIX = 'mint-';
-export const rehypeDynamicTailwindCss = () => {
-    return (tree) => {
-        visit(tree, (node) => {
-            if ((node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') &&
-                node.name &&
-                typeof node.name === 'string' &&
-                /^[a-z]/.test(node.name) && // check for valid html tags
-                !node.name.includes('.') &&
-                node.attributes.length > 0) {
-                const className = node.attributes.find((attr) => attr.type === 'mdxJsxAttribute' && attr.name === 'className');
-                if (className && typeof className.value === 'string') {
-                    className.value = transformClassNames(className.value);
+export const rehypeDynamicTailwindCss = (tailwindSelectors) => (tree) => {
+    visit(tree, (node) => {
+        if ((node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') &&
+            node.name &&
+            typeof node.name === 'string' &&
+            /^[a-z]/.test(node.name) && // check for valid html tags
+            !node.name.includes('.') &&
+            node.attributes.length > 0) {
+            const className = node.attributes.find((attr) => attr.type === 'mdxJsxAttribute' && attr.name === 'className');
+            if (className && typeof className.value === 'string') {
+                className.value = transformClassNames(className.value, tailwindSelectors);
+            }
+        }
+        if (node.type === 'mdxjsEsm' && node.data && node.data.estree) {
+            transformMdxJsEsmNode(node.data.estree, tailwindSelectors);
+        }
+    });
+};
+const transformMdxJsEsmNode = (estreeNode, tailwindSelectors) => {
+    walk(estreeNode, {
+        enter(node) {
+            if (node.type === 'JSXAttribute' &&
+                node.name.type === 'JSXIdentifier' &&
+                (node.name.name === 'className' || node.name.name === 'class')) {
+                if (node.value && node.value.type === 'Literal' && typeof node.value.value === 'string') {
+                    const originalValue = node.value.value;
+                    const transformedValue = transformClassNames(originalValue, tailwindSelectors);
+                    if (originalValue !== transformedValue) {
+                        node.value.value = transformedValue;
+                        if (typeof node.value.raw === 'string') {
+                            node.value.raw = JSON.stringify(transformedValue);
+                        }
+                    }
                 }
             }
-        });
-    };
+        },
+    });
 };
-const transformClassNames = (value) => {
+const transformClassNames = (value, tailwindSelectors) => {
+    if (!tailwindSelectors || !tailwindSelectors.length)
+        return value;
     return value
         .split(/\s+/)
         .map((className) => {
@@ -27,10 +51,22 @@ const transformClassNames = (value) => {
             return className;
         }
         const parts = className.split(':');
-        const baseClass = parts.pop();
+        let baseClass = parts.pop();
+        const hasImportantModifier = baseClass.startsWith('!');
+        if (hasImportantModifier) {
+            baseClass = baseClass.slice(1);
+        }
         const variants = parts;
-        const transformedClass = `${MINTLIFY_TAILWIND_PREFIX}${baseClass}`;
-        return [...variants, transformedClass].join(':');
+        if (tailwindSelectors.some((selector) => {
+            // remove the leading dot and any escaping backslashes from the selector
+            // for example, .bg-orange-400\\/50 -> bg-orange-400/50
+            const normalizedSelector = selector.replace(/^\.|\\+/g, '');
+            return normalizedSelector.includes(baseClass);
+        })) {
+            const transformedClass = `${hasImportantModifier ? '!' : ''}${MINTLIFY_TAILWIND_PREFIX}${baseClass}`;
+            return [...variants, transformedClass].join(':');
+        }
+        return className;
     })
         .join(' ');
 };