tailwind-typescript-plugin 0.0.2-beta.5 → 0.0.2-beta.6

package/README.md

@@ -198,6 +198,19 @@ Most editors that support TypeScript Language Service plugins should work automa
   <p className="p-[20px] text-[14px]">Custom values</p>
 </div>
 
+// ✅ CSS variables (Tailwind v3.1+)
+<div
+  className="
+    [--card-bg:#1e293b]
+    [--card-radius:16px]
+    bg-[var(--card-bg)]
+    rounded-[var(--card-radius)]
+    p-4
+  "
+>
+  CSS custom properties
+</div>
+
 // ✅ Variants (responsive, state, etc.)
 <div className="hover:bg-blue-500 md:flex lg:grid-cols-3 dark:text-white">
   Responsive and state variants
@@ -474,6 +487,10 @@ const invalidVariant = cva(['font-semibold'], {
   Validates parenthesized expressions and type assertions
   Example: `className={(isError ? 'bg-red-500' : 'bg-blue-500')}`, `className={('flex' as string)}`, `className={expr!}`
 
+- [X] **CSS Variables** → [`css-variables.tsx`](./example/src/css-variables.tsx)
+  Validates CSS custom properties (variables) using arbitrary property syntax
+  Example: `className="[--card-bg:#1e293b] bg-[var(--card-bg)]"`
+
 - [ ] **Expression Variable**
   Validates variable references
   Example: `const dynamicClass = isActive ? 'bg-blue-500' : 'bg-gray-500'; <div className={dynamicClass}>Dynamic</div>`

package/lib/infrastructure/TailwindValidator.css-vars.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TailwindValidator.css-vars.spec.d.ts.map

package/lib/infrastructure/TailwindValidator.css-vars.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TailwindValidator.css-vars.spec.d.ts","sourceRoot":"","sources":["../../src/infrastructure/TailwindValidator.css-vars.spec.ts"],"names":[],"mappings":""}

package/lib/infrastructure/TailwindValidator.css-vars.spec.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const os_1 = __importDefault(require("os"));
+const path_1 = __importDefault(require("path"));
+const TailwindValidator_1 = require("./TailwindValidator");
+// Mock logger for testing
+class MockLogger {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    log(_message) {
+        // Silent during tests
+    }
+}
+describe('TailwindValidator - CSS Variables', () => {
+    let validator;
+    let tempCssFile;
+    beforeAll(async () => {
+        // Create a temporary CSS file for testing
+        const tempDir = fs_1.default.mkdtempSync(path_1.default.join(os_1.default.tmpdir(), 'tailwind-test-'));
+        tempCssFile = path_1.default.join(tempDir, 'global.css');
+        fs_1.default.writeFileSync(tempCssFile, '@import "tailwindcss";');
+        validator = new TailwindValidator_1.TailwindValidator(tempCssFile, new MockLogger());
+        await validator.initialize();
+    });
+    describe('CSS variable definitions', () => {
+        it('should validate CSS variable definition with color', () => {
+            expect(validator.isValidClass('[--card-bg:#1e293b]')).toBe(true);
+        });
+        it('should validate CSS variable definition with size', () => {
+            expect(validator.isValidClass('[--card-radius:16px]')).toBe(true);
+        });
+        it('should validate CSS variable definition with arbitrary name', () => {
+            expect(validator.isValidClass('[--my-custom-var:#ff0000]')).toBe(true);
+        });
+        it('should validate multiple CSS variable definitions', () => {
+            expect(validator.isValidClass('[--color-primary:#3b82f6]')).toBe(true);
+            expect(validator.isValidClass('[--color-secondary:#8b5cf6]')).toBe(true);
+            expect(validator.isValidClass('[--spacing:1rem]')).toBe(true);
+        });
+    });
+    describe('CSS variable usage', () => {
+        it('should validate var() in background color', () => {
+            expect(validator.isValidClass('bg-[var(--card-bg)]')).toBe(true);
+        });
+        it('should validate var() in border radius', () => {
+            expect(validator.isValidClass('rounded-[var(--card-radius)]')).toBe(true);
+        });
+        it('should validate var() in text color', () => {
+            expect(validator.isValidClass('text-[var(--my-color)]')).toBe(true);
+        });
+        it('should validate var() in width', () => {
+            expect(validator.isValidClass('w-[var(--my-size)]')).toBe(true);
+        });
+        it('should validate var() in height', () => {
+            expect(validator.isValidClass('h-[var(--my-size)]')).toBe(true);
+        });
+    });
+    describe('combined CSS variables', () => {
+        it('should validate all classes from user example', () => {
+            const classes = [
+                '[--card-bg:#1e293b]',
+                '[--card-radius:16px]',
+                'bg-[var(--card-bg)]',
+                'rounded-[var(--card-radius)]',
+                'p-4'
+            ];
+            classes.forEach(className => {
+                expect(validator.isValidClass(className)).toBe(true);
+            });
+        });
+        it('should have no invalid classes in combined example', () => {
+            const classes = [
+                '[--card-bg:#1e293b]',
+                '[--card-radius:16px]',
+                'bg-[var(--card-bg)]',
+                'rounded-[var(--card-radius)]',
+                'p-4'
+            ];
+            const invalid = validator.getInvalidClasses(classes);
+            expect(invalid).toEqual([]);
+        });
+    });
+});
+//# sourceMappingURL=TailwindValidator.css-vars.spec.js.map

package/lib/infrastructure/TailwindValidator.css-vars.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TailwindValidator.css-vars.spec.js","sourceRoot":"","sources":["../../src/infrastructure/TailwindValidator.css-vars.spec.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-typescript-plugin",
-  "version": "0.0.2-beta.5",
+  "version": "0.0.2-beta.6",
   "description": "TypeScript Language Service plugin that validates Tailwind CSS class names in JSX/TSX files. Catches typos and invalid classes in real-time with support for tailwind-variants and class-variance-authority.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",