eslint-plugin-tailwind-canonical-classes 1.0.7 → 1.0.10

package/README.md

@@ -1,31 +1,110 @@
 # eslint-plugin-tailwind-canonical-classes
 
-ESLint plugin to enforce canonical Tailwind CSS class names using Tailwind CSS v4's canonicalization API.
+[![npm version](https://img.shields.io/npm/v/eslint-plugin-tailwind-canonical-classes.svg)](https://www.npmjs.com/package/eslint-plugin-tailwind-canonical-classes)
+[![npm downloads](https://img.shields.io/npm/dm/eslint-plugin-tailwind-canonical-classes.svg)](https://www.npmjs.com/package/eslint-plugin-tailwind-canonical-classes)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Node.js Version](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen.svg)](https://nodejs.org/)
 
-## Overview
+> ESLint plugin to enforce canonical Tailwind CSS class names using Tailwind CSS v4's canonicalization API.
 
-This plugin helps maintain consistent Tailwind CSS class names across your codebase by automatically detecting and fixing non-canonical class names. It uses Tailwind CSS v4's `canonicalizeCandidates` API to ensure your classes follow the canonical format.
+## 📋 Table of Contents
 
-For example, it can convert:
-- `p-4px` → `p-1` (if 4px equals 1rem at your root font size)
-- `m-2rem` → `m-8` (if 2rem equals 8 at your scale)
+- [Features](#-features)
+- [Installation](#-installation)
+- [Quick Start](#-quick-start)
+- [Configuration](#-configuration)
+- [Options](#-options)
+- [Usage Examples](#-usage-examples)
+- [How It Works](#-how-it-works)
+- [Limitations](#-limitations)
+- [Troubleshooting](#-troubleshooting)
+- [Contributing](#-contributing)
+- [License](#-license)
+- [Related Links](#-related-links)
 
-## Installation
+## ✨ Features
+
+- 🔍 **Automatic Detection**: Automatically detects non-canonical Tailwind CSS class names in your JSX/TSX files
+- 🔧 **Auto-fix Support**: Automatically fixes non-canonical classes using ESLint's auto-fix feature
+- 🎯 **Tailwind CSS v4 Integration**: Uses Tailwind CSS v4's official `canonicalizeCandidates` API
+- 📝 **Multiple Format Support**: Works with string literals, template literals, and JSX expressions
+- ⚡ **Zero Config**: Minimal configuration required to get started
+
+## 📦 Installation
+
+Install the plugin and its peer dependency:
 
 ```bash
 npm install --save-dev eslint-plugin-tailwind-canonical-classes @tailwindcss/node
 ```
 
-## Requirements
+Or with yarn:
 
-- Node.js >= 18.0.0
-- ESLint >= 8.0.0
-- Tailwind CSS v4
-- `@tailwindcss/node` package
+```bash
+yarn add -D eslint-plugin-tailwind-canonical-classes @tailwindcss/node
+```
 
-## Configuration
+Or with pnpm:
 
-Add the plugin to your ESLint configuration file (e.g., `eslint.config.mjs` or `.eslintrc.js`):
+```bash
+pnpm add -D eslint-plugin-tailwind-canonical-classes @tailwindcss/node
+```
+
+### Requirements
+
+- **Node.js** >= 18.0.0
+- **ESLint** >= 8.0.0
+- **Tailwind CSS** v4
+- **@tailwindcss/node** package
+
+## 🚀 Quick Start
+
+1. **Install the plugin** (see [Installation](#-installation))
+
+2. **Add to your ESLint config**:
+
+   **Flat Config (ESLint 9+)** - `eslint.config.mjs`:
+   ```javascript
+   import tailwindCanonicalClasses from 'eslint-plugin-tailwind-canonical-classes';
+
+   export default [
+     {
+       plugins: {
+         'tailwind-canonical-classes': tailwindCanonicalClasses,
+       },
+       rules: {
+         'tailwind-canonical-classes/tailwind-canonical-classes': [
+           'warn',
+           {
+             cssPath: './app/styles/globals.css',
+           },
+         ],
+       },
+     },
+   ];
+   ```
+
+   **Legacy Config** - `.eslintrc.js`:
+   ```javascript
+   module.exports = {
+     plugins: ['tailwind-canonical-classes'],
+     rules: {
+       'tailwind-canonical-classes/tailwind-canonical-classes': [
+         'warn',
+         {
+           cssPath: './app/styles/globals.css',
+         },
+       ],
+     },
+   };
+   ```
+
+3. **Run ESLint**:
+   ```bash
+   npx eslint . --fix
+   ```
+
+## ⚙️ Configuration
 
 ### Flat Config (ESLint 9+)
 
@@ -39,10 +118,10 @@ export default [
     },
     rules: {
       'tailwind-canonical-classes/tailwind-canonical-classes': [
-        'warn',
+        'warn', // or 'error'
         {
-          cssPath: './app/styles/globals.css', // Path to your Tailwind CSS file
-          rootFontSize: 16, // Optional: root font size in pixels (default: 16)
+          cssPath: './app/styles/globals.css', // Required
+          rootFontSize: 16, // Optional, default: 16
         },
       ],
     },
@@ -67,34 +146,38 @@ module.exports = {
 };
 ```
 
-## Options
+## 📖 Options
 
 ### `cssPath` (required)
 
-Type: `string`
-
-Path to your Tailwind CSS file. Can be:
-- **Relative path**: Resolved relative to your project root (where ESLint config is located)
-- **Absolute path**: Full filesystem path to your CSS file
+- **Type**: `string`
+- **Description**: Path to your Tailwind CSS file
+- **Supported formats**:
+  - Relative path: Resolved relative to your project root (where ESLint config is located)
+  - Absolute path: Full filesystem path to your CSS file
 
-Example:
+**Examples**:
 ```javascript
-cssPath: './app/styles/globals.css'  // Relative to project root
-cssPath: '/absolute/path/to/styles.css'  // Absolute path
+cssPath: './app/styles/globals.css'        // Relative to project root
+cssPath: './src/index.css'                // Another relative example
+cssPath: '/absolute/path/to/styles.css'    // Absolute path
 ```
 
 ### `rootFontSize` (optional)
 
-Type: `number`  
-Default: `16`
+- **Type**: `number`
+- **Default**: `16`
+- **Description**: Root font size in pixels for rem calculations. This should match your CSS root font size setting.
 
-Root font size in pixels for rem calculations. This should match your CSS root font size setting.
-
-## Usage
+**Example**:
+```javascript
+rootFontSize: 16  // Default (16px = 1rem)
+rootFontSize: 14  // If your root font size is 14px
+```
 
-Once configured, ESLint will automatically check your JSX `className` attributes and suggest canonical alternatives.
+## 💡 Usage Examples
 
-### Example
+### Basic Example
 
 **Before:**
 ```tsx
@@ -106,35 +189,137 @@ Once configured, ESLint will automatically check your JSX `className` attributes
 <div className="p-1 m-8">Content</div>
 ```
 
-The plugin supports:
-- String literals: `className="p-4"`
-- Template literals (without expressions): `className={`p-4 ${someVar}`}` (only static parts are checked)
-- JSX expression containers with static values
+### Supported Formats
+
+The plugin supports various class name formats:
+
+1. **String literals**:
+   ```tsx
+   <div className="p-4 m-2">Content</div>
+   ```
+
+2. **Template literals** (static parts only):
+   ```tsx
+   <div className={`p-4 ${someVar}`}>Content</div>
+   // Only "p-4" will be checked, dynamic parts are skipped
+   ```
+
+3. **JSX expression containers**:
+   ```tsx
+   <div className={"p-4px"}>Content</div>
+   ```
+
+### Real-world Example
+
+```tsx
+// Before
+function Card({ children }) {
+  return (
+    <div className="p-16px m-2rem rounded-8px shadow-lg">
+      {children}
+    </div>
+  );
+}
+
+// After auto-fix
+function Card({ children }) {
+  return (
+    <div className="p-4 m-8 rounded-2 shadow-lg">
+      {children}
+    </div>
+  );
+}
+```
+
+## 🔧 How It Works
 
-## How It Works
+1. **Load Design System**: The plugin loads your Tailwind CSS file using `@tailwindcss/node`'s `__unstable__loadDesignSystem` API
+2. **Extract Classes**: It extracts class names from JSX `className` attributes in your code
+3. **Canonicalize**: For each class, it uses Tailwind's `canonicalizeCandidates` to find the canonical form
+4. **Report & Fix**: If a non-canonical class is found, it reports an error/warning and can auto-fix it
 
-1. The plugin loads your Tailwind CSS file using `@tailwindcss/node`'s `__unstable__loadDesignSystem` API
-2. It extracts class names from JSX `className` attributes
-3. For each class, it uses Tailwind's `canonicalizeCandidates` to find the canonical form
-4. If a non-canonical class is found, it reports an error/warning and can auto-fix it
+## ⚠️ Limitations
 
-## Limitations
+- **Static classes only**: Only works with static class names (no dynamic expressions)
+- **Tailwind CSS v4 required**: Requires Tailwind CSS v4 (not compatible with v3)
+- **CSS file accessibility**: CSS file must be accessible from the ESLint process
+- **Template literals**: Template literals with expressions are partially supported (only static parts are checked)
 
-- Only works with static class names (no dynamic expressions)
-- Requires Tailwind CSS v4
-- CSS file must be accessible from the ESLint process
-- Template literals with expressions are skipped
+## 🐛 Troubleshooting
 
-## Contributing
+### Plugin not detecting classes
+
+**Problem**: The plugin isn't reporting any issues with non-canonical classes.
+
+**Solutions**:
+1. Verify your `cssPath` is correct and points to a valid Tailwind CSS file
+2. Ensure the CSS file is accessible from where ESLint runs
+3. Check that your Tailwind CSS file contains valid Tailwind directives (`@import "tailwindcss"` or similar)
+4. Verify ESLint is processing your JSX/TSX files (check your ESLint config includes these file types)
+
+### Path resolution issues
+
+**Problem**: ESLint can't find your CSS file.
+
+**Solutions**:
+- Use an absolute path if relative paths aren't working
+- Ensure the path is relative to your ESLint config file location
+- Check file permissions
+
+### Auto-fix not working
+
+**Problem**: ESLint reports issues but doesn't auto-fix them.
+
+**Solutions**:
+- Run ESLint with the `--fix` flag: `npx eslint . --fix`
+- Ensure your editor's ESLint extension has auto-fix enabled
+- Check that the rule severity is set to `'warn'` or `'error'` (not `'off'`)
+
+## 🤝 Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.
 
-## License
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'feat: add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+### Development Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/MaisonnatM/eslint-plugin-tailwind-canonical-classes.git
+cd eslint-plugin-tailwind-canonical-classes
+
+# Install dependencies
+npm install
+
+# Build the project
+npm run build
+
+# Run tests
+npm test
+```
+
+### Release Process
+
+This project uses [semantic-release](https://github.com/semantic-release/semantic-release) for automated version management and npm publishing. Releases are automatically triggered when commits are pushed to the `main` branch.
+
+**Commit Message Format**:
+- `fix:` - Patch release (1.0.8 → 1.0.9)
+- `feat:` - Minor release (1.0.8 → 1.1.0)
+- `feat!:` or `BREAKING CHANGE:` - Major release (1.0.8 → 2.0.0)
+
+## 📄 License
 
-MIT
+MIT © [Maisonnat Maxence](https://github.com/MaisonnatM)
 
-## Related
+## 🔗 Related Links
 
-- [Tailwind CSS v4](https://tailwindcss.com/)
-- [ESLint](https://eslint.org/)
+- [Tailwind CSS v4 Documentation](https://tailwindcss.com/)
+- [ESLint Documentation](https://eslint.org/)
+- [npm Package](https://www.npmjs.com/package/eslint-plugin-tailwind-canonical-classes)
+- [GitHub Repository](https://github.com/MaisonnatM/eslint-plugin-tailwind-canonical-classes)
+- [Report an Issue](https://github.com/MaisonnatM/eslint-plugin-tailwind-canonical-classes/issues)
 

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    rules: {
+        'tailwind-canonical-classes': import("eslint").Rule.RuleModule;
+    };
+};
+export default _default;

package/lib/index.js

@@ -0,0 +1,6 @@
+import tailwindCanonicalClasses from './rules/tailwind-canonical-classes.js';
+export default {
+    rules: {
+        'tailwind-canonical-classes': tailwindCanonicalClasses,
+    },
+};

package/lib/rules/tailwind-canonical-classes.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/lib/rules/tailwind-canonical-classes.js

@@ -0,0 +1,204 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createSyncFn } from 'synckit';
+const workerPath = fileURLToPath(new URL('./tailwind-worker.js', import.meta.url));
+const canonicalizeSync = createSyncFn(workerPath);
+function canonicalizeClasses(cssPath, candidates, rootFontSize = 16) {
+    if (!fs.existsSync(cssPath)) {
+        return null;
+    }
+    const cssContent = fs.readFileSync(cssPath, 'utf-8');
+    const basePath = path.dirname(cssPath);
+    return canonicalizeSync(cssContent, basePath, candidates, { rem: rootFontSize });
+}
+function splitClasses(className) {
+    return className.trim().split(/\s+/).filter(Boolean);
+}
+function joinClasses(classes) {
+    return classes.join(' ');
+}
+function hasTemplateExpressions(node) {
+    if (node.type !== 'TemplateLiteral') {
+        return false;
+    }
+    return node.expressions && node.expressions.length > 0;
+}
+function extractStaticValue(node) {
+    if (node.type === 'Literal' && typeof node.value === 'string') {
+        return node.value;
+    }
+    if (node.type === 'JSXExpressionContainer') {
+        return extractStaticValue(node.expression);
+    }
+    if (node.type === 'TemplateLiteral' && !hasTemplateExpressions(node)) {
+        return node.quasis.map((q) => q.value.cooked).join('');
+    }
+    return null;
+}
+function getQuoteChar(source, start, end) {
+    const quoteChars = ['"', "'", '`'];
+    for (const char of quoteChars) {
+        if (source[start] === char && source[end - 1] === char) {
+            return char;
+        }
+    }
+    return '"';
+}
+const rule = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Enforce canonical Tailwind CSS class names using Tailwind CSS v4 canonicalization API',
+        },
+        fixable: 'code',
+        messages: {
+            nonCanonical: "Class '{{original}}' should be '{{canonical}}'",
+            cssNotFound: 'Could not load Tailwind CSS file: {{path}}',
+        },
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    cssPath: {
+                        type: 'string',
+                    },
+                    rootFontSize: {
+                        type: 'number',
+                    },
+                },
+                required: ['cssPath'],
+                additionalProperties: false,
+            },
+        ],
+    },
+    create(context) {
+        const options = context.options[0];
+        if (!options || !options.cssPath) {
+            context.report({
+                node: context.getSourceCode().ast,
+                messageId: 'cssNotFound',
+                data: {
+                    path: 'not specified',
+                },
+            });
+            return {};
+        }
+        let cssPath;
+        if (path.isAbsolute(options.cssPath)) {
+            cssPath = path.normalize(options.cssPath);
+        }
+        else {
+            cssPath = path.normalize(path.resolve(process.cwd(), options.cssPath));
+        }
+        const rootFontSize = options.rootFontSize ?? 16;
+        if (!fs.existsSync(cssPath)) {
+            context.report({
+                node: context.getSourceCode().ast,
+                messageId: 'cssNotFound',
+                data: {
+                    path: cssPath,
+                },
+            });
+            return {};
+        }
+        return {
+            JSXAttribute(node) {
+                if (node.name.type !== 'JSXIdentifier' ||
+                    node.name.name !== 'className') {
+                    return;
+                }
+                const staticValue = extractStaticValue(node.value);
+                if (staticValue === null) {
+                    return;
+                }
+                const classes = splitClasses(staticValue);
+                if (classes.length === 0) {
+                    return;
+                }
+                const sourceCode = context.getSourceCode();
+                const sourceText = sourceCode.getText();
+                const errors = [];
+                try {
+                    const canonicalized = canonicalizeClasses(cssPath, classes, rootFontSize);
+                    if (canonicalized === null) {
+                        context.report({
+                            node,
+                            messageId: 'cssNotFound',
+                            data: {
+                                path: cssPath,
+                            },
+                        });
+                        return;
+                    }
+                    classes.forEach((className, index) => {
+                        const canonical = canonicalized[index];
+                        if (canonical && canonical !== className) {
+                            errors.push({
+                                node,
+                                original: className,
+                                canonical,
+                                index,
+                            });
+                        }
+                    });
+                }
+                catch (error) {
+                    return;
+                }
+                if (errors.length > 0) {
+                    const valueNode = node.value;
+                    let fullRangeStart;
+                    let fullRangeEnd;
+                    let replacementText;
+                    if (valueNode.type === 'Literal') {
+                        fullRangeStart = valueNode.range[0];
+                        fullRangeEnd = valueNode.range[1];
+                        const quoteChar = getQuoteChar(sourceText, valueNode.range[0], valueNode.range[1]);
+                        const fixedClasses = [...classes];
+                        errors.forEach((error) => {
+                            fixedClasses[error.index] = error.canonical;
+                        });
+                        const fixedValue = joinClasses(fixedClasses);
+                        replacementText = `${quoteChar}${fixedValue}${quoteChar}`;
+                    }
+                    else if (valueNode.type === 'JSXExpressionContainer') {
+                        const expr = valueNode.expression;
+                        if (expr.type === 'TemplateLiteral') {
+                            fullRangeStart = valueNode.range[0];
+                            fullRangeEnd = valueNode.range[1];
+                            const fixedClasses = [...classes];
+                            errors.forEach((error) => {
+                                fixedClasses[error.index] = error.canonical;
+                            });
+                            const fixedValue = joinClasses(fixedClasses);
+                            replacementText = `{\`${fixedValue}\`}`;
+                        }
+                        else {
+                            return;
+                        }
+                    }
+                    else {
+                        return;
+                    }
+                    errors.forEach((error, errorIndex) => {
+                        context.report({
+                            node: error.node,
+                            messageId: 'nonCanonical',
+                            data: {
+                                original: error.original,
+                                canonical: error.canonical,
+                            },
+                            fix: errorIndex === 0
+                                ? (fixer) => {
+                                    return fixer.replaceTextRange([fullRangeStart, fullRangeEnd], replacementText);
+                                }
+                                : undefined,
+                        });
+                    });
+                }
+            },
+        };
+    },
+};
+export default rule;

package/lib/rules/tailwind-worker.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/rules/tailwind-worker.js

@@ -0,0 +1,13 @@
+import { runAsWorker } from 'synckit';
+import { __unstable__loadDesignSystem } from '@tailwindcss/node';
+const designSystemCache = new Map();
+async function canonicalizeInWorker(cssContent, basePath, candidates, options = {}) {
+    const cacheKey = basePath;
+    let designSystem = designSystemCache.get(cacheKey);
+    if (!designSystem) {
+        designSystem = await __unstable__loadDesignSystem(cssContent, { base: basePath });
+        designSystemCache.set(cacheKey, designSystem);
+    }
+    return designSystem.canonicalizeCandidates(candidates, options);
+}
+runAsWorker(canonicalizeInWorker);

package/package.json

@@ -1,23 +1,21 @@
 {
   "name": "eslint-plugin-tailwind-canonical-classes",
-  "version": "1.0.7",
+  "version": "1.0.10",
   "description": "ESLint plugin to enforce canonical Tailwind CSS class names using Tailwind CSS v4's canonicalization API",
   "type": "module",
-  "main": "index.js",
-  "types": "index.d.ts",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "exports": {
     ".": {
-      "types": "./index.d.ts",
-      "default": "./index.js"
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
     },
     "./rule": {
-      "types": "./lib/tailwind-canonical-classes.d.ts",
-      "default": "./lib/tailwind-canonical-classes.js"
+      "types": "./lib/rules/tailwind-canonical-classes.d.ts",
+      "default": "./lib/rules/tailwind-canonical-classes.js"
     }
   },
   "files": [
-    "index.js",
-    "index.d.ts",
     "lib"
   ],
   "keywords": [
@@ -42,13 +40,60 @@
   "engines": {
     "node": ">=18.0.0"
   },
+  "scripts": {
+    "build": "tsc",
+    "build:watch": "tsc --watch",
+    "test": "npm run build && vitest",
+    "test:run": "npm run build && vitest run",
+    "prepublishOnly": "npm run build",
+    "release": "semantic-release"
+  },
   "peerDependencies": {
     "eslint": ">=8.0.0"
   },
   "dependencies": {
-    "@tailwindcss/node": "^4.0.0"
+    "@tailwindcss/node": "^4.0.0",
+    "synckit": "^0.9.3"
   },
   "devDependencies": {
-    "eslint": "^9.0.0"
+    "@babel/eslint-parser": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^9.2.6",
+    "@semantic-release/npm": "^12.0.1",
+    "@types/node": "^20.0.0",
+    "eslint": "^9.0.0",
+    "semantic-release": "^24.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.16"
+  },
+  "release": {
+    "branches": [
+      "main"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      [
+        "@semantic-release/changelog",
+        {
+          "changelogFile": "CHANGELOG.md"
+        }
+      ],
+      "@semantic-release/npm",
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "package.json",
+            "package-lock.json",
+            "CHANGELOG.md"
+          ],
+          "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+        }
+      ],
+      "@semantic-release/github"
+    ]
   }
 }

package/index.d.ts

@@ -1,10 +0,0 @@
-import tailwindCanonicalClasses from './lib/tailwind-canonical-classes.js';
-
-declare const plugin: {
-  rules: {
-    'tailwind-canonical-classes': typeof tailwindCanonicalClasses;
-  };
-};
-
-export default plugin;
-

package/index.js

@@ -1,7 +0,0 @@
-import tailwindCanonicalClasses from './lib/tailwind-canonical-classes.js';
-
-export default {
-  rules: {
-    'tailwind-canonical-classes': tailwindCanonicalClasses,
-  },
-};

package/lib/tailwind-canonical-classes.d.ts

@@ -1,11 +0,0 @@
-import { Rule } from 'eslint';
-
-export interface RuleOptions {
-  cssPath: string;
-  rootFontSize?: number;
-}
-
-declare const rule: Rule.RuleModule;
-
-export default rule;
-

package/lib/tailwind-canonical-classes.js

@@ -1,360 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-import { __unstable__loadDesignSystem } from "@tailwindcss/node";
-
-// Cache the design system to avoid reloading on every file
-let designSystemCache = null;
-let designSystemPromise = null;
-let designSystemError = null;
-let cssPathCache = null;
-
-function resolveCssPath(cssPath, context) {
-  if (!cssPath) {
-    return null;
-  }
-
-  // If absolute path, use as-is
-  if (path.isAbsolute(cssPath)) {
-    return cssPath;
-  }
-
-  // If relative path, resolve relative to the project root (where ESLint config is)
-  // Try to find the project root by looking for common config files
-  const filename = context.getFilename();
-  const fileDir = path.dirname(filename);
-
-  // Try to resolve relative to the current file's directory first
-  const relativeToFile = path.resolve(fileDir, cssPath);
-  if (fs.existsSync(relativeToFile)) {
-    return relativeToFile;
-  }
-
-  // Try to resolve relative to the working directory (project root)
-  const relativeToCwd = path.resolve(process.cwd(), cssPath);
-  if (fs.existsSync(relativeToCwd)) {
-    return relativeToCwd;
-  }
-
-  return relativeToCwd; // Return even if doesn't exist, let error handling catch it
-}
-
-function getDesignSystemSync(cssPath, context) {
-  // Reset cache if CSS path changed
-  if (cssPathCache !== cssPath) {
-    designSystemCache = null;
-    designSystemPromise = null;
-    designSystemError = null;
-    cssPathCache = cssPath;
-  }
-
-  if (designSystemCache) {
-    return designSystemCache;
-  }
-
-  if (designSystemError) {
-    return null;
-  }
-
-  if (designSystemPromise && !designSystemCache) {
-    return null;
-  }
-
-  if (!designSystemPromise) {
-    try {
-      const resolvedPath = resolveCssPath(cssPath, context);
-      if (!resolvedPath || !fs.existsSync(resolvedPath)) {
-        designSystemError = new Error(`CSS file not found: ${cssPath}`);
-        return null;
-      }
-
-      const cssContent = fs.readFileSync(resolvedPath, "utf-8");
-      const basePath = path.dirname(resolvedPath);
-
-      designSystemPromise = __unstable__loadDesignSystem(cssContent, {
-        base: basePath,
-      })
-        .then((ds) => {
-          designSystemCache = ds;
-          return ds;
-        })
-        .catch((error) => {
-          designSystemError = error;
-          return null;
-        });
-    } catch (error) {
-      designSystemError = error;
-      return null;
-    }
-  }
-
-  return null;
-}
-
-async function getDesignSystemAsync(cssPath, context) {
-  // Reset cache if CSS path changed
-  if (cssPathCache !== cssPath) {
-    designSystemCache = null;
-    designSystemPromise = null;
-    designSystemError = null;
-    cssPathCache = cssPath;
-  }
-
-  if (designSystemCache) {
-    return designSystemCache;
-  }
-
-  if (designSystemError) {
-    return null;
-  }
-
-  if (!designSystemPromise) {
-    getDesignSystemSync(cssPath, context);
-  }
-
-  if (designSystemPromise) {
-    try {
-      return await designSystemPromise;
-    } catch (error) {
-      designSystemError = error;
-      return null;
-    }
-  }
-
-  return null;
-}
-
-function extractClassNames(classNameValue, sourceCode) {
-  const classes = [];
-
-  if (!classNameValue) {
-    return classes;
-  }
-
-  if (
-    classNameValue.type === "Literal" &&
-    typeof classNameValue.value === "string"
-  ) {
-    const classString = classNameValue.value;
-    return classString.split(/\s+/).filter((cls) => cls.trim().length > 0);
-  }
-
-  if (classNameValue.type === "TemplateLiteral") {
-    if (classNameValue.expressions && classNameValue.expressions.length > 0) {
-      return [];
-    }
-
-    const parts = [];
-    for (const quasi of classNameValue.quasis) {
-      const cooked = quasi.value?.cooked || "";
-      if (cooked.trim()) {
-        parts.push(cooked.trim());
-      }
-    }
-
-    const combined = parts.join(" ");
-    return combined.split(/\s+/).filter((cls) => cls.trim().length > 0);
-  }
-
-  if (classNameValue.type === "JSXExpressionContainer") {
-    return extractClassNames(classNameValue.expression, sourceCode);
-  }
-
-  return classes;
-}
-
-export default {
-  meta: {
-    type: "suggestion",
-    docs: {
-      description: "Enforce canonical Tailwind CSS class names",
-      category: "Best Practices",
-      recommended: false,
-    },
-    fixable: "code",
-    schema: [
-      {
-        type: "object",
-        properties: {
-          cssPath: {
-            type: "string",
-            description:
-              "Path to your Tailwind CSS file (relative to project root or absolute)",
-          },
-          rootFontSize: {
-            type: "number",
-            default: 16,
-            description: "Root font size in pixels for rem calculations",
-          },
-        },
-        required: ["cssPath"],
-        additionalProperties: false,
-      },
-    ],
-    messages: {
-      nonCanonical:
-        "The class `{{original}}` can be written as `{{canonical}}`",
-      cssNotFound:
-        "CSS file not found: {{path}}. Please check your cssPath configuration.",
-    },
-  },
-
-  create(context) {
-    const options = context.options[0] || {};
-    const cssPath = options.cssPath;
-    const rootFontSize = options.rootFontSize || 16;
-    const sourceCode = context.sourceCode;
-
-    if (!cssPath) {
-      context.report({
-        loc: { line: 1, column: 0 },
-        messageId: "cssNotFound",
-        data: { path: "not specified" },
-      });
-      return {};
-    }
-
-    return {
-      async JSXAttribute(node) {
-        if (node.name.name !== "className") {
-          return;
-        }
-
-        const value = node.value;
-        if (!value) {
-          return;
-        }
-
-        let classNameValue = value;
-        if (value.type === "JSXExpressionContainer") {
-          classNameValue = value.expression;
-        }
-
-        if (
-          classNameValue.type !== "Literal" &&
-          classNameValue.type !== "TemplateLiteral" &&
-          classNameValue.type !== "JSXExpressionContainer"
-        ) {
-          return;
-        }
-
-        const classNames = extractClassNames(classNameValue, sourceCode);
-        if (classNames.length === 0) {
-          return;
-        }
-
-        // Try synchronous first
-        let designSystem = getDesignSystemSync(cssPath, context);
-
-        // If not loaded yet, wait for async load
-        if (!designSystem) {
-          designSystem = await getDesignSystemAsync(cssPath, context);
-        }
-
-        if (designSystem && designSystem.canonicalizeCandidates) {
-          processClasses(
-            designSystem,
-            classNames,
-            classNameValue,
-            sourceCode,
-            rootFontSize,
-            context
-          );
-        }
-      },
-    };
-  },
-};
-
-function processClasses(
-  designSystem,
-  classNames,
-  classNameValue,
-  sourceCode,
-  rootFontSize,
-  context
-) {
-  const issues = [];
-
-  for (let i = 0; i < classNames.length; i++) {
-    const className = classNames[i];
-
-    try {
-      const canonicalized = designSystem.canonicalizeCandidates([className], {
-        rem: rootFontSize,
-      })[0];
-
-      if (canonicalized !== className) {
-        issues.push({
-          original: className,
-          canonical: canonicalized,
-          index: i,
-        });
-      }
-    } catch {
-      continue;
-    }
-  }
-
-  if (issues.length > 0) {
-    const originalText = sourceCode.getText(classNameValue);
-
-    const canonicalMap = new Map();
-    issues.forEach((issue) => {
-      canonicalMap.set(issue.original, issue.canonical);
-    });
-
-    const fixedClassNames = classNames.map((className) => {
-      return canonicalMap.get(className) || className;
-    });
-    const fixedClassString = fixedClassNames.join(" ");
-
-    let fixedText;
-
-    const quoteMatch = originalText.match(/^(["'`])(.*)\1$/);
-
-    if (quoteMatch) {
-      fixedText = `${quoteMatch[1]}${fixedClassString}${quoteMatch[1]}`;
-    } else if (classNameValue.type === "TemplateLiteral") {
-      fixedText = `\`${fixedClassString}\``;
-    } else {
-      const startQuoteMatch = originalText.match(/^(["'`])/);
-      if (startQuoteMatch) {
-        const quote = startQuoteMatch[1];
-        const endQuoteIndex = originalText.lastIndexOf(quote);
-        if (endQuoteIndex > 0) {
-          fixedText = `${quote}${fixedClassString}${quote}`;
-        } else {
-          fixedText = fixedClassString;
-        }
-      } else {
-        fixedText = fixedClassString;
-      }
-    }
-
-    context.report({
-      node: classNameValue,
-      messageId: "nonCanonical",
-      data: {
-        original: issues[0].original,
-        canonical: issues[0].canonical,
-      },
-      fix(fixer) {
-        if (fixedText !== originalText) {
-          return fixer.replaceText(classNameValue, fixedText);
-        }
-        return null;
-      },
-    });
-
-    for (let i = 1; i < issues.length; i++) {
-      context.report({
-        node: classNameValue,
-        messageId: "nonCanonical",
-        data: {
-          original: issues[i].original,
-          canonical: issues[i].canonical,
-        },
-      });
-    }
-  }
-}