tailwind-typescript-plugin 1.4.0-beta.21 → 1.4.0-beta.23

package/lib/extractors/VueAttributeExtractor.js

@@ -35,13 +35,16 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
      * Vue generates code like __VLS_ctx.clsx(...) for template expressions
      * where clsx is imported in the script section. We need to check if the
      * function name (not __VLS_ctx) is directly imported.
+     *
+     * Also handles namespace imports: __VLS_ctx.utils.clsx(...) for `import * as utils from 'clsx'`
      */
     shouldValidateFunctionCall(callExpression, utilityFunctions, context) {
-        // First, check if this is a __VLS_ctx.functionName() pattern
+        // First, check if this is a __VLS_ctx.functionName() or __VLS_ctx.namespace.functionName() pattern
         if (context) {
             const expr = callExpression.expression;
             if (context.typescript.isPropertyAccessExpression(expr)) {
                 const objectExpr = expr.expression;
+                // Pattern 1: __VLS_ctx.functionName() - direct import
                 if (context.typescript.isIdentifier(objectExpr) && objectExpr.text === '__VLS_ctx') {
                     const functionName = expr.name.text;
                     // Check each utility function configuration
@@ -60,6 +63,31 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
                     }
                     return false;
                 }
+                // Pattern 2: __VLS_ctx.namespace.functionName() - namespace import
+                // e.g., import * as utils from 'clsx' -> __VLS_ctx.utils.clsx()
+                if (context.typescript.isPropertyAccessExpression(objectExpr)) {
+                    const namespaceRoot = objectExpr.expression;
+                    if (context.typescript.isIdentifier(namespaceRoot) &&
+                        namespaceRoot.text === '__VLS_ctx') {
+                        const namespaceName = objectExpr.name.text; // e.g., 'utils'
+                        const functionName = expr.name.text; // e.g., 'clsx'
+                        // Check each utility function configuration
+                        for (const utilityFunc of utilityFunctions) {
+                            if (typeof utilityFunc === 'string') {
+                                if (utilityFunc === functionName) {
+                                    return true;
+                                }
+                            }
+                            else if (utilityFunc.name === functionName) {
+                                // Check if namespace is imported from expected module
+                                if (this.isNamespaceImportedFrom(namespaceName, utilityFunc.from, context)) {
+                                    return true;
+                                }
+                            }
+                        }
+                        return false;
+                    }
+                }
             }
         }
         // Fall back to base implementation for non-Vue patterns
@@ -67,17 +95,12 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
     }
     canHandle(node, context) {
         // We handle call expressions that look like Vue's generated element calls
-        // Pattern: __VLS_asFunctionalElement(...)({ ...{ class: ... } })
+        // Pattern 1 (intrinsic elements): __VLS_asFunctionalElement(...)({ ...{ class: ... } })
+        // Pattern 2 (custom components): __VLS_1({ colorStyles: ... }, ...)
         if (!context.typescript.isCallExpression(node)) {
             return false;
         }
-        // Check if this is a chained call (the outer call to the element function)
-        // The pattern is: func(...)({...}) where the result of func(...) is called again
-        const expression = node.expression;
-        if (!context.typescript.isCallExpression(expression)) {
-            return false;
-        }
-        // Check if the arguments contain an object with spread that has a 'class' property
+        // Check if the arguments contain an object with class properties
         if (node.arguments.length === 0) {
             return false;
         }
@@ -85,10 +108,28 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
         if (!context.typescript.isObjectLiteralExpression(firstArg)) {
             return false;
         }
-        // Look for spread assignments with 'class' property
-        return this.hasClassSpreadProperty(firstArg, context);
+        const expression = node.expression;
+        // Pattern 1: Chained call (intrinsic elements)
+        // func(...)({...}) where the result of func(...) is called again
+        if (context.typescript.isCallExpression(expression)) {
+            // Look for spread assignments with class property
+            return this.hasClassSpreadProperty(firstArg, context);
+        }
+        // Pattern 2: Identifier call (custom components)
+        // __VLS_N({ classAttribute: ... }, ...)
+        if (context.typescript.isIdentifier(expression)) {
+            const name = expression.text;
+            // Vue generates __VLS_0, __VLS_1, etc. for component instances
+            if (name.startsWith('__VLS_')) {
+                // Check for direct class attribute properties
+                return this.hasClassDirectProperty(firstArg, context);
+            }
+        }
+        return false;
     }
     hasClassSpreadProperty(obj, context) {
+        // Build set of class attribute names to check
+        const classAttributeNames = new Set(['class', ...(context.classAttributes || [])]);
         for (const prop of obj.properties) {
             if (context.typescript.isSpreadAssignment(prop)) {
                 const spreadExpr = prop.expression;
@@ -96,7 +137,7 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
                     for (const innerProp of spreadExpr.properties) {
                         if (context.typescript.isPropertyAssignment(innerProp)) {
                             const name = innerProp.name;
-                            if (context.typescript.isIdentifier(name) && name.text === 'class') {
+                            if (context.typescript.isIdentifier(name) && classAttributeNames.has(name.text)) {
                                 return true;
                             }
                         }
@@ -106,6 +147,22 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
         }
         return false;
     }
+    /**
+     * Check if an object has direct class attribute properties (for custom components).
+     * Vue generates direct properties like: { colorStyles: "bg-blue-500" }
+     */
+    hasClassDirectProperty(obj, context) {
+        const classAttributeNames = new Set(['class', ...(context.classAttributes || [])]);
+        for (const prop of obj.properties) {
+            if (context.typescript.isPropertyAssignment(prop)) {
+                const name = prop.name;
+                if (context.typescript.isIdentifier(name) && classAttributeNames.has(name.text)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
     extract(node, context) {
         const classNames = [];
         if (!context.typescript.isCallExpression(node)) {
@@ -115,26 +172,44 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
         if (!firstArg || !context.typescript.isObjectLiteralExpression(firstArg)) {
             return classNames;
         }
-        // Find spread assignments with 'class' property
+        // Build set of class attribute names to check
+        const classAttributeNames = new Set(['class', ...(context.classAttributes || [])]);
+        // Process all properties in the object literal
         for (const prop of firstArg.properties) {
-            if (!context.typescript.isSpreadAssignment(prop)) {
-                continue;
-            }
-            const spreadExpr = prop.expression;
-            if (!context.typescript.isObjectLiteralExpression(spreadExpr)) {
-                continue;
+            // Handle spread assignments: ...{ class: "..." }
+            if (context.typescript.isSpreadAssignment(prop)) {
+                const spreadExpr = prop.expression;
+                if (context.typescript.isObjectLiteralExpression(spreadExpr)) {
+                    for (const innerProp of spreadExpr.properties) {
+                        if (!context.typescript.isPropertyAssignment(innerProp)) {
+                            continue;
+                        }
+                        const name = innerProp.name;
+                        if (!context.typescript.isIdentifier(name)) {
+                            continue;
+                        }
+                        // Check if this is a class attribute
+                        if (!classAttributeNames.has(name.text)) {
+                            continue;
+                        }
+                        const value = innerProp.initializer;
+                        const attributeId = `${innerProp.getStart()}-${innerProp.getEnd()}`;
+                        classNames.push(...this.extractClassesFromValue(value, context, attributeId));
+                    }
+                }
             }
-            for (const innerProp of spreadExpr.properties) {
-                if (!context.typescript.isPropertyAssignment(innerProp)) {
+            // Handle direct property assignments: colorStyles: "..."
+            else if (context.typescript.isPropertyAssignment(prop)) {
+                const name = prop.name;
+                if (!context.typescript.isIdentifier(name)) {
                     continue;
                 }
-                const name = innerProp.name;
-                if (!context.typescript.isIdentifier(name) || name.text !== 'class') {
+                // Check if this is a class attribute (custom attributes like colorStyles)
+                if (!classAttributeNames.has(name.text)) {
                     continue;
                 }
-                const value = innerProp.initializer;
-                const attributeId = `${innerProp.getStart()}-${innerProp.getEnd()}`;
-                // Handle different class value types
+                const value = prop.initializer;
+                const attributeId = `${prop.getStart()}-${prop.getEnd()}`;
                 classNames.push(...this.extractClassesFromValue(value, context, attributeId));
             }
         }
@@ -180,47 +255,8 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
             }
         }
         if (objectExpr) {
-            for (const prop of objectExpr.properties) {
-                if (context.typescript.isPropertyAssignment(prop)) {
-                    const propName = prop.name;
-                    let className;
-                    let start;
-                    // Handle string literal keys: { 'bg-red-500': true }
-                    if (context.typescript.isStringLiteral(propName)) {
-                        className = propName.text;
-                        start = propName.getStart() + 1; // Skip opening quote
-                    }
-                    // Handle identifier keys: { flex: true }
-                    else if (context.typescript.isIdentifier(propName)) {
-                        className = propName.text;
-                        start = propName.getStart();
-                    }
-                    if (className && start !== undefined) {
-                        classNames.push({
-                            className,
-                            absoluteStart: start,
-                            length: className.length,
-                            line: context.sourceFile.getLineAndCharacterOfPosition(start).line + 1,
-                            file: context.sourceFile.fileName,
-                            attributeId
-                        });
-                    }
-                }
-                // Handle shorthand properties: { flex }
-                else if (context.typescript.isShorthandPropertyAssignment(prop)) {
-                    const className = prop.name.text;
-                    const start = prop.name.getStart();
-                    classNames.push({
-                        className,
-                        absoluteStart: start,
-                        length: className.length,
-                        line: context.sourceFile.getLineAndCharacterOfPosition(start).line + 1,
-                        file: context.sourceFile.fileName,
-                        attributeId
-                    });
-                }
-            }
-            return classNames;
+            // Use extractFromObjectExpression which handles computed property names
+            return this.extractFromObjectExpression(objectExpr, context, attributeId);
         }
         // Array literal: class: ['flex', 'items-center']
         // Vue wraps expressions in parentheses: class: (['flex', 'items-center'])
@@ -235,8 +271,8 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
             }
         }
         if (arrayExpr) {
-            const addAttributeId = (classes) => classes.map(c => ({ ...c, attributeId }));
-            return addAttributeId(this.expressionExtractor.extract(arrayExpr, context));
+            // Process array elements directly to handle __VLS_ctx references
+            return this.extractFromArrayExpression(arrayExpr, context, attributeId);
         }
         // Template literal or other expressions - delegate to expression extractor
         // Vue wraps expressions in parentheses: class: (`flex items-center`)
@@ -268,9 +304,84 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
                 callExpr = inner;
             }
         }
-        if (callExpr && this.shouldValidateFunctionCall(callExpr, context.utilityFunctions, context)) {
-            const addAttributeId = (classes) => classes.map(c => ({ ...c, attributeId }));
-            return addAttributeId(this.expressionExtractor.extract(callExpr, context));
+        if (callExpr) {
+            // Check if it's a utility function (clsx, cn, etc.) - extract all arguments
+            if (this.shouldValidateFunctionCall(callExpr, context.utilityFunctions, context)) {
+                const addAttributeId = (classes) => classes.map(c => ({ ...c, attributeId }));
+                return addAttributeId(this.expressionExtractor.extract(callExpr, context));
+            }
+            // Check for CVA/TV function calls with class override: button({ class: '...' })
+            // These are __VLS_ctx.functionName({ class: '...' }) patterns
+            const classOverrideClasses = this.extractFromCvaTvClassOverride(callExpr, context, attributeId);
+            if (classOverrideClasses.length > 0) {
+                return classOverrideClasses;
+            }
+        }
+        // Handle conditional (ternary) expressions: class: (isActive ? 'flex' : 'hidden')
+        // Vue wraps expressions in parentheses: class: (__VLS_ctx.isActive ? 'active' : 'inactive')
+        let conditionalExpr;
+        if (context.typescript.isConditionalExpression(value)) {
+            conditionalExpr = value;
+        }
+        else if (context.typescript.isParenthesizedExpression(value)) {
+            const inner = value.expression;
+            if (context.typescript.isConditionalExpression(inner)) {
+                conditionalExpr = inner;
+            }
+        }
+        if (conditionalExpr) {
+            return this.extractFromConditionalExpression(conditionalExpr, context, attributeId);
+        }
+        // Handle binary expressions: class: (isActive && 'flex')
+        // Vue wraps expressions in parentheses: class: (__VLS_ctx.isActive && 'active')
+        let binaryExpr;
+        if (context.typescript.isBinaryExpression(value)) {
+            binaryExpr = value;
+        }
+        else if (context.typescript.isParenthesizedExpression(value)) {
+            const inner = value.expression;
+            if (context.typescript.isBinaryExpression(inner)) {
+                binaryExpr = inner;
+            }
+        }
+        if (binaryExpr) {
+            return this.extractFromBinaryExpression(binaryExpr, context, attributeId);
+        }
+        // Handle type assertions: class: ('invalid-class' as string)
+        // Vue wraps expressions: class: (('invalid-class' as string))
+        let asExpr;
+        if (context.typescript.isAsExpression(value)) {
+            asExpr = value;
+        }
+        else if (context.typescript.isParenthesizedExpression(value)) {
+            let inner = value.expression;
+            // Double unwrap for nested parentheses
+            if (context.typescript.isParenthesizedExpression(inner)) {
+                inner = inner.expression;
+            }
+            if (context.typescript.isAsExpression(inner)) {
+                asExpr = inner;
+            }
+        }
+        if (asExpr) {
+            return this.extractClassesFromValue(asExpr.expression, context, attributeId);
+        }
+        // Handle non-null assertions: class: (someClass!)
+        let nonNullExpr;
+        if (context.typescript.isNonNullExpression(value)) {
+            nonNullExpr = value;
+        }
+        else if (context.typescript.isParenthesizedExpression(value)) {
+            let inner = value.expression;
+            if (context.typescript.isParenthesizedExpression(inner)) {
+                inner = inner.expression;
+            }
+            if (context.typescript.isNonNullExpression(inner)) {
+                nonNullExpr = inner;
+            }
+        }
+        if (nonNullExpr) {
+            return this.extractClassesFromValue(nonNullExpr.expression, context, attributeId);
         }
         // Handle __VLS_ctx.propertyName patterns for variable/computed/function references
         // Vue generates: class: (__VLS_ctx.myClass) for :class="myClass"
@@ -278,6 +389,402 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
         if (resolvedClasses.length > 0) {
             return resolvedClasses;
         }
+        // Handle props.propertyName patterns with default values from withDefaults
+        // Vue generates: class: (props.buttonClass) for :class="props.buttonClass"
+        const propsDefaultClasses = this.extractFromPropsWithDefaults(value, context, attributeId);
+        if (propsDefaultClasses.length > 0) {
+            return propsDefaultClasses;
+        }
+        return classNames;
+    }
+    /**
+     * Extract classes from an array expression, handling __VLS_ctx references.
+     * This method processes array elements directly to support variable references.
+     */
+    extractFromArrayExpression(arrayExpr, context, attributeId) {
+        const { typescript } = context;
+        const classNames = [];
+        for (const element of arrayExpr.elements) {
+            if (element === undefined)
+                continue;
+            // String literal: 'flex'
+            if (typescript.isStringLiteral(element)) {
+                const fullText = element.text;
+                if (fullText.length > 0) {
+                    const stringContentStart = element.getStart() + 1;
+                    let offset = 0;
+                    const parts = fullText.split(/(\s+)/);
+                    for (const part of parts) {
+                        if (part && !/^\s+$/.test(part)) {
+                            classNames.push({
+                                className: part,
+                                absoluteStart: stringContentStart + offset,
+                                length: part.length,
+                                line: context.sourceFile.getLineAndCharacterOfPosition(stringContentStart + offset)
+                                    .line + 1,
+                                file: context.sourceFile.fileName,
+                                attributeId
+                            });
+                        }
+                        offset += part.length;
+                    }
+                }
+            }
+            // Object literal: { 'bg-red-500': isActive }
+            else if (typescript.isObjectLiteralExpression(element)) {
+                classNames.push(...this.extractFromObjectExpression(element, context, attributeId));
+            }
+            // Spread element: ...classes
+            else if (typescript.isSpreadElement(element)) {
+                // Try to resolve __VLS_ctx reference
+                const vlsResults = this.extractFromVlsCtxReference(element.expression, context, attributeId);
+                if (vlsResults.length > 0) {
+                    classNames.push(...vlsResults);
+                }
+            }
+            // Handle __VLS_ctx.variable references: __VLS_ctx.myClass
+            else if (typescript.isPropertyAccessExpression(element)) {
+                const vlsResults = this.extractFromVlsCtxReference(element, context, attributeId);
+                if (vlsResults.length > 0) {
+                    classNames.push(...vlsResults);
+                }
+            }
+            // Handle parenthesized expressions: (__VLS_ctx.myVar)
+            else if (typescript.isParenthesizedExpression(element)) {
+                const inner = element.expression;
+                if (typescript.isPropertyAccessExpression(inner)) {
+                    const vlsResults = this.extractFromVlsCtxReference(inner, context, attributeId);
+                    if (vlsResults.length > 0) {
+                        classNames.push(...vlsResults);
+                    }
+                }
+                else if (typescript.isArrayLiteralExpression(inner)) {
+                    // Nested array in parentheses
+                    classNames.push(...this.extractFromArrayExpression(inner, context, attributeId));
+                }
+            }
+            // Handle nested arrays recursively
+            else if (typescript.isArrayLiteralExpression(element)) {
+                classNames.push(...this.extractFromArrayExpression(element, context, attributeId));
+            }
+            // Handle ternary/conditional expressions
+            else if (typescript.isConditionalExpression(element)) {
+                // Extract from both branches
+                classNames.push(...this.extractFromConditionalElement(element, context, attributeId));
+            }
+        }
+        return classNames;
+    }
+    /**
+     * Extract classes from an object expression, handling computed property names.
+     */
+    extractFromObjectExpression(objExpr, context, attributeId) {
+        const { typescript } = context;
+        const classNames = [];
+        for (const prop of objExpr.properties) {
+            if (typescript.isPropertyAssignment(prop)) {
+                const propName = prop.name;
+                let className;
+                let start;
+                if (typescript.isStringLiteral(propName)) {
+                    className = propName.text;
+                    start = propName.getStart() + 1;
+                }
+                else if (typescript.isIdentifier(propName)) {
+                    className = propName.text;
+                    start = propName.getStart();
+                }
+                // Handle computed property names: { [__VLS_ctx.myVar]: true }
+                else if (typescript.isComputedPropertyName(propName)) {
+                    let computedExpr = propName.expression;
+                    // Unwrap parentheses
+                    if (typescript.isParenthesizedExpression(computedExpr)) {
+                        computedExpr = computedExpr.expression;
+                    }
+                    // Resolve __VLS_ctx.variable pattern
+                    if (typescript.isPropertyAccessExpression(computedExpr)) {
+                        const vlsResults = this.extractFromVlsCtxReference(computedExpr, context, attributeId);
+                        if (vlsResults.length > 0) {
+                            classNames.push(...vlsResults);
+                            continue;
+                        }
+                    }
+                }
+                if (className && start !== undefined) {
+                    classNames.push({
+                        className,
+                        absoluteStart: start,
+                        length: className.length,
+                        line: context.sourceFile.getLineAndCharacterOfPosition(start).line + 1,
+                        file: context.sourceFile.fileName,
+                        attributeId
+                    });
+                }
+            }
+            else if (typescript.isShorthandPropertyAssignment(prop)) {
+                const className = prop.name.text;
+                const start = prop.name.getStart();
+                classNames.push({
+                    className,
+                    absoluteStart: start,
+                    length: className.length,
+                    line: context.sourceFile.getLineAndCharacterOfPosition(start).line + 1,
+                    file: context.sourceFile.fileName,
+                    attributeId
+                });
+            }
+        }
+        return classNames;
+    }
+    /**
+     * Extract classes from a conditional (ternary) expression in array context.
+     */
+    extractFromConditionalElement(conditional, context, attributeId) {
+        return this.extractFromConditionalExpression(conditional, context, attributeId);
+    }
+    /**
+     * Extract classes from a conditional (ternary) expression.
+     * Handles: isActive ? 'flex' : 'hidden'
+     */
+    extractFromConditionalExpression(conditional, context, attributeId) {
+        const classNames = [];
+        // Use the ternary's position as a unique identifier (like ExpressionExtractor)
+        const ternaryId = conditional.getStart();
+        // Extract from true branch with conditionalBranchId
+        const whenTrue = conditional.whenTrue;
+        classNames.push(...this.extractFromBranchExpression(whenTrue, context, attributeId, `ternary:true:${ternaryId}`));
+        // Extract from false branch with conditionalBranchId
+        const whenFalse = conditional.whenFalse;
+        classNames.push(...this.extractFromBranchExpression(whenFalse, context, attributeId, `ternary:false:${ternaryId}`));
+        return classNames;
+    }
+    /**
+     * Extract classes from a binary expression.
+     * Handles: isActive && 'flex', isDisabled || 'fallback'
+     */
+    extractFromBinaryExpression(binary, context, attributeId) {
+        const classNames = [];
+        // Extract from left operand (for patterns like: 'flex' || fallback)
+        classNames.push(...this.extractFromBranchExpression(binary.left, context, attributeId));
+        // Extract from right operand (for patterns like: isActive && 'flex')
+        classNames.push(...this.extractFromBranchExpression(binary.right, context, attributeId));
+        return classNames;
+    }
+    /**
+     * Extract classes from a branch expression (ternary branch or binary operand).
+     * Handles string literals, nested ternaries, nested binaries, and VLS references.
+     */
+    extractFromBranchExpression(expr, context, attributeId, conditionalBranchId) {
+        const { typescript } = context;
+        const classNames = [];
+        // Helper to add conditionalBranchId to extracted classes
+        const addBranchId = (classes) => conditionalBranchId ? classes.map(c => ({ ...c, conditionalBranchId })) : classes;
+        // String literal: 'flex items-center'
+        if (typescript.isStringLiteral(expr)) {
+            classNames.push(...addBranchId(this.extractClassesFromStringLiteral(expr, context, attributeId)));
+        }
+        // Nested ternary: condition ? 'a' : (nested ? 'b' : 'c')
+        else if (typescript.isConditionalExpression(expr)) {
+            classNames.push(...this.extractFromConditionalExpression(expr, context, attributeId));
+        }
+        // Nested binary: isA && isB && 'class'
+        else if (typescript.isBinaryExpression(expr)) {
+            classNames.push(...addBranchId(this.extractFromBinaryExpression(expr, context, attributeId)));
+        }
+        // Parenthesized expression
+        else if (typescript.isParenthesizedExpression(expr)) {
+            classNames.push(...this.extractFromBranchExpression(expr.expression, context, attributeId, conditionalBranchId));
+        }
+        // VLS ctx reference: __VLS_ctx.myClass
+        else if (typescript.isPropertyAccessExpression(expr)) {
+            const vlsResults = this.extractFromVlsCtxReference(expr, context, attributeId);
+            classNames.push(...addBranchId(vlsResults));
+        }
+        // Template literal: `flex ${something}`
+        else if (typescript.isTemplateExpression(expr) ||
+            typescript.isNoSubstitutionTemplateLiteral(expr)) {
+            const addAttributeId = (classes) => classes.map(c => ({ ...c, attributeId }));
+            classNames.push(...addBranchId(addAttributeId(this.expressionExtractor.extract(expr, context))));
+        }
+        return classNames;
+    }
+    /**
+     * Extract classes from CVA/TV function calls with class override.
+     * Handles patterns like: button({ color: 'primary', class: 'invalid-class' })
+     *
+     * Only extracts from functions that are defined using cva() or tv(),
+     * not from arbitrary custom functions.
+     */
+    extractFromCvaTvClassOverride(callExpr, context, attributeId) {
+        const { typescript } = context;
+        const classNames = [];
+        // Check if this is a __VLS_ctx.functionName pattern
+        const calleeExpr = callExpr.expression;
+        if (!typescript.isPropertyAccessExpression(calleeExpr)) {
+            return classNames;
+        }
+        const objectExpr = calleeExpr.expression;
+        if (!typescript.isIdentifier(objectExpr) || objectExpr.text !== '__VLS_ctx') {
+            return classNames;
+        }
+        const functionName = calleeExpr.name;
+        if (!typescript.isIdentifier(functionName)) {
+            return classNames;
+        }
+        // Check if this function is defined using cva() or tv()
+        // by looking at its definition
+        if (!this.isCvaTvFunction(functionName, context)) {
+            return classNames;
+        }
+        // Look for object argument with class/className property
+        if (callExpr.arguments.length === 0) {
+            return classNames;
+        }
+        const firstArg = callExpr.arguments[0];
+        if (!typescript.isObjectLiteralExpression(firstArg)) {
+            return classNames;
+        }
+        // Find class or className property
+        for (const prop of firstArg.properties) {
+            if (!typescript.isPropertyAssignment(prop)) {
+                continue;
+            }
+            const propName = prop.name;
+            if (!typescript.isIdentifier(propName)) {
+                continue;
+            }
+            if (propName.text !== 'class' && propName.text !== 'className') {
+                continue;
+            }
+            // Extract classes from the property value
+            const value = prop.initializer;
+            if (typescript.isStringLiteral(value)) {
+                classNames.push(...this.extractClassesFromStringLiteral(value, context, attributeId));
+            }
+            else if (typescript.isArrayLiteralExpression(value)) {
+                classNames.push(...this.extractFromArrayExpression(value, context, attributeId));
+            }
+            else if (typescript.isTemplateExpression(value) ||
+                typescript.isNoSubstitutionTemplateLiteral(value)) {
+                const addAttrId = (classes) => classes.map(c => ({ ...c, attributeId }));
+                classNames.push(...addAttrId(this.expressionExtractor.extract(value, context)));
+            }
+        }
+        return classNames;
+    }
+    /**
+     * Check if a function is defined using cva() or tv().
+     * Resolves the function symbol and checks if its initializer is a cva/tv call.
+     */
+    isCvaTvFunction(functionName, context) {
+        const { typescript, typeChecker } = context;
+        if (!typeChecker) {
+            return false;
+        }
+        // Get the symbol for the function name
+        const symbol = typeChecker.getSymbolAtLocation(functionName);
+        if (!symbol) {
+            return false;
+        }
+        const declarations = symbol.getDeclarations();
+        if (!declarations || declarations.length === 0) {
+            return false;
+        }
+        for (const declaration of declarations) {
+            // Check PropertySignature -> typeof reference in Volar 3.x
+            if (typescript.isPropertySignature(declaration) && declaration.type) {
+                if (typescript.isTypeQueryNode(declaration.type)) {
+                    const exprName = declaration.type.exprName;
+                    if (typescript.isIdentifier(exprName)) {
+                        // Resolve the actual variable
+                        const varSymbol = typeChecker.getSymbolAtLocation(exprName);
+                        if (varSymbol) {
+                            const varDeclarations = varSymbol.getDeclarations();
+                            if (varDeclarations) {
+                                for (const varDecl of varDeclarations) {
+                                    if (typescript.isVariableDeclaration(varDecl) && varDecl.initializer) {
+                                        if (this.isCallToCvaOrTv(varDecl.initializer, context)) {
+                                            return true;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            // Check direct variable declaration
+            else if (typescript.isVariableDeclaration(declaration) && declaration.initializer) {
+                if (this.isCallToCvaOrTv(declaration.initializer, context)) {
+                    return true;
+                }
+            }
+            // Check property assignment in Vue's return
+            else if (typescript.isPropertyAssignment(declaration)) {
+                let expr = declaration.initializer;
+                if (typescript.isAsExpression(expr)) {
+                    expr = expr.expression;
+                }
+                if (typescript.isIdentifier(expr)) {
+                    const refSymbol = typeChecker.getSymbolAtLocation(expr);
+                    if (refSymbol) {
+                        const refDeclarations = refSymbol.getDeclarations();
+                        if (refDeclarations) {
+                            for (const refDecl of refDeclarations) {
+                                if (typescript.isVariableDeclaration(refDecl) && refDecl.initializer) {
+                                    if (this.isCallToCvaOrTv(refDecl.initializer, context)) {
+                                        return true;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return false;
+    }
+    /**
+     * Check if an expression is a call to cva() or tv().
+     */
+    isCallToCvaOrTv(expr, context) {
+        const { typescript } = context;
+        if (!typescript.isCallExpression(expr)) {
+            return false;
+        }
+        const callee = expr.expression;
+        // Direct call: cva(...) or tv(...)
+        if (typescript.isIdentifier(callee)) {
+            const name = callee.text;
+            return name === 'cva' || name === 'tv' || name === 'tvLite';
+        }
+        return false;
+    }
+    /**
+     * Extract classes from a string literal with attributeId.
+     */
+    extractClassesFromStringLiteral(literal, context, attributeId) {
+        const classNames = [];
+        const fullText = literal.text;
+        if (fullText.length === 0) {
+            return classNames;
+        }
+        const stringContentStart = literal.getStart() + 1;
+        let offset = 0;
+        const parts = fullText.split(/(\s+)/);
+        for (const part of parts) {
+            if (part && !/^\s+$/.test(part)) {
+                classNames.push({
+                    className: part,
+                    absoluteStart: stringContentStart + offset,
+                    length: part.length,
+                    line: context.sourceFile.getLineAndCharacterOfPosition(stringContentStart + offset).line + 1,
+                    file: context.sourceFile.fileName,
+                    attributeId
+                });
+            }
+            offset += part.length;
+        }
         return classNames;
     }
     /**
@@ -329,6 +836,84 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
             return [];
         }
         const objectExpr = expr.expression;
+        // Handle nested property access: __VLS_ctx.obj.property
+        // e.g., __VLS_ctx.slotProps.buttonClass
+        if (typescript.isPropertyAccessExpression(objectExpr)) {
+            const nestedObject = objectExpr.expression;
+            if (typescript.isIdentifier(nestedObject) && nestedObject.text === '__VLS_ctx') {
+                // This is __VLS_ctx.something.somethingElse
+                const middlePropName = objectExpr.name;
+                const finalPropName = expr.name;
+                if (typescript.isIdentifier(middlePropName) && typescript.isIdentifier(finalPropName)) {
+                    // Resolve the middle property (e.g., slotProps) to get its type/value
+                    const middleSymbol = typeChecker.getSymbolAtLocation(middlePropName);
+                    if (middleSymbol) {
+                        const middleDeclarations = middleSymbol.getDeclarations();
+                        if (middleDeclarations) {
+                            for (const middleDecl of middleDeclarations) {
+                                // Handle variable declaration: const slotProps = { buttonClass: '...' }
+                                if (typescript.isVariableDeclaration(middleDecl) && middleDecl.initializer) {
+                                    if (typescript.isObjectLiteralExpression(middleDecl.initializer)) {
+                                        // Find the property in the object literal
+                                        for (const prop of middleDecl.initializer.properties) {
+                                            if (typescript.isPropertyAssignment(prop)) {
+                                                const propName = prop.name;
+                                                if (typescript.isIdentifier(propName) &&
+                                                    propName.text === finalPropName.text) {
+                                                    // Found the property, extract classes from its value
+                                                    // Keep original positions from the class string
+                                                    const classes = this.extractFromExpression(prop.initializer, context, attributeId);
+                                                    return classes.map(c => ({
+                                                        ...c,
+                                                        attributeId
+                                                    }));
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                                // Handle property signature in Volar's generated types
+                                else if (typescript.isPropertySignature(middleDecl) && middleDecl.type) {
+                                    if (typescript.isTypeQueryNode(middleDecl.type)) {
+                                        const exprName = middleDecl.type.exprName;
+                                        if (typescript.isIdentifier(exprName)) {
+                                            const varSymbol = typeChecker.getSymbolAtLocation(exprName);
+                                            if (varSymbol) {
+                                                const varDeclarations = varSymbol.getDeclarations();
+                                                if (varDeclarations) {
+                                                    for (const varDecl of varDeclarations) {
+                                                        if (typescript.isVariableDeclaration(varDecl) &&
+                                                            varDecl.initializer &&
+                                                            typescript.isObjectLiteralExpression(varDecl.initializer)) {
+                                                            // Find the property
+                                                            for (const prop of varDecl.initializer.properties) {
+                                                                if (typescript.isPropertyAssignment(prop)) {
+                                                                    const pName = prop.name;
+                                                                    if (typescript.isIdentifier(pName) &&
+                                                                        pName.text === finalPropName.text) {
+                                                                        // Keep original positions from the class string
+                                                                        const classes = this.extractFromExpression(prop.initializer, context, attributeId);
+                                                                        return classes.map(c => ({
+                                                                            ...c,
+                                                                            attributeId
+                                                                        }));
+                                                                    }
+                                                                }
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            return [];
+        }
         if (!typescript.isIdentifier(objectExpr) || objectExpr.text !== '__VLS_ctx') {
             return [];
         }
@@ -362,13 +947,20 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
             if (typescript.isVariableDeclaration(declaration)) {
                 const initializer = declaration.initializer;
                 if (initializer) {
-                    // Check if this is a computed() call
+                    // Check if this is a computed() or inject() call
                     if (typescript.isCallExpression(initializer)) {
+                        // Handle computed() calls
                         const computedClasses = this.extractFromComputedCall(initializer, context, attributeId, templatePosition, templateLength);
                         if (computedClasses.length > 0) {
                             classNames.push(...computedClasses);
                             continue;
                         }
+                        // Handle inject() calls with default value: inject('key', 'default-classes')
+                        const injectClasses = this.extractFromInjectCall(initializer, context, attributeId);
+                        if (injectClasses.length > 0) {
+                            classNames.push(...injectClasses);
+                            continue;
+                        }
                     }
                     // For regular variables, extract classes from the initializer
                     // Keep original position from string literal
@@ -443,7 +1035,7 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
                                     if (varDeclarations) {
                                         for (const varDecl of varDeclarations) {
                                             if (typescript.isVariableDeclaration(varDecl) && varDecl.initializer) {
-                                                // Check if it's a computed() call - use ORIGINAL position
+                                                // Check if it's a computed() or inject() call - use ORIGINAL position
                                                 // so errors point to actual class strings in script
                                                 if (typescript.isCallExpression(varDecl.initializer)) {
                                                     const computedClasses = this.extractFromComputedCall(varDecl.initializer, context, attributeId
@@ -452,6 +1044,11 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
                                                     if (computedClasses.length > 0) {
                                                         return computedClasses;
                                                     }
+                                                    // Check for inject() calls with default value
+                                                    const injectClasses = this.extractFromInjectCall(varDecl.initializer, context, attributeId);
+                                                    if (injectClasses.length > 0) {
+                                                        return injectClasses;
+                                                    }
                                                 }
                                                 // For string literals, use ORIGINAL position from script
                                                 // This makes errors point to the actual invalid class
@@ -502,6 +1099,11 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
                             if (computedClasses.length > 0) {
                                 return computedClasses;
                             }
+                            // Check for inject() calls with default value
+                            const injectClasses = this.extractFromInjectCall(decl.initializer, context, attributeId);
+                            if (injectClasses.length > 0) {
+                                return injectClasses;
+                            }
                         }
                         // Otherwise extract from the initializer directly
                         const classes = this.extractFromExpression(decl.initializer, context);
@@ -726,13 +1328,19 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
             if (typescript.isVariableDeclaration(declaration)) {
                 const init = declaration.initializer;
                 if (init) {
-                    // Check for computed() calls
+                    // Check for computed() or inject() calls
                     if (typescript.isCallExpression(init)) {
                         const computedClasses = this.extractFromComputedCall(init, context, attributeId, templatePosition, templateLength);
                         if (computedClasses.length > 0) {
                             classNames.push(...computedClasses);
                             continue;
                         }
+                        // Check for inject() calls with default value
+                        const injectClasses = this.extractFromInjectCall(init, context, attributeId);
+                        if (injectClasses.length > 0) {
+                            classNames.push(...injectClasses);
+                            continue;
+                        }
                     }
                     // Extract classes from the initializer - keep original position
                     classNames.push(...addAttributeId(this.extractFromExpression(init, context)));
@@ -772,6 +1380,27 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
         }
         return [];
     }
+    /**
+     * Extract classes from an inject() call with a default value.
+     * Handles: const classes = inject('key', 'flex items-center')
+     */
+    extractFromInjectCall(callExpr, context, attributeId) {
+        const { typescript } = context;
+        // Check if this is a call to 'inject'
+        const calleeExpr = callExpr.expression;
+        if (!typescript.isIdentifier(calleeExpr) || calleeExpr.text !== 'inject') {
+            return [];
+        }
+        // inject() needs at least 2 arguments for us to extract the default value
+        // inject(key, defaultValue) or inject(key, defaultValue, treatDefaultAsFactory)
+        if (callExpr.arguments.length < 2) {
+            return [];
+        }
+        const defaultValue = callExpr.arguments[1];
+        // Extract classes from the default value
+        const classes = this.extractFromExpression(defaultValue, context, attributeId);
+        return classes.map(c => ({ ...c, attributeId }));
+    }
     /**
      * Extract classes from a function declaration's return statements.
      * Handles: function getClasses() { return ['flex', 'items-center']; }
@@ -820,8 +1449,11 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
     }
     /**
      * Extract classes from an expression (array, object, string, etc.)
+     * @param expr The expression to extract from
+     * @param context The extraction context
+     * @param attributeId Optional attribute ID for tracking
      */
-    extractFromExpression(expr, context) {
+    extractFromExpression(expr, context, attributeId) {
         const { typescript } = context;
         const classNames = [];
         // String literal: 'flex items-center'
@@ -854,13 +1486,36 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
                 if (element === undefined)
                     continue;
                 if (typescript.isStringLiteral(element)) {
-                    classNames.push(...this.extractFromExpression(element, context));
+                    classNames.push(...this.extractFromExpression(element, context, attributeId));
                 }
                 else if (typescript.isObjectLiteralExpression(element)) {
-                    classNames.push(...this.extractFromExpression(element, context));
+                    classNames.push(...this.extractFromExpression(element, context, attributeId));
                 }
                 else if (typescript.isSpreadElement(element)) {
-                    classNames.push(...this.extractFromExpression(element.expression, context));
+                    classNames.push(...this.extractFromExpression(element.expression, context, attributeId));
+                }
+                // Handle __VLS_ctx.variable references in arrays
+                else if (typescript.isPropertyAccessExpression(element)) {
+                    if (attributeId) {
+                        const vlsResults = this.extractFromVlsCtxReference(element, context, attributeId);
+                        if (vlsResults.length > 0) {
+                            classNames.push(...vlsResults);
+                        }
+                    }
+                }
+                // Handle parenthesized expressions: (__VLS_ctx.myVar)
+                else if (typescript.isParenthesizedExpression(element)) {
+                    const inner = element.expression;
+                    if (typescript.isPropertyAccessExpression(inner) && attributeId) {
+                        const vlsResults = this.extractFromVlsCtxReference(inner, context, attributeId);
+                        if (vlsResults.length > 0) {
+                            classNames.push(...vlsResults);
+                        }
+                    }
+                }
+                // Handle nested arrays recursively
+                else if (typescript.isArrayLiteralExpression(element)) {
+                    classNames.push(...this.extractFromExpression(element, context, attributeId));
                 }
             }
             return classNames;
@@ -880,13 +1535,30 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
                         className = propName.text;
                         start = propName.getStart();
                     }
+                    // Handle computed property names: { [__VLS_ctx.myVar]: true }
+                    else if (typescript.isComputedPropertyName(propName)) {
+                        let computedExpr = propName.expression;
+                        // Unwrap parentheses: { [(__VLS_ctx.myVar)]: true }
+                        if (typescript.isParenthesizedExpression(computedExpr)) {
+                            computedExpr = computedExpr.expression;
+                        }
+                        // Resolve __VLS_ctx.variable pattern
+                        if (typescript.isPropertyAccessExpression(computedExpr) && attributeId) {
+                            const vlsResults = this.extractFromVlsCtxReference(computedExpr, context, attributeId);
+                            if (vlsResults.length > 0) {
+                                classNames.push(...vlsResults);
+                                continue;
+                            }
+                        }
+                    }
                     if (className && start !== undefined) {
                         classNames.push({
                             className,
                             absoluteStart: start,
                             length: className.length,
                             line: context.sourceFile.getLineAndCharacterOfPosition(start).line + 1,
-                            file: context.sourceFile.fileName
+                            file: context.sourceFile.fileName,
+                            attributeId
                         });
                     }
                 }
@@ -898,14 +1570,115 @@ class VueAttributeExtractor extends BaseExtractor_1.BaseExtractor {
                         absoluteStart: start,
                         length: className.length,
                         line: context.sourceFile.getLineAndCharacterOfPosition(start).line + 1,
-                        file: context.sourceFile.fileName
+                        file: context.sourceFile.fileName,
+                        attributeId
                     });
                 }
             }
             return classNames;
         }
+        // Handle conditional (ternary) expressions: isActive ? 'flex' : 'hidden'
+        if (typescript.isConditionalExpression(expr)) {
+            // Extract from both branches recursively
+            classNames.push(...this.extractFromExpression(expr.whenTrue, context, attributeId));
+            classNames.push(...this.extractFromExpression(expr.whenFalse, context, attributeId));
+            return classNames;
+        }
+        // Handle binary expressions: isActive && 'flex', isDisabled || 'fallback'
+        if (typescript.isBinaryExpression(expr)) {
+            classNames.push(...this.extractFromExpression(expr.left, context, attributeId));
+            classNames.push(...this.extractFromExpression(expr.right, context, attributeId));
+            return classNames;
+        }
+        // Handle parenthesized expressions: ('flex items-center')
+        if (typescript.isParenthesizedExpression(expr)) {
+            return this.extractFromExpression(expr.expression, context, attributeId);
+        }
+        // Handle type assertions: 'flex' as string, 'flex' as const
+        if (typescript.isAsExpression(expr)) {
+            return this.extractFromExpression(expr.expression, context, attributeId);
+        }
+        // Handle non-null assertions: someValue!
+        if (typescript.isNonNullExpression(expr)) {
+            return this.extractFromExpression(expr.expression, context, attributeId);
+        }
+        // Handle template literals
+        if (typescript.isTemplateExpression(expr) || typescript.isNoSubstitutionTemplateLiteral(expr)) {
+            const addAttrId = (classes) => attributeId ? classes.map(c => ({ ...c, attributeId })) : classes;
+            return addAttrId(this.expressionExtractor.extract(expr, context));
+        }
         return classNames;
     }
+    /**
+     * Extract classes from props.propertyName patterns with default values.
+     * Vue generates __VLS_defaults for withDefaults() calls.
+     *
+     * Generated code pattern:
+     * const __VLS_defaults = { buttonClass: 'flex items-center' };
+     * ...{ class: (props.buttonClass) }
+     */
+    extractFromPropsWithDefaults(value, context, attributeId) {
+        const { typescript, typeChecker } = context;
+        if (!typeChecker) {
+            return [];
+        }
+        // Unwrap parentheses: (props.buttonClass) -> props.buttonClass
+        let expr = value;
+        if (typescript.isParenthesizedExpression(expr)) {
+            expr = expr.expression;
+        }
+        // Check for props.propertyName pattern
+        if (!typescript.isPropertyAccessExpression(expr)) {
+            return [];
+        }
+        const objectExpr = expr.expression;
+        if (!typescript.isIdentifier(objectExpr) || objectExpr.text !== 'props') {
+            return [];
+        }
+        const propertyName = expr.name;
+        if (!typescript.isIdentifier(propertyName)) {
+            return [];
+        }
+        // Look for __VLS_defaults in the source file
+        const defaultsValue = this.findVlsDefaultsProperty(propertyName.text, context);
+        if (defaultsValue) {
+            return this.extractFromExpression(defaultsValue, context, attributeId);
+        }
+        return [];
+    }
+    /**
+     * Find a property value in __VLS_defaults object.
+     */
+    findVlsDefaultsProperty(propertyName, context) {
+        const { typescript, sourceFile } = context;
+        // Walk through the source file to find __VLS_defaults
+        let result;
+        const visitor = (node) => {
+            if (result)
+                return;
+            if (typescript.isVariableDeclaration(node)) {
+                const name = node.name;
+                if (typescript.isIdentifier(name) &&
+                    name.text === '__VLS_defaults' &&
+                    node.initializer &&
+                    typescript.isObjectLiteralExpression(node.initializer)) {
+                    // Found __VLS_defaults, look for the property
+                    for (const prop of node.initializer.properties) {
+                        if (typescript.isPropertyAssignment(prop)) {
+                            const propName = prop.name;
+                            if (typescript.isIdentifier(propName) && propName.text === propertyName) {
+                                result = prop.initializer;
+                                return;
+                            }
+                        }
+                    }
+                }
+            }
+            typescript.forEachChild(node, visitor);
+        };
+        typescript.forEachChild(sourceFile, visitor);
+        return result;
+    }
 }
 exports.VueAttributeExtractor = VueAttributeExtractor;
 //# sourceMappingURL=VueAttributeExtractor.js.map