tailwind-typescript-plugin 1.4.0-beta.13 → 1.4.0-beta.16

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [1.4.0-beta.16](https://github.com/IvanRodriCalleja/tailwind-typescript-plugin/compare/v1.4.0-beta.15...v1.4.0-beta.16) (2025-12-03)
+
+### ✨ Features
+
+* add support for 'class' attribute in JSX elements ([258fe3e](https://github.com/IvanRodriCalleja/tailwind-typescript-plugin/commit/258fe3e0006ebf8a9a5cdbdfe8c09ef39a2d9d4d))
+
+## [1.4.0-beta.15](https://github.com/IvanRodriCalleja/tailwind-typescript-plugin/compare/v1.4.0-beta.14...v1.4.0-beta.15) (2025-12-02)
+
+### ♻️ Code Refactoring
+
+* add multi-framework architecture with lazy initialization ([a403e18](https://github.com/IvanRodriCalleja/tailwind-typescript-plugin/commit/a403e1869d92f8b926dc40a9e6eedc0bec55e06c))
+
+## [1.4.0-beta.14](https://github.com/IvanRodriCalleja/tailwind-typescript-plugin/compare/v1.4.0-beta.13...v1.4.0-beta.14) (2025-12-02)
+
+### ⚠ BREAKING CHANGES
+
+* Old config format no longer supported
+
+### ♻️ Code Refactoring
+
+* restructure plugin configuration ([00c8816](https://github.com/IvanRodriCalleja/tailwind-typescript-plugin/commit/00c881612449e4c424c129f4994c57117d94d3c4))
+
 ## [1.4.0-beta.13](https://github.com/IvanRodriCalleja/tailwind-typescript-plugin/compare/v1.4.0-beta.12...v1.4.0-beta.13) (2025-11-30)
 
 ### ✨ Features

package/README.md

@@ -59,6 +59,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 +81,41 @@ 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
+          }
         }
       }
     ]
@@ -80,159 +125,183 @@ 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.
-
-- `allowedClasses` (optional): Array of custom class names or wildcard patterns 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)
-  - **Supports wildcard patterns**:
-    | 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
-    {
-      "allowedClasses": [
-        "custom-*",
-        "*-icon",
-        "*-component-*",
-        "exact-class"
-      ]
-    }
-    ```
-  - Classes matching any pattern 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
-      }
-    }
+#### `globalCss` (required)
+Path to your global CSS file that imports Tailwind CSS. This can be relative to your project root.
 
-    // Enable only class-variance-authority
-    {
-      "variants": {
-        "classVarianceAuthority": true
-      }
-    }
+---
 
-    // Enable both explicitly
-    {
-      "variants": {
-        "tailwindVariants": true,
-        "classVarianceAuthority": true
-      }
-    }
+#### `libraries` (optional)
+Configure utility functions and variant libraries.
 
-    // No config = both enabled by default
-    {
-      // variants not specified - both libraries validated
-    }
-    ```
-  - **Performance impact**: Disabling unused extractors skips TypeChecker operations and symbol resolution for that library, providing faster validation
+##### `libraries.utilities`
+Configure which utility functions to scan for class names. Keys are function names, values control import matching:
 
-- `utilityFunctions` (optional): Array of utility functions to validate. These will be **merged with the defaults**, so you don't lose the common ones. Supports two formats:
+| Value | Description |
+|-------|-------------|
+| `"*"` | Match any import source |
+| `"off"` | Disable this utility function |
+| `"package-name"` | Only match if imported from this package |
 
-  **Simple string format** (matches by function name only):
-  ```json
-  {
-    "utilityFunctions": ["myCustomFn", "buildClasses"]
+**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"
+    }
   }
-  ```
-
-  **Object format with import verification** (matches by name AND verifies import source):
-  ```json
-  {
-    "utilityFunctions": [
-      { "name": "merge", "from": "@/lib/utils" },
-      { "name": "cx", "from": "my-styling-package" }
-    ]
+}
+```
+
+**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
+    }
   }
-  ```
-
-  **Mixed format** (combine both):
-  ```json
-  {
-    "utilityFunctions": [
-      "anyFunctionNamedThis",
-      { "name": "merge", "from": "@/lib/utils" }
-    ]
+}
+```
+
+---
+
+#### `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"]
   }
-  ```
+}
+```
+
+---
 
-  - **Defaults (always included)**: `clsx` (from 'clsx'), `cn` (name-only), `classnames`/`classNames`/`cx` (from 'classnames'), `twMerge` (from 'tailwind-merge'). Note: `cva` and `tv` are variant functions handled by dedicated extractors.
-  - **Import verification**: When using the object format with `from`, the plugin verifies the function is actually imported from that package before validating. This prevents false positives when a function with the same name exists but isn't a className utility.
-  - **Subpath matching**: `{ "name": "fn", "from": "my-pkg" }` also matches `import { fn } from 'my-pkg/utils'`
+#### `lint` (optional)
+Configure lint rules for code quality issues.
 
-  **Example configurations**:
-  ```json
-  // Simple: just add function names
-  {
-    "utilityFunctions": ["myCustomFn", "buildClasses"]
+| 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
+    }
   }
+}
+```
 
-  // Precise: verify import sources
-  {
-    "utilityFunctions": [
-      { "name": "cn", "from": "@/lib/utils" },
-      { "name": "merge", "from": "tailwind-merge" }
-    ]
+**Example - Make duplicate classes an error**:
+```json
+{
+  "lint": {
+    "repeatedClasses": {
+      "severity": "error"
+    }
   }
+}
+```
 
-  // Mixed: some with import verification, some without
-  {
-    "utilityFunctions": [
-      "anyFn",
-      { "name": "preciseFn", "from": "@/utils" }
-    ]
+---
+
+#### `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
+    }
   }
-  ```
-
-  **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
-
-  // Aliased import
-  import { something as merge } from '@/lib/utils';
-  className={merge('flex', 'items-center')} // ✅ Validated
-
-  // Wrong import source (not validated when using object format)
-  import { merge } from 'different-package';
-  className={merge('flex', 'invalid-class')} // ⏭️ Skipped (wrong import)
-  ```
-
-  **Supported call 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')}
-
-  // Custom functions (add via config):
-  className={myCustomFn('flex', 'items-center')}
-  className={buildClasses('flex', 'items-center')}
-
-  // Dynamic calls (ignored, won't throw errors):
-  className={functions['cn']('flex', 'items-center')}
-  ```
+}
+```
+
+---
+
+### Backwards Compatibility
+
+The following deprecated options are still supported but will be removed in a future version:
+
+| Deprecated | New Location |
+|------------|--------------|
+| `utilityFunctions` | `libraries.utilities` |
+| `variants` | `libraries.variants` |
+| `allowedClasses` | `validation.allowedClasses` |
+| `enableLogging` | Removed (no replacement) |
 
 ### 2. Ensure your CSS file imports Tailwind
 

package/lib/core/interfaces.d.ts

@@ -1,5 +1,5 @@
 import * as ts from 'typescript/lib/tsserverlibrary';
-import { ClassNameInfo, ExtractionContext, UtilityFunction } from './types';
+import { ClassNameInfo, EditorConfig, ExtractionContext, LibrariesConfig, LintConfig, ValidationConfig } from './types';
 /**
  * Base interface for class name extractors
  * Follows the Strategy pattern for extensibility
@@ -22,22 +22,27 @@ 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?: UtilityFunction[];
-    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;
 }
 /**
  * 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,eAAe,EAAE,MAAM,SAAS,CAAC;AAE5E;;;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,eAAe,EAAE,CAAC;IACrC,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,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;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAClC,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,EAAE,CAAC,UAAU,GAAG,EAAE,CAAC,UAAU,CAAC;CACrF"}

package/lib/core/types.d.ts

@@ -1,4 +1,5 @@
 import * as ts from 'typescript/lib/tsserverlibrary';
+import { Framework } from '../utils/FrameworkDetector';
 /**
  * Represents a utility function configuration with optional import source
  * When 'from' is specified, the import will be verified before matching
@@ -6,6 +7,8 @@ import * as ts from 'typescript/lib/tsserverlibrary';
  * Examples:
  * - { name: 'clsx', from: 'clsx' } - matches `import { clsx } from 'clsx'` or `import clsx from 'clsx'`
  * - { name: 'cn', from: '@/lib/utils' } - matches `import { cn } from '@/lib/utils'`
+ *
+ * @deprecated Use the new libraries.utilities config format instead
  */
 export interface UtilityFunctionConfig {
     name: string;
@@ -15,8 +18,81 @@ export interface UtilityFunctionConfig {
  * A utility function can be either:
  * - A simple string (matches by function name only, backwards compatible)
  * - A UtilityFunctionConfig object (matches by name AND verifies import source)
+ *
+ * @deprecated Use the new libraries.utilities config format instead
  */
 export type UtilityFunction = string | UtilityFunctionConfig;
+/**
+ * Severity level for diagnostics
+ */
+export type DiagnosticSeverity = 'error' | 'warning' | 'suggestion' | 'off';
+/**
+ * Configuration for utilities (utility functions like cn, clsx, etc.)
+ * Key is the function name, value is:
+ * - string: import path (e.g., "clsx", "@/lib/utils")
+ * - "*": match any import source
+ * - "off": disable this utility function
+ */
+export type UtilitiesConfig = {
+    [functionName: string]: string;
+};
+/**
+ * Configuration for variant libraries
+ */
+export interface VariantsConfig {
+    tailwindVariants?: boolean;
+    classVarianceAuthority?: boolean;
+}
+/**
+ * Configuration for libraries (utilities and variants)
+ */
+export interface LibrariesConfig {
+    utilities?: UtilitiesConfig;
+    variants?: VariantsConfig;
+}
+/**
+ * Configuration for validation (invalid class detection)
+ */
+export interface ValidationConfig {
+    enabled?: boolean;
+    severity?: DiagnosticSeverity;
+    allowedClasses?: string[];
+}
+/**
+ * Configuration for a single lint rule
+ */
+export interface LintRuleConfig {
+    enabled?: boolean;
+    severity?: DiagnosticSeverity;
+}
+/**
+ * Configuration for lint rules
+ */
+export interface LintConfig {
+    enabled?: boolean;
+    conflictingClasses?: LintRuleConfig;
+    repeatedClasses?: LintRuleConfig;
+}
+/**
+ * Configuration for autocomplete
+ */
+export interface AutocompleteConfig {
+    enabled?: boolean;
+}
+/**
+ * Configuration for hover information
+ */
+export interface HoverConfig {
+    enabled?: boolean;
+}
+/**
+ * Configuration for editor features
+ */
+export interface EditorConfig {
+    enabled?: boolean;
+    autocomplete?: AutocompleteConfig;
+    hover?: HoverConfig;
+}
 /**
  * Represents information about a class name found in source code
  */
@@ -65,6 +141,11 @@ export interface ExtractionContext {
     readonly sourceFile: ts.SourceFile;
     readonly utilityFunctions: UtilityFunction[];
     readonly typeChecker?: ts.TypeChecker;
+    /**
+     * The detected framework for the current file
+     * Used to determine which extractor to use
+     */
+    readonly framework?: Framework;
 }
 /**
  * Result of extraction operation

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAErD;;;;;;;GAOG;AACH,MAAM,WAAW,qBAAqB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACb;AAED;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,qBAAqB,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,aAAa;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,aAAa,CAAC,EAAE;QACf,YAAY,EAAE,MAAM,CAAC;QACrB,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC;IACF;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IACjC,QAAQ,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;IAC/B,QAAQ,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC;IACnC,QAAQ,CAAC,gBAAgB,EAAE,eAAe,EAAE,CAAC;IAC7C,QAAQ,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC;CACtC;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAChC,UAAU,EAAE,aAAa,EAAE,CAAC;CAC5B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD;;;;;;;;;GASG;AACH,MAAM,WAAW,qBAAqB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACb;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,qBAAqB,CAAC;AAE7D;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,KAAK,CAAC;AAE5E;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG;IAC7B,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;CAC/B,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,cAAc;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC/B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,eAAe,CAAC,EAAE,cAAc,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,KAAK,CAAC,EAAE,WAAW,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,aAAa,CAAC,EAAE;QACf,YAAY,EAAE,MAAM,CAAC;QACrB,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC;IACF;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IACjC,QAAQ,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;IAC/B,QAAQ,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC;IACnC,QAAQ,CAAC,gBAAgB,EAAE,eAAe,EAAE,CAAC;IAC7C,QAAQ,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAChC,UAAU,EAAE,aAAa,EAAE,CAAC;CAC5B"}

package/lib/extractors/JsxAttributeExtractor.d.ts

@@ -2,7 +2,8 @@ import * as ts from 'typescript/lib/tsserverlibrary';
 import { ClassNameInfo, ExtractionContext } from '../core/types';
 import { BaseExtractor } from './BaseExtractor';
 /**
- * OPTIMIZED: Extracts class names from JSX className attributes
+ * OPTIMIZED: Extracts class names from JSX className and class attributes
+ * Supports both React (className) and Solid (class) syntaxes
  *
  * Performance improvements:
  * 1. Fast path for string literals (most common, ~70% of cases)

package/lib/extractors/JsxAttributeExtractor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JsxAttributeExtractor.d.ts","sourceRoot":"","sources":["../../src/extractors/JsxAttributeExtractor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhD;;;;;;;;GAQG;AACH,qBAAa,qBAAsB,SAAQ,aAAa;IACvD,OAAO,CAAC,mBAAmB,CAAsB;IACjD,OAAO,CAAC,iBAAiB,CAA8B;;IASvD,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,iBAAiB,GAAG,OAAO;IAO7D,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,iBAAiB,GAAG,aAAa,EAAE;CA2HnE"}
+{"version":3,"file":"JsxAttributeExtractor.d.ts","sourceRoot":"","sources":["../../src/extractors/JsxAttributeExtractor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhD;;;;;;;;;GASG;AACH,qBAAa,qBAAsB,SAAQ,aAAa;IACvD,OAAO,CAAC,mBAAmB,CAAsB;IACjD,OAAO,CAAC,iBAAiB,CAA8B;;IASvD,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,iBAAiB,GAAG,OAAO;IAO7D,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,iBAAiB,GAAG,aAAa,EAAE;CAiInE"}

package/lib/extractors/JsxAttributeExtractor.js

@@ -5,7 +5,8 @@ const BaseExtractor_1 = require("./BaseExtractor");
 const ExpressionExtractor_1 = require("./ExpressionExtractor");
 const TemplateExpressionExtractor_1 = require("./TemplateExpressionExtractor");
 /**
- * OPTIMIZED: Extracts class names from JSX className attributes
+ * OPTIMIZED: Extracts class names from JSX className and class attributes
+ * Supports both React (className) and Solid (class) syntaxes
  *
  * Performance improvements:
  * 1. Fast path for string literals (most common, ~70% of cases)
@@ -38,8 +39,13 @@ class JsxAttributeExtractor extends BaseExtractor_1.BaseExtractor {
         }
         // Process attributes
         for (const attr of attributes) {
-            // OPTIMIZATION: Check both conditions at once
-            if (!context.typescript.isJsxAttribute(attr) || attr.name.getText() !== 'className') {
+            // OPTIMIZATION: Check type first
+            if (!context.typescript.isJsxAttribute(attr)) {
+                continue;
+            }
+            // Support both className (React) and class (Solid, standard JSX)
+            const attrName = attr.name.getText();
+            if (attrName !== 'className' && attrName !== 'class') {
                 continue;
             }
             const initializer = attr.initializer;
@@ -77,7 +83,7 @@ class JsxAttributeExtractor extends BaseExtractor_1.BaseExtractor {
                 }
                 continue; // Skip to next attribute
             }
-            // JSX expression: className={'foo bar'} or className={clsx(...)}
+            // JSX expression: className={'foo bar'} or class={clsx(...)}
             if (context.typescript.isJsxExpression(initializer)) {
                 const expression = initializer.expression;
                 if (!expression) {
@@ -106,16 +112,16 @@ class JsxAttributeExtractor extends BaseExtractor_1.BaseExtractor {
                     context.typescript.isTypeAssertionExpression(expression)) {
                     classNames.push(...addAttributeId(this.expressionExtractor.extract(expression, context)));
                 }
-                // Handle identifier references: className={dynamicClass}
+                // Handle identifier references: className={dynamicClass} or class={dynamicClass}
                 // This resolves the variable to its declared value for validation
                 else if (context.typescript.isIdentifier(expression)) {
                     classNames.push(...addAttributeId(this.expressionExtractor.extractFromIdentifier(expression, context)));
                 }
-                // Handle array literal expressions: className={['flex', 'items-center']}
+                // Handle array literal expressions: className={['flex', 'items-center']} or class={['flex', 'items-center']}
                 else if (context.typescript.isArrayLiteralExpression(expression)) {
                     classNames.push(...addAttributeId(this.expressionExtractor.extract(expression, context)));
                 }
-                // Handle object literal expressions: className={{ flex: true }}
+                // Handle object literal expressions: className={{ flex: true }} or class={{ flex: true }}
                 else if (context.typescript.isObjectLiteralExpression(expression)) {
                     classNames.push(...addAttributeId(this.expressionExtractor.extract(expression, context)));
                 }