tailwind-typescript-plugin 1.4.0-beta.2 → 1.4.0-beta.20

package/README.md

@@ -6,11 +6,11 @@
 [![TypeScript](https://img.shields.io/github/package-json/dependency-version/IvanRodriCalleja/tailwind-typescript-plugin/dev/typescript?label=TypeScript)](https://www.typescriptlang.org/)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/IvanRodriCalleja/tailwind-typescript-plugin/blob/main/CONTRIBUTING.md)
 
-A TypeScript Language Service plugin that catches **typos and invalid Tailwind CSS class names** in your JSX/TSX files. When you write a class name that doesn't exist in Tailwind, it won't apply any styles—this plugin detects those mistakes and shows errors directly in your editor before you ship broken styles.
+A TypeScript Language Service plugin that catches **typos and invalid Tailwind CSS class names** in your JSX/TSX and Vue files. When you write a class name that doesn't exist in Tailwind, it won't apply any styles—this plugin detects those mistakes and shows errors directly in your editor before you ship broken styles.
 
 ## What does this plugin do?
 
-Ever written `className="flex itms-center"` instead of `"flex items-center"`? That typo silently fails—Tailwind ignores invalid classes and your component looks broken. This plugin prevents that by analyzing your JSX/TSX code and validating that all Tailwind classes used in `className` attributes actually exist in your Tailwind CSS configuration. It provides real-time feedback by showing TypeScript errors for invalid or misspelled Tailwind classes, catching styling mistakes before they reach production.
+Ever written `className="flex itms-center"` instead of `"flex items-center"`? That typo silently fails—Tailwind ignores invalid classes and your component looks broken. This plugin prevents that by analyzing your JSX/TSX and Vue code, validating that all Tailwind classes used in `className`/`class` attributes actually exist in your Tailwind CSS configuration. It provides real-time feedback by showing TypeScript errors for invalid or misspelled Tailwind classes, catching styling mistakes before they reach production.
 
 ## Table of Contents
 
@@ -37,6 +37,10 @@ Ever written `className="flex itms-center"` instead of `"flex items-center"`? Th
 - **Editor integration**: Works with any editor that supports TypeScript Language Service (VS Code, WebStorm, etc.)
 - **Supports Tailwind variants**: Validates responsive (`md:`, `lg:`), state (`hover:`, `focus:`), and other variants
 - **Arbitrary values**: Correctly handles Tailwind arbitrary values like `h-[50vh]` or `bg-[#ff0000]`
+- **Vue support**: Validates classes in Vue Single File Components (`.vue` files) when used with `@vue/typescript-plugin`
+  - Static class attributes: `<div class="flex items-center">`
+  - Dynamic class bindings: `<div :class="{ 'bg-red-500': isActive }">`
+  - Object and array syntax support
 - **Variant library support**:
   - **tailwind-variants**: Validates classes in `tv()` function calls including `base`, `variants`, `compoundVariants`, `slots`, and `class`/`className` override properties
   - **class-variance-authority**: Validates classes in `cva()` function calls including base classes, `variants`, `compoundVariants`, and `class`/`className` override properties
@@ -59,6 +63,21 @@ pnpm add tailwind-typescript-plugin
 
 Add the plugin to the `compilerOptions.plugins` array in your `tsconfig.json`:
 
+```json
+{
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "tailwind-typescript-plugin",
+        "globalCss": "./src/global.css"
+      }
+    ]
+  }
+}
+```
+
+**Full configuration example with all options:**
+
 ```json
 {
   "compilerOptions": {
@@ -66,11 +85,44 @@ Add the plugin to the `compilerOptions.plugins` array in your `tsconfig.json`:
       {
         "name": "tailwind-typescript-plugin",
         "globalCss": "./src/global.css",
-        "utilityFunctions": ["clsx", "cn", "classnames"],
-        "allowedClasses": ["custom-button", "app-header", "project-card"],
-        "variants": {
-          "tailwindVariants": true,
-          "classVarianceAuthority": true
+        "libraries": {
+          "utilities": {
+            "cn": "@/lib/utils",
+            "merge": "tailwind-merge",
+            "myFn": "*"
+          },
+          "variants": {
+            "tailwindVariants": true,
+            "classVarianceAuthority": true
+          }
+        },
+        "validation": {
+          "enabled": true,
+          "severity": "error",
+          "allowedClasses": ["custom-*", "app-*"]
+        },
+        "lint": {
+          "enabled": true,
+          "conflictingClasses": {
+            "enabled": true,
+            "severity": "warning"
+          },
+          "repeatedClasses": {
+            "enabled": true,
+            "severity": "warning"
+          }
+        },
+        "editor": {
+          "enabled": true,
+          "autocomplete": {
+            "enabled": true
+          },
+          "hover": {
+            "enabled": true
+          }
+        },
+        "classAttributes": {
+          "attributes": ["colorStyles", "textStyles"]
         }
       }
     ]
@@ -80,82 +132,218 @@ Add the plugin to the `compilerOptions.plugins` array in your `tsconfig.json`:
 
 **Configuration options:**
 
-- `globalCss` (required): Path to your global CSS file that imports Tailwind CSS. This can be relative to your project root.
+#### `globalCss` (required)
+Path to your global CSS file that imports Tailwind CSS. This can be relative to your project root.
 
-- `allowedClasses` (optional): Array of custom class names that should be treated as valid alongside Tailwind classes. Useful for project-specific or third-party utility classes that aren't part of Tailwind.
-  - **Default**: `[]` (no custom classes allowed)
-  - **Example**:
-    ```json
-    {
-      "allowedClasses": ["custom-button", "app-header", "project-card"]
-    }
-    ```
-  - Classes in this list will be considered valid and won't trigger validation errors
-  - Works with all extraction patterns (literals, expressions, functions, arrays, etc.)
-  - Combines with Tailwind classes - both are validated independently
-
-- `variants` (optional): Configure which variant library extractors to enable. This is useful for performance optimization when you only use one library.
-  - **Default behavior (no config)**: Both `tailwind-variants` and `class-variance-authority` are enabled
-  - **Selective enabling**: If you specify ANY variant config, only those explicitly set to `true` are enabled
-  - **Example configurations**:
-    ```json
-    // Enable only tailwind-variants
-    {
-      "variants": {
-        "tailwindVariants": true
-      }
+---
+
+#### `libraries` (optional)
+Configure utility functions and variant libraries.
+
+##### `libraries.utilities`
+Configure which utility functions to scan for class names. Keys are function names, values control import matching:
+
+| Value | Description |
+|-------|-------------|
+| `"*"` | Match any import source |
+| `"off"` | Disable this utility function |
+| `"package-name"` | Only match if imported from this package |
+
+**Defaults** (automatically included):
+```json
+{
+  "cn": "*",
+  "clsx": "clsx",
+  "classnames": "classnames",
+  "classNames": "classnames",
+  "cx": "classnames",
+  "twMerge": "tailwind-merge"
+}
+```
+
+**Example - Add custom utility and disable a default**:
+```json
+{
+  "libraries": {
+    "utilities": {
+      "myMerge": "@/lib/utils",
+      "clsx": "off"
     }
+  }
+}
+```
 
-    // Enable only class-variance-authority
-    {
-      "variants": {
-        "classVarianceAuthority": true
-      }
+**Supported import patterns**:
+```typescript
+// Named import
+import { merge } from '@/lib/utils';
+className={merge('flex', 'items-center')} // ✅ Validated
+
+// Default import
+import merge from '@/lib/utils';
+className={merge('flex', 'items-center')} // ✅ Validated
+
+// Namespace import
+import * as utils from '@/lib/utils';
+className={utils.merge('flex', 'items-center')} // ✅ Validated
+
+// Aliased import
+import { something as merge } from '@/lib/utils';
+className={merge('flex', 'items-center')} // ✅ Validated
+```
+
+##### `libraries.variants`
+Configure which variant library extractors to enable.
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `tailwindVariants` | `true` | Enable `tv()` function support |
+| `classVarianceAuthority` | `true` | Enable `cva()` function support |
+
+**Example - Enable only tailwind-variants**:
+```json
+{
+  "libraries": {
+    "variants": {
+      "tailwindVariants": true,
+      "classVarianceAuthority": false
     }
+  }
+}
+```
 
-    // Enable both explicitly
-    {
-      "variants": {
-        "tailwindVariants": true,
-        "classVarianceAuthority": true
-      }
+---
+
+#### `validation` (optional)
+Configure invalid class detection.
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `enabled` | `true` | Enable/disable invalid class validation |
+| `severity` | `"error"` | `"error"` \| `"warning"` \| `"suggestion"` \| `"off"` |
+| `allowedClasses` | `[]` | Custom class patterns to allow |
+
+##### `validation.allowedClasses`
+Array of custom class names or wildcard patterns that should be treated as valid.
+
+| Pattern | Description | Example | Matches |
+|---------|-------------|---------|---------|
+| `prefix-*` | Matches classes starting with prefix | `custom-*` | `custom-button`, `custom-card` |
+| `*-suffix` | Matches classes ending with suffix | `*-icon` | `arrow-icon`, `close-icon` |
+| `*-contains-*` | Matches classes containing the string | `*-component-*` | `app-component-header` |
+| `exact` | Exact match (no wildcards) | `my-class` | Only `my-class` |
+
+**Example**:
+```json
+{
+  "validation": {
+    "allowedClasses": ["custom-*", "*-icon", "exact-class"]
+  }
+}
+```
+
+---
+
+#### `lint` (optional)
+Configure lint rules for code quality issues.
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `enabled` | `true` | Master switch for all lint rules |
+| `conflictingClasses` | `{ enabled: true, severity: "warning" }` | Detect conflicting utilities |
+| `repeatedClasses` | `{ enabled: true, severity: "warning" }` | Detect duplicate classes |
+
+**Example - Disable conflicting class detection**:
+```json
+{
+  "lint": {
+    "conflictingClasses": {
+      "enabled": false
     }
+  }
+}
+```
 
-    // No config = both enabled by default
-    {
-      // variants not specified - both libraries validated
+**Example - Make duplicate classes an error**:
+```json
+{
+  "lint": {
+    "repeatedClasses": {
+      "severity": "error"
     }
-    ```
-  - **Performance impact**: Disabling unused extractors skips TypeChecker operations and symbol resolution for that library, providing faster validation
-
-- `utilityFunctions` (optional): Array of additional function names to validate. These will be **merged with the defaults**, so you don't lose the common ones.
-  - **Defaults (always included)**: `['clsx', 'cn', 'classnames', 'classNames', 'cx', 'cva', 'twMerge', 'tv']`
-  - **Add your own**: Provide custom function names that will be added to the defaults
-  - **Example config**:
-    ```json
-    {
-      "utilityFunctions": ["myCustomFn", "buildClasses"]
+  }
+}
+```
+
+---
+
+#### `editor` (optional)
+Configure editor features like autocomplete and hover.
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `enabled` | `true` | Master switch for all editor features |
+| `autocomplete.enabled` | `true` | Enable Tailwind class autocomplete |
+| `hover.enabled` | `true` | Enable hover information showing CSS |
+
+**Example - Disable autocomplete**:
+```json
+{
+  "editor": {
+    "autocomplete": {
+      "enabled": false
     }
-    ```
-    This will validate: `clsx`, `cn`, `classnames`, `classNames`, `cx`, `cva`, `twMerge`, `tv`, **`myCustomFn`**, **`buildClasses`**
+  }
+}
+```
+
+---
+
+#### `classAttributes` (optional)
+Configure which JSX/HTML attributes should be treated as class attributes.
+
+By default, the plugin validates classes in `className`, `class`, and `classList` attributes. You can add additional attributes for frameworks like React Native that use different prop names for styling.
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `attributes` | `[]` | Additional attribute names to treat as class attributes |
+
+**Default attributes** (always included):
+- `className` (React, JSX)
+- `class` (HTML, Web Components)
+- `classList` (Solid.js)
+
+**Example - Add React Native style attributes**:
+```json
+{
+  "classAttributes": {
+    "attributes": ["colorStyles", "textStyles", "containerStyles"]
+  }
+}
+```
+
+**Usage example**:
+```tsx
+// ✅ All of these will be validated:
+<div className="flex items-center">...</div>
+<div class="flex items-center">...</div>
+<div classList={{ flex: true }}>...</div>
+<View colorStyles="bg-blue-500 text-white">...</View>
+<Text textStyles="font-bold text-lg">...</Text>
+```
 
-  - **Supported patterns**:
-    ```typescript
-    // Simple calls (validated by default):
-    className={clsx('flex', 'items-center')}
-    className={cn('flex', 'items-center')}
+---
 
-    // Member expressions (nested property access):
-    className={utils.cn('flex', 'items-center')}
-    className={lib.clsx('flex', 'items-center')}
+### Backwards Compatibility
 
-    // Custom functions (add via config):
-    className={myCustomFn('flex', 'items-center')}
-    className={buildClasses('flex', 'items-center')}
+The following deprecated options are still supported but will be removed in a future version:
 
-    // Dynamic calls (ignored, won't throw errors):
-    className={functions['cn']('flex', 'items-center')}
-    ```
+| Deprecated | New Location |
+|------------|--------------|
+| `utilityFunctions` | `libraries.utilities` |
+| `variants` | `libraries.variants` |
+| `allowedClasses` | `validation.allowedClasses` |
+| `enableLogging` | Removed (no replacement) |
 
 ### 2. Ensure your CSS file imports Tailwind
 
@@ -188,6 +376,49 @@ You may need to restart the TypeScript server:
 - Open command palette
 - Type "TypeScript: Restart TS Server"
 
+#### Vue Projects
+
+For Vue Single File Components (`.vue` files), you need to configure `@vue/typescript-plugin` alongside this plugin:
+
+1. Install the Vue TypeScript plugin:
+```bash
+npm install -D @vue/typescript-plugin
+```
+
+2. Configure both plugins in your `tsconfig.json`:
+```json
+{
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "@vue/typescript-plugin",
+        "languages": ["vue"]
+      },
+      {
+        "name": "tailwind-typescript-plugin",
+        "globalCss": "./src/global.css"
+      }
+    ]
+  }
+}
+```
+
+3. Ensure you have the [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) extension installed in VS Code.
+
+The plugin will then validate classes in your Vue templates:
+```vue
+<template>
+  <!-- ✅ Valid classes -->
+  <div class="flex items-center">Valid</div>
+
+  <!-- ❌ Invalid class detected -->
+  <div class="invalidclass">Error shown</div>
+
+  <!-- ✅ Dynamic class bindings -->
+  <div :class="{ 'bg-red-500': isActive }">Dynamic</div>
+</template>
+```
+
 #### Other Editors
 
 Most editors that support TypeScript Language Service plugins should work automatically. Refer to your editor's documentation for TypeScript plugin configuration.
@@ -245,6 +476,18 @@ const validClass = 'flex items-center';
 const baseClass = 'flex';
 <div className={[baseClass, 'items-center']}>Array with variable</div>
 
+// ✅ Spread operator in arrays
+const baseClasses = ['flex', 'items-center'];
+<div className={[...baseClasses, 'p-4']}>Spread in array</div>
+
+// ✅ Spread operator in function calls
+<div className={cn(...baseClasses, 'p-4')}>Spread in function</div>
+
+// ✅ Multiple spreads
+const layoutClasses = ['flex', 'items-center'];
+const spacingClasses = ['p-4', 'm-2'];
+<div className={cn(...layoutClasses, ...spacingClasses)}>Multiple spreads</div>
+
 // ✅ Variables in tv() and cva()
 const buttonBase = 'font-semibold text-white';
 const button = tv({ base: buttonBase });
@@ -275,6 +518,14 @@ const badClass = 'invalid-array-class';
 // Error: The class "invalid-array-class" is not a valid Tailwind class.
 //        This value is used as className via variable "badClass" on line 8
 <div className={['flex', badClass]}>Array with invalid variable</div>
+
+// ❌ Invalid class in spread operator
+const invalidClasses = ['flex', 'invalid-spread-class'];
+// Error: The class "invalid-spread-class" is not a valid Tailwind class.
+<div className={[...invalidClasses, 'items-center']}>Spread with invalid</div>
+
+// ❌ Invalid class in spread within function call
+<div className={cn(...invalidClasses, 'p-4')}>Function spread with invalid</div>
 ```
 
 **Custom allowed classes**:
@@ -326,6 +577,18 @@ The plugin detects duplicate classes within the same `className` attribute and s
 <div className={cn(['flex', 'flex', 'items-center'])}>In array</div>
 // Warning: Duplicate class "flex"
 
+// ⚠️ Warning: Duplicates with spread operators
+const baseClasses = ['flex', 'items-center'];
+<div className={cn(...baseClasses, 'flex', 'items-center', 'p-4')}>Spread duplicates</div>
+// Warning: Duplicate class "flex"
+// Warning: Duplicate class "items-center"
+
+// ⚠️ Warning: Duplicates between multiple spreads
+const layoutClasses = ['flex', 'items-center'];
+const containerClasses = ['flex', 'justify-center'];
+<div className={cn(...layoutClasses, ...containerClasses)}>Multiple spread duplicates</div>
+// Warning: Duplicate class "flex"
+
 // ✅ Valid: Same class in DIFFERENT elements (not duplicates)
 <div className="flex items-center">
   <span className="flex justify-center">Different elements</span>
@@ -479,6 +742,22 @@ The plugin intelligently handles ternary expressions - conflicts are NOT flagged
 // Warning: Both classes affect text-align
 ```
 
+**Conflicts with spread operators**:
+
+```tsx
+// ⚠️ Warning: Conflicts with spread operator
+const baseClasses = ['flex', 'p-4'];
+<div className={cn(...baseClasses, 'p-2', 'items-center')}>Spread conflict</div>
+// Warning: Class "p-4" conflicts with "p-2". Both affect the padding property.
+
+// ⚠️ Warning: Conflicts between multiple spreads
+const smallText = ['text-sm', 'font-medium'];
+const largeText = ['text-lg', 'font-bold'];
+<div className={cn(...smallText, ...largeText)}>Multiple spread conflicts</div>
+// Warning: Class "text-sm" conflicts with "text-lg". Both affect the font-size property.
+// Warning: Class "font-medium" conflicts with "font-bold". Both affect the font-weight property.
+```
+
 **Conflicts in tv() and cva()**:
 
 The plugin detects conflicts within `tv()` and `cva()` base properties, but intelligently skips conflicts between base and variants since variants are designed to override base styles:
@@ -834,6 +1113,15 @@ const card2 = tv({ base: 'flex justify-center' });
   Validates variables used in computed object property keys
   Example: `const myClass = 'invalid-class'; <div className={{ [myClass]: true }}>Object</div>`
 
+- [X] **Spread Operator** → [`test-spread-operator/`](./example/src/test-spread-operator/)
+  Validates spread operators in arrays and function calls
+  Example: `const base = ['flex', 'invalid']; <div className={[...base, 'p-4']}>Spread</div>`
+  - Spread in arrays: `className={[...baseClasses, 'p-4']}`
+  - Spread in function calls: `className={cn(...baseClasses, 'p-4')}`
+  - Multiple spreads: `className={cn(...layoutClasses, ...spacingClasses)}`
+  - Nested spreads: Variables containing arrays with spreads are resolved
+  - Detects invalid classes, duplicates, and conflicts within spread expressions
+
 - [X] **TV Variable** → [`tv-variable.tsx`](./example/src/tv-variable.tsx)
   Validates variables in tailwind-variants tv() definitions
   Example: `const baseClasses = 'invalid-class'; const button = tv({ base: baseClasses })`
@@ -842,19 +1130,19 @@ const card2 = tv({ base: 'flex justify-center' });
   Validates variables in class-variance-authority cva() definitions
   Example: `const baseClasses = 'invalid-class'; const button = cva(baseClasses)`
 
-- [X] **Duplicate Classes** → [`duplicate-classes.tsx`](./example/src/duplicate-classes.tsx)
+- [X] **Duplicate Classes** → [`duplicate-classes/`](./example/src/duplicate-classes/)
   Detects duplicate classes within the same className attribute
-  Example: `className="flex flex items-center"` shows warning on second `flex`
+  Example: `className="flex flex items-center"` shows warning on both `flex` occurrences
 
-- [X] **Duplicate Classes in Ternary** → [`duplicate-classes.tsx`](./example/src/duplicate-classes.tsx)
+- [X] **Duplicate Classes in Ternary** → [`duplicate-classes/`](./example/src/duplicate-classes/)
   Smart detection of duplicates in ternary expressions:
-  - Root + branch duplicate: `clsx('flex', isActive ? 'flex' : 'flex')` → Warning (true duplicate)
+  - Root + branch duplicate: `clsx('flex', isActive ? 'flex' : 'flex')` → Warning on all occurrences
   - Both branches same class: `clsx('mt-4', isActive ? 'flex' : 'flex')` → Warning (consider extracting)
   - Single branch only: `clsx('mt-4', isActive ? 'flex' : '')` → No warning (valid pattern)
 
-- [X] **Duplicate Classes in Variables with Conditionals** → [`duplicate-classes.tsx`](./example/src/duplicate-classes.tsx)
+- [X] **Duplicate Classes in Variables with Conditionals** → [`duplicate-classes/`](./example/src/duplicate-classes/)
   Resolves variables containing ternary expressions and detects duplicates:
-  - `const x = isActive ? 'flex' : 'flex'; clsx('flex', x)` → Warning (root + variable duplicate)
+  - `const x = isActive ? 'flex' : 'flex'; clsx('flex', x)` → Warning on all occurrences
   - `const x = isActive ? 'flex' : 'flex'; clsx('mt-4', x)` → Warning (consider extracting from variable)
   - `const x = isActive ? 'flex' : ''; clsx('mt-4', x)` → No warning (single branch)
 
@@ -879,6 +1167,16 @@ const card2 = tv({ base: 'flex justify-center' });
   - Works with clsx, cn, tv(), cva() and other utility functions
   - tv()/cva() base vs variant: NO conflict (variants are designed to override base)
 
+- [X] **Utility Function Import Verification** → [`utility-function-imports/`](./example/src/utility-function-imports/)
+  Validates custom utility functions with optional import source verification
+  Example: `{ "name": "merge", "from": "@/lib/utils" }` only validates `merge()` if imported from `@/lib/utils`
+  - Supports simple string format (name-only matching) and object format (with import verification)
+  - Named imports: `import { merge } from '@/lib/utils'`
+  - Default imports: `import merge from '@/lib/utils'`
+  - Aliased imports: `import { something as merge } from '@/lib/utils'`
+  - Subpath matching: `{ "from": "my-pkg" }` matches `import from 'my-pkg/utils'`
+  - Functions from wrong import sources are skipped (prevents false positives)
+
 ## How It Works
 
 The plugin hooks into the TypeScript Language Service and:
@@ -902,6 +1200,34 @@ The plugin is designed for minimal performance impact:
 
 **Typical overhead**: <1ms per file for most files, ~2-3ms for files with many tv()/cva() calls
 
+## Hot Reloading
+
+The plugin automatically watches your global CSS file for changes. When you modify your Tailwind configuration or add custom classes in your CSS file, the plugin will:
+
+1. **Detect changes** - Watches the `globalCss` file specified in your `tsconfig.json`
+2. **Reload the design system** - Automatically re-parses your Tailwind configuration
+3. **Clear caches** - Invalidates all diagnostic caches
+4. **Refresh diagnostics** - Requests TypeScript to revalidate all open files
+
+This means you can add new custom classes or modify your Tailwind theme, and the plugin will immediately recognize them without restarting your editor or TypeScript server.
+
+```css
+/* global.css */
+@import "tailwindcss";
+
+/* Add a custom utility - plugin will recognize it after save */
+@utility custom-gradient {
+  background: linear-gradient(to right, #ff7e5f, #feb47b);
+}
+```
+
+```tsx
+// This will be valid immediately after saving global.css
+<div className="custom-gradient">Hot reloaded!</div>
+```
+
+**Note**: The file watcher uses debouncing (300ms) to avoid excessive reloads when making rapid changes.
+
 ## Development
 
 This is a monorepo using Yarn workspaces:
@@ -944,7 +1270,7 @@ Commit to main → Auto-publishes 1.0.33-beta.3
 
 Users can install beta versions:
 ```bash
-npm install typescript-custom-plugin@beta
+npm install tailwind-typescript-plugin@beta
 ```
 
 ### Stable Releases (Manual)

package/lib/core/interfaces.d.ts

@@ -1,5 +1,5 @@
 import * as ts from 'typescript/lib/tsserverlibrary';
-import { ClassNameInfo, ExtractionContext } from './types';
+import { ClassAttributesConfig, ClassNameInfo, EditorConfig, ExtractionContext, LibrariesConfig, LintConfig, ValidationConfig } from './types';
 /**
  * Base interface for class name extractors
  * Follows the Strategy pattern for extensibility
@@ -22,22 +22,33 @@ export interface IClassNameValidator {
     isInitialized(): boolean;
     setAllowedClasses(allowedClasses: string[]): void;
 }
-/**
- * Interface for variant library configuration
- */
-export interface IVariantsConfig {
-    tailwindVariants?: boolean;
-    classVarianceAuthority?: boolean;
-}
 /**
  * Interface for configuration management
  */
 export interface IPluginConfig {
     globalCss?: string;
-    utilityFunctions?: string[];
-    variants?: IVariantsConfig;
-    allowedClasses?: string[];
-    enableLogging?: boolean;
+    /**
+     * Library configurations (utilities and variants)
+     */
+    libraries?: LibrariesConfig;
+    /**
+     * Validation configuration (invalid class detection)
+     */
+    validation?: ValidationConfig;
+    /**
+     * Lint configuration (conflicting and repeated classes)
+     */
+    lint?: LintConfig;
+    /**
+     * Editor features configuration (autocomplete and hover)
+     */
+    editor?: EditorConfig;
+    /**
+     * Additional attribute names to treat as class attributes
+     * These are merged with defaults (className, class, classList)
+     * Example: ["containerStyles", "textStyles"]
+     */
+    classAttributes?: ClassAttributesConfig;
 }
 /**
  * Interface for diagnostic creation

package/lib/core/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/core/interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE3D;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IACnC;;OAEG;IACH,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,iBAAiB,GAAG,OAAO,CAAC;IAE9D;;OAEG;IACH,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,iBAAiB,GAAG,aAAa,EAAE,CAAC;CACpE;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IACnC,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IACzC,aAAa,IAAI,OAAO,CAAC;IACzB,iBAAiB,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;CAClD;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAClC,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,EAAE,CAAC,UAAU,GAAG,EAAE,CAAC,UAAU,CAAC;CACrF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/core/interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAErD,OAAO,EACN,qBAAqB,EACrB,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,MAAM,SAAS,CAAC;AAEjB;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IACnC;;OAEG;IACH,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,iBAAiB,GAAG,OAAO,CAAC;IAE9D;;OAEG;IACH,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,iBAAiB,GAAG,aAAa,EAAE,CAAC;CACpE;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IACnC,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IACzC,aAAa,IAAI,OAAO,CAAC;IACzB,iBAAiB,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;CAClD;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B;;OAEG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAE9B;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;;;OAIG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;CACxC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAClC,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,EAAE,CAAC,UAAU,GAAG,EAAE,CAAC,UAAU,CAAC;CACrF"}