@mintlify/common 1.0.1258 → 1.0.1259

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

@@ -2,93 +2,438 @@ import { walk } from 'estree-walker';
 import { visit } from 'unist-util-visit';
 import { segment } from './segment.js';
 export const MINTLIFY_TAILWIND_PREFIX = 'mint-';
+const CLASS_HELPERS = new Set(['cn', 'clsx', 'classNames', 'classnames', 'twMerge', 'twJoin']);
 export const rehypeDynamicTailwindCss = (tailwindSelectors) => (tree) => {
     const normalizedTailwindSelectors = tailwindSelectors === null || tailwindSelectors === void 0 ? void 0 : tailwindSelectors.map(normalizeSelector);
+    if (!(normalizedTailwindSelectors === null || normalizedTailwindSelectors === void 0 ? void 0 : normalizedTailwindSelectors.length))
+        return;
+    const moduleScope = new Map();
+    const moduleScopes = [moduleScope];
+    visit(tree, (node) => {
+        if (node.type === 'mdxjsEsm' && node.data && node.data.estree) {
+            collectDeclarations(node.data.estree.body, moduleScope, moduleScopes);
+        }
+    });
     visit(tree, (node) => {
+        var _a;
         if ((node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') &&
             node.name &&
             typeof node.name === 'string' &&
             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, normalizedTailwindSelectors);
+            const className = node.attributes.find((attr) => attr.type === 'mdxJsxAttribute' && (attr.name === 'className' || attr.name === 'class'));
+            const value = className === null || className === void 0 ? void 0 : className.value;
+            if (className && typeof value === 'string') {
+                className.value = transformClassNames(value, normalizedTailwindSelectors);
+            }
+            else if (value && typeof value !== 'string' && ((_a = value.data) === null || _a === void 0 ? void 0 : _a.estree)) {
+                // example: <div className={isActive ? "bg-red-500" : "bg-blue-500"}>
+                const [statement] = value.data.estree.body;
+                if (statement && statement.type === 'ExpressionStatement') {
+                    statement.expression = transformExpressionClassNames(statement.expression, moduleScopes, normalizedTailwindSelectors);
+                }
             }
         }
         if (node.type === 'mdxjsEsm' && node.data && node.data.estree) {
-            transformMdxJsEsmNode(node.data.estree, normalizedTailwindSelectors);
+            transformMdxJsEsmNode(node.data.estree, moduleScopes, normalizedTailwindSelectors);
         }
     });
 };
-const transformMdxJsEsmNode = (estreeNode, tailwindSelectors) => {
+const collectDeclarations = (statements, scope, scopes) => {
+    for (const statement of statements) {
+        const declaration = statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement;
+        if ((declaration === null || declaration === void 0 ? void 0 : declaration.type) === 'FunctionDeclaration' && declaration.id) {
+            scope.set(declaration.id.name, { scopes });
+        }
+        if ((declaration === null || declaration === void 0 ? void 0 : declaration.type) !== 'VariableDeclaration')
+            continue;
+        for (const declarator of declaration.declarations) {
+            if (declaration.kind === 'const' && declarator.id.type === 'Identifier' && declarator.init) {
+                scope.set(declarator.id.name, { init: declarator.init, scopes });
+            }
+            else {
+                getPatternNames(declarator.id).forEach((name) => scope.set(name, { scopes }));
+            }
+        }
+    }
+};
+const getPatternNames = (pattern) => {
+    switch (pattern.type) {
+        case 'Identifier':
+            return [pattern.name];
+        case 'AssignmentPattern':
+            return getPatternNames(pattern.left);
+        case 'RestElement':
+            return getPatternNames(pattern.argument);
+        case 'ArrayPattern':
+            return pattern.elements.flatMap((element) => (element ? getPatternNames(element) : []));
+        case 'ObjectPattern':
+            return pattern.properties.flatMap((property) => getPatternNames(property.type === 'Property' ? property.value : property));
+        default:
+            return [];
+    }
+};
+const resolveBinding = (name, scopes) => {
+    var _a;
+    for (let i = scopes.length - 1; i >= 0; i--) {
+        const binding = (_a = scopes[i]) === null || _a === void 0 ? void 0 : _a.get(name);
+        if (binding)
+            return binding;
+    }
+    return undefined;
+};
+const isFunctionNode = (node) => node.type === 'FunctionDeclaration' ||
+    node.type === 'FunctionExpression' ||
+    node.type === 'ArrowFunctionExpression';
+const transformMdxJsEsmNode = (estreeNode, moduleScopes, tailwindSelectors) => {
+    const scopes = [...moduleScopes];
     walk(estreeNode, {
         enter(node) {
+            if (isFunctionNode(node)) {
+                const scope = new Map();
+                const chain = [...scopes, scope];
+                node.params.flatMap(getPatternNames).forEach((name) => scope.set(name, { scopes: chain }));
+                scopes.push(scope);
+                return;
+            }
+            if (node.type === 'BlockStatement') {
+                const scope = new Map();
+                collectDeclarations(node.body, scope, [...scopes, scope]);
+                scopes.push(scope);
+                return;
+            }
             if (node.type === 'JSXAttribute' &&
                 node.name.type === 'JSXIdentifier' &&
                 (node.name.name === 'className' || node.name.name === 'class')) {
-                if (node.value && node.value.type === 'JSXExpressionContainer') {
-                    const expression = node.value.expression;
-                    if (expression.type === 'TemplateLiteral') {
-                        // example: className={`bg-green-500`}
-                        expression.quasis.forEach((quasi) => {
-                            if (quasi.value.cooked) {
-                                const originalValue = quasi.value.cooked;
-                                const transformedValue = transformClassNames(originalValue, tailwindSelectors);
-                                if (originalValue !== transformedValue) {
-                                    quasi.value.cooked = transformedValue;
-                                    quasi.value.raw = transformedValue;
-                                }
-                            }
-                        });
-                        // example: className={`${isActive ? "bg-red-500" : "bg-blue-500"}`}
-                        expression.expressions.forEach((expr) => {
-                            transformExpressionClassNames(expr, tailwindSelectors);
-                        });
-                    }
-                }
                 // example: className="bg-green-500"
-                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);
-                        }
-                    }
+                if (node.value && node.value.type === 'Literal') {
+                    transformLiteral(node.value, tailwindSelectors);
+                }
+                if (node.value &&
+                    node.value.type === 'JSXExpressionContainer' &&
+                    node.value.expression.type !== 'JSXEmptyExpression') {
+                    node.value.expression = transformExpressionClassNames(node.value.expression, scopes, tailwindSelectors);
                 }
             }
         },
+        leave(node) {
+            if (node.type === 'BlockStatement' || isFunctionNode(node)) {
+                scopes.pop();
+            }
+        },
     });
 };
-const transformExpressionClassNames = (expr, tailwindSelectors) => {
-    if (!expr)
-        return;
-    if (expr.type === 'Literal' && typeof expr.value === 'string') {
-        const originalValue = expr.value;
-        const transformedValue = transformClassNames(originalValue, tailwindSelectors);
-        if (originalValue !== transformedValue) {
-            expr.value = transformedValue;
-            if (typeof expr.raw === 'string') {
-                expr.raw = JSON.stringify(transformedValue);
+const transformExpressionClassNames = (expr, scopes, tailwindSelectors, inlining = new Set()) => {
+    const transform = (child) => transformExpressionClassNames(child, scopes, tailwindSelectors, inlining);
+    const transformElement = (element) => {
+        if (element.type !== 'SpreadElement')
+            return transform(element);
+        element.argument = transform(element.argument);
+        return element;
+    };
+    switch (expr.type) {
+        case 'Literal':
+            transformLiteral(expr, tailwindSelectors);
+            return expr;
+        case 'TemplateLiteral':
+            // example: className={`bg-green-500`}
+            expr.quasis.forEach((quasi) => {
+                if (quasi.value.cooked) {
+                    const transformedValue = transformClassNames(quasi.value.cooked, tailwindSelectors);
+                    if (quasi.value.cooked !== transformedValue) {
+                        quasi.value.cooked = transformedValue;
+                        quasi.value.raw = transformedValue;
+                    }
+                }
+            });
+            // example: className={`${isActive ? "bg-red-500" : "bg-blue-500"}`}
+            expr.expressions = expr.expressions.map(transform);
+            return expr;
+        case 'ConditionalExpression':
+            // example: ${isActive ? "bg-red-500" : "bg-blue-500"}
+            expr.consequent = transform(expr.consequent);
+            expr.alternate = transform(expr.alternate);
+            return expr;
+        case 'LogicalExpression':
+            // example: ${isActive && "bg-red-500"}
+            expr.left = transform(expr.left);
+            expr.right = transform(expr.right);
+            return expr;
+        case 'BinaryExpression':
+            if (expr.operator === '+') {
+                // example: ${"bg-red-500" + "bg-blue-500"}
+                expr.left = transform(expr.left);
+                expr.right = transform(expr.right);
+            }
+            return expr;
+        case 'ArrayExpression':
+            // example: ["bg-red-500", "bg-blue-500"]
+            expr.elements = expr.elements.map((element) => element && transformElement(element));
+            return expr;
+        case 'CallExpression':
+            if (!isClassCall(expr))
+                return expr;
+            // example: ["bg-red-500", "bg-blue-500"].join(" ")
+            if (expr.callee.type === 'MemberExpression' && expr.callee.object.type !== 'Super') {
+                expr.callee.object = transform(expr.callee.object);
+            }
+            expr.arguments = expr.arguments.map(transformElement);
+            return expr;
+        case 'ObjectExpression':
+            // example: cn({ "bg-blue-500": isActive })
+            transformObjectKeys(expr, transform, tailwindSelectors);
+            return expr;
+        case 'MemberExpression':
+            // example: const styles = { active: "bg-red-500" }; className={styles.active}
+            return transformMemberExpression(expr, scopes, transform);
+        case 'Identifier': {
+            // example: const classes = "bg-red-500"; className={classes}
+            const binding = resolveBinding(expr.name, scopes);
+            if (!(binding === null || binding === void 0 ? void 0 : binding.init) || inlining.has(binding))
+                return expr;
+            const inlined = cloneForUse(binding.init, binding.scopes, scopes, new Set([binding]));
+            if (!inlined)
+                return expr;
+            const before = serialize(inlined);
+            const transformed = transformExpressionClassNames(inlined, scopes, tailwindSelectors, new Set([...inlining, binding]));
+            return serialize(transformed) === before ? expr : transformed;
+        }
+        default:
+            return expr;
+    }
+};
+const transformMemberExpression = (expr, scopes, transform) => {
+    if (getStaticKey(expr) !== undefined) {
+        const resolved = resolveStaticValue(expr, scopes);
+        const inlined = resolved && cloneForUse(resolved.expr, resolved.scopes, scopes, new Set());
+        if (!inlined)
+            return expr;
+        const before = serialize(inlined);
+        const transformed = transform(inlined);
+        return serialize(transformed) === before ? expr : transformed;
+    }
+    const object = resolveObject(expr.object, scopes);
+    if (!object)
+        return expr;
+    const before = serialize(object);
+    object.properties.forEach((property) => {
+        const value = property.type === 'Property' ? asExpression(property.value) : undefined;
+        if (property.type === 'Property' && value)
+            property.value = transform(value);
+    });
+    if (serialize(object) !== before)
+        expr.object = object;
+    return expr;
+};
+const transformObjectKeys = (expr, transform, tailwindSelectors) => {
+    expr.properties.forEach((property) => {
+        if (property.type === 'SpreadElement') {
+            property.argument = transform(property.argument);
+            return;
+        }
+        if (property.computed) {
+            if (property.key.type !== 'PrivateIdentifier')
+                property.key = transform(property.key);
+            return;
+        }
+        const keyName = getPropertyKeyName(property);
+        if (keyName === undefined)
+            return;
+        const transformedValue = transformClassNames(keyName, tailwindSelectors);
+        if (keyName !== transformedValue) {
+            property.key = toLiteral(transformedValue);
+            property.shorthand = false;
+        }
+    });
+};
+const resolveObject = (node, scopes) => {
+    if (node.type === 'ObjectExpression')
+        return node;
+    const resolved = resolveStaticValue(node, scopes);
+    if ((resolved === null || resolved === void 0 ? void 0 : resolved.expr.type) !== 'ObjectExpression')
+        return undefined;
+    const cloned = cloneForUse(resolved.expr, resolved.scopes, scopes, new Set());
+    return (cloned === null || cloned === void 0 ? void 0 : cloned.type) === 'ObjectExpression' ? cloned : undefined;
+};
+const resolveStaticValue = (node, scopes, resolving = new Set()) => {
+    if (node.type === 'Super')
+        return undefined;
+    if (node.type === 'Identifier') {
+        const binding = resolveBinding(node.name, scopes);
+        if (!(binding === null || binding === void 0 ? void 0 : binding.init))
+            return { expr: node, scopes };
+        if (resolving.has(binding))
+            return undefined;
+        return resolveStaticValue(binding.init, binding.scopes, new Set([...resolving, binding]));
+    }
+    if (node.type === 'MemberExpression') {
+        const key = getStaticKey(node);
+        if (key === undefined)
+            return { expr: node, scopes };
+        const object = resolveStaticValue(node.object, scopes, resolving);
+        if ((object === null || object === void 0 ? void 0 : object.expr.type) !== 'ObjectExpression')
+            return undefined;
+        const value = findPropertyValue(object.expr, key);
+        return value && resolveStaticValue(value, object.scopes, resolving);
+    }
+    return { expr: node, scopes };
+};
+const cloneForUse = (expr, declarationScopes, useScopes, inlining) => {
+    const clone = (child) => cloneForUse(child, declarationScopes, useScopes, inlining);
+    const cloneElement = (element) => {
+        if (element.type !== 'SpreadElement')
+            return clone(element);
+        const argument = clone(element.argument);
+        return argument && Object.assign(Object.assign({}, element), { argument });
+    };
+    const cloneAll = (items, cloneItem) => {
+        const cloned = [];
+        for (const item of items) {
+            const result = cloneItem(item);
+            if (result === undefined)
+                return undefined;
+            cloned.push(result);
+        }
+        return cloned;
+    };
+    switch (expr.type) {
+        case 'Literal':
+            return structuredClone(expr);
+        case 'TemplateLiteral': {
+            const expressions = cloneAll(expr.expressions, clone);
+            return expressions && Object.assign(Object.assign({}, expr), { quasis: structuredClone(expr.quasis), expressions });
+        }
+        case 'ArrayExpression': {
+            const elements = cloneAll(expr.elements, (element) => element === null ? null : cloneElement(element));
+            return elements && Object.assign(Object.assign({}, expr), { elements });
+        }
+        case 'BinaryExpression': {
+            const left = clone(expr.left);
+            const right = clone(expr.right);
+            return left && right && Object.assign(Object.assign({}, expr), { left, right });
+        }
+        case 'LogicalExpression': {
+            const left = clone(expr.left);
+            const right = clone(expr.right);
+            return left && right && Object.assign(Object.assign({}, expr), { left, right });
+        }
+        case 'ConditionalExpression': {
+            const test = clone(expr.test);
+            const consequent = clone(expr.consequent);
+            const alternate = clone(expr.alternate);
+            return test && consequent && alternate && Object.assign(Object.assign({}, expr), { test, consequent, alternate });
+        }
+        case 'UnaryExpression': {
+            const argument = clone(expr.argument);
+            return argument && Object.assign(Object.assign({}, expr), { argument });
+        }
+        case 'ObjectExpression': {
+            const properties = cloneAll(expr.properties, (property) => {
+                if (property.type === 'SpreadElement') {
+                    const argument = clone(property.argument);
+                    return argument && Object.assign(Object.assign({}, property), { argument });
+                }
+                if (property.kind !== 'init' || property.method)
+                    return undefined;
+                const value = asExpression(property.value);
+                const clonedValue = value && clone(value);
+                if (!clonedValue)
+                    return undefined;
+                if (!property.computed) {
+                    return Object.assign(Object.assign({}, property), { key: structuredClone(property.key), value: clonedValue, shorthand: false });
+                }
+                if (property.key.type === 'PrivateIdentifier')
+                    return undefined;
+                const key = clone(property.key);
+                return key && Object.assign(Object.assign({}, property), { key, value: clonedValue, shorthand: false });
+            });
+            return properties && Object.assign(Object.assign({}, expr), { properties });
+        }
+        case 'MemberExpression': {
+            if (expr.object.type === 'Super' || expr.property.type === 'PrivateIdentifier') {
+                return undefined;
+            }
+            const object = clone(expr.object);
+            const property = expr.computed ? clone(expr.property) : structuredClone(expr.property);
+            return object && property && Object.assign(Object.assign({}, expr), { object, property });
+        }
+        case 'CallExpression': {
+            if (!isClassCall(expr) || expr.callee.type === 'Super')
+                return undefined;
+            const callee = clone(expr.callee);
+            const args = cloneAll(expr.arguments, cloneElement);
+            return callee && args && Object.assign(Object.assign({}, expr), { callee, arguments: args });
+        }
+        case 'Identifier': {
+            const binding = resolveBinding(expr.name, declarationScopes);
+            if ((binding === null || binding === void 0 ? void 0 : binding.init) && !inlining.has(binding)) {
+                const inlined = cloneForUse(binding.init, binding.scopes, useScopes, new Set([...inlining, binding]));
+                if (inlined)
+                    return inlined;
             }
+            return binding === resolveBinding(expr.name, useScopes) ? structuredClone(expr) : undefined;
         }
+        default:
+            return undefined;
     }
-    else if (expr.type === 'ConditionalExpression') {
-        // example: ${isActive ? "bg-red-500" : "bg-blue-500"}
-        transformExpressionClassNames(expr.consequent, tailwindSelectors);
-        transformExpressionClassNames(expr.alternate, tailwindSelectors);
+};
+const isClassCall = (expr) => {
+    const { callee } = expr;
+    if (callee.type === 'Identifier')
+        return CLASS_HELPERS.has(callee.name);
+    return (callee.type === 'MemberExpression' &&
+        !callee.computed &&
+        callee.property.type === 'Identifier' &&
+        (callee.property.name === 'join' || callee.property.name === 'concat'));
+};
+const getStaticKey = (expr) => {
+    if (!expr.computed && expr.property.type === 'Identifier')
+        return expr.property.name;
+    if (expr.property.type === 'Literal' && typeof expr.property.value === 'string') {
+        return expr.property.value;
+    }
+    return undefined;
+};
+const getPropertyKeyName = (property) => {
+    if (!property.computed && property.key.type === 'Identifier')
+        return property.key.name;
+    if (property.key.type === 'Literal' && typeof property.key.value === 'string') {
+        return property.key.value;
     }
-    else if (expr.type === 'LogicalExpression') {
-        // example: ${isActive && "bg-red-500"}
-        transformExpressionClassNames(expr.left, tailwindSelectors);
-        transformExpressionClassNames(expr.right, tailwindSelectors);
+    return undefined;
+};
+const findPropertyValue = (object, key) => {
+    for (let i = object.properties.length - 1; i >= 0; i--) {
+        const property = object.properties[i];
+        if (!property || property.type === 'SpreadElement')
+            return undefined;
+        if (getPropertyKeyName(property) === key)
+            return asExpression(property.value);
     }
-    else if (expr.type === 'BinaryExpression' && expr.operator === '+') {
-        // example: ${"bg-red-500" + "bg-blue-500"}
-        transformExpressionClassNames(expr.left, tailwindSelectors);
-        transformExpressionClassNames(expr.right, tailwindSelectors);
+    return undefined;
+};
+const asExpression = (node) => node.type === 'ObjectPattern' ||
+    node.type === 'ArrayPattern' ||
+    node.type === 'RestElement' ||
+    node.type === 'AssignmentPattern'
+    ? undefined
+    : node;
+const transformLiteral = (expr, tailwindSelectors) => {
+    if (typeof expr.value !== 'string')
+        return;
+    const transformedValue = transformClassNames(expr.value, tailwindSelectors);
+    if (expr.value !== transformedValue) {
+        expr.value = transformedValue;
+        if (typeof expr.raw === 'string') {
+            expr.raw = JSON.stringify(transformedValue);
+        }
     }
 };
+const toLiteral = (value) => ({
+    type: 'Literal',
+    value,
+    raw: JSON.stringify(value),
+});
+const serialize = (node) => JSON.stringify(node, (_key, value) => typeof value === 'bigint' ? value.toString() : value);
 const transformClassNames = (value, tailwindSelectors) => {
     var _a, _b, _c, _d;
     if (!tailwindSelectors || !tailwindSelectors.length)