@mintlify/common 1.0.319 → 1.0.320

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

@@ -1,3 +1,4 @@
+import { walk } from 'estree-walker';
 import { visit } from 'unist-util-visit';
 export const MINTLIFY_TAILWIND_PREFIX = 'mint-';
 export const rehypeDynamicTailwindCss = (tailwindSelectors) => (tree) => {
@@ -13,6 +14,29 @@ export const rehypeDynamicTailwindCss = (tailwindSelectors) => (tree) => {
                 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, tailwindSelectors) => {
@@ -27,10 +51,19 @@ const transformClassNames = (value, tailwindSelectors) => {
             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;
-        if (tailwindSelectors.some((selector) => selector.includes(baseClass))) {
-            const transformedClass = `${MINTLIFY_TAILWIND_PREFIX}${baseClass}`;
+        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;