eslint-plugin-tailwind-variants 2.0.3 → 2.1.0

package/README.md

@@ -16,6 +16,10 @@ ESLint plugin to enforce best practices and consistent naming conventions for ta
 
 Automatically enforces proper variable naming, limits excessive inline classes, and promotes clean tv() usage with auto-fix support. This plugin supports a wide range of projects, including React, Vue, plain JavaScript or TypeScript.
 
+<div align="center">
+  <img alt="eslint-plugin-tailwind-variants demo" width="500px" src="./.github/assets/eslint-plugin-tailwind-variants-demo.png" />
+</div>
+
 ## Installation
 
 ```sh
@@ -42,9 +46,7 @@ npm i -D vue-eslint-parser
 // ...
 import tailwindVariants from "eslint-plugin-tailwind-variants";
 
-export default defineConfig([
-  ...tailwindVariants.configs.recommended,
-]);
+export default defineConfig([...tailwindVariants.configs.recommended]);
 ```
 
 ### Editor setup
@@ -64,4 +66,4 @@ If you are using the ESLint plugin in VS Code add the following to your `setting
 | [require-variants-call-styles-name](docs/rules/require-variants-call-styles-name.md) | enforce that when calling a function returned by tailwind-variants (`tv()`), the result is assigned to a variable named `styles` (or a configurable name) | ✔             | ✔       |
 | [require-variants-suffix](docs/rules/require-variants-suffix.md)                     | require variables assigned from tv() to end with a specific suffix                                                                                        | ✔             | ✔       |
 | [limited-inline-classes](docs/rules/limited-inline-classes.md)                       | enforce limited number of inline class names and prohibit cn() usage                                                                                      | ✔             |         |
-| [sort-custom-properties](docs/rules/sort-custom-properties.md)                       | enforce consistent ordering of CSS custom properties (CSS variables)                                                                                      | ✔             | ✔       |
+| [sort-custom-properties](docs/rules/sort-custom-properties.md)                       | enforce consistent ordering of CSS custom properties (CSS variables)                                                                                      | ✔             | ✔       |

package/dist/src/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @typedef {object} PluginConfigs
+ * @property {import("eslint").Linter.Config[]} recommended Recommended ESLint configurations for this plugin.
+ */
+/** @type {PluginConfigs} */
+export const configs: PluginConfigs;
+declare const _default: {
+    configs: PluginConfigs;
+    meta: ({
+        name?: string | undefined;
+        version?: string | undefined;
+    } & {
+        namespace?: string | undefined;
+    }) | undefined;
+    rules: {
+        "limited-inline-classes": import("eslint").Rule.RuleModule;
+        "require-variants-call-styles-name": import("eslint").Rule.RuleModule;
+        "require-variants-suffix": import("eslint").Rule.RuleModule;
+        "sort-custom-properties": import("eslint").Rule.RuleModule;
+    };
+};
+export default _default;
+export type PluginConfigs = {
+    /**
+     * Recommended ESLint configurations for this plugin.
+     */
+    recommended: import("eslint").Linter.Config[];
+};
+/** @type {import("eslint").ESLint.Plugin} */
+export const plugin: import("eslint").ESLint.Plugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":"AAoBA;;;GAGG;AAEH,4BAA4B;AAC5B,sBADW,aAAa,CA2BtB;;;;;;;;;;;;;;;;;;;;;iBA9BY,OAAO,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE;;AAX9C,6CAA6C;AAC7C,qBADW,OAAO,QAAQ,EAAE,MAAM,CAAC,MAAM,CAOvC"}

package/dist/src/rules/index.d.ts

@@ -0,0 +1,7 @@
+export const rules: {
+    "limited-inline-classes": import("eslint").Rule.RuleModule;
+    "require-variants-call-styles-name": import("eslint").Rule.RuleModule;
+    "require-variants-suffix": import("eslint").Rule.RuleModule;
+    "sort-custom-properties": import("eslint").Rule.RuleModule;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/src/rules/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/rules/index.js"],"names":[],"mappings":"AAKA;;;;;EAKE"}

package/dist/src/rules/limited-inline-classes.d.ts

@@ -0,0 +1,41 @@
+export namespace MESSAGE_IDS {
+    let limitedInlineClasses: string;
+    let noCnInClassName: string;
+}
+/** @typedef {typeof MESSAGE_IDS[keyof typeof MESSAGE_IDS]} MessageIds */
+/**
+ * @typedef {object} RuleOptions
+ * @property {string} [directoryPattern="/components/"] Directory pattern to match for processing files.
+ * @property {number} [maxInlineClasses=5] Maximum number of inline classes allowed.
+ */
+/** @type {import("eslint").Rule.RuleModule} */
+export const rule: import("eslint").Rule.RuleModule;
+export type MessageIds = (typeof MESSAGE_IDS)[keyof typeof MESSAGE_IDS];
+export type RuleOptions = {
+    /**
+     * Directory pattern to match for processing files.
+     */
+    directoryPattern?: string | undefined;
+    /**
+     * Maximum number of inline classes allowed.
+     */
+    maxInlineClasses?: number | undefined;
+};
+/**
+ * Shared validation options for all expression validators.
+ */
+export type ValidationOptions = {
+    /**
+     * Node being validated.
+     */
+    node: import("estree").Node | import("vue-eslint-parser").AST.VAttribute;
+    /**
+     * RuleContext for reporting.
+     */
+    context: import("eslint").Rule.RuleContext;
+    /**
+     * Maximum number of inline classes allowed.
+     */
+    maxInlineClasses: number;
+};
+//# sourceMappingURL=limited-inline-classes.d.ts.map

package/dist/src/rules/limited-inline-classes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"limited-inline-classes.d.ts","sourceRoot":"","sources":["../../../src/rules/limited-inline-classes.js"],"names":[],"mappings":";;;;AAWA,yEAAyE;AAEzE;;;;GAIG;AAEH,+CAA+C;AAC/C,mBADW,OAAO,QAAQ,EAAE,IAAI,CAAC,UAAU,CAuDzC;yBA/DY,CAAA,OAAO,WAAW,EAAC,MAAM,OAAO,WAAW,CAAC;;;;;;;;;;;;;;;;;;UA4E5C,OAAO,QAAQ,EAAE,IAAI,GAClC,OAAU,mBAAmB,EAAE,GAAG,CAAC,UAAU;;;;aAChC,OAAO,QAAQ,EAAE,IAAI,CAAC,WAAW;;;;sBACjC,MAAM"}

package/dist/src/rules/require-variants-call-styles-name.d.ts

@@ -0,0 +1,19 @@
+export namespace MESSAGE_IDS {
+    let renameAllOccurrences: string;
+    let requireVariantsCallStylesName: string;
+}
+/** @typedef {typeof MESSAGE_IDS[keyof typeof MESSAGE_IDS]} MessageIds */
+/**
+ * @typedef {object} RuleOptions
+ * @property {string} [name="styles"] Name required for variables assigned from tv().
+ */
+/** @type {import("eslint").Rule.RuleModule} */
+export const rule: import("eslint").Rule.RuleModule;
+export type MessageIds = (typeof MESSAGE_IDS)[keyof typeof MESSAGE_IDS];
+export type RuleOptions = {
+    /**
+     * Name required for variables assigned from tv().
+     */
+    name?: string | undefined;
+};
+//# sourceMappingURL=require-variants-call-styles-name.d.ts.map

package/dist/src/rules/require-variants-call-styles-name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"require-variants-call-styles-name.d.ts","sourceRoot":"","sources":["../../../src/rules/require-variants-call-styles-name.js"],"names":[],"mappings":";;;;AAKA,yEAAyE;AAEzE;;;GAGG;AAEH,+CAA+C;AAC/C,mBADW,OAAO,QAAQ,EAAE,IAAI,CAAC,UAAU,CAoFzC;yBA3FY,CAAA,OAAO,WAAW,EAAC,MAAM,OAAO,WAAW,CAAC"}

package/dist/src/rules/require-variants-suffix.d.ts

@@ -0,0 +1,19 @@
+export namespace MESSAGE_IDS {
+    let renameAllOccurrences: string;
+    let requireVariantsSuffix: string;
+}
+/** @typedef {typeof MESSAGE_IDS[keyof typeof MESSAGE_IDS]} MessageIds */
+/**
+ * @typedef {object} RuleOptions
+ * @property {string} [suffix="Variants"] Suffix required for variables assigned from tv().
+ */
+/** @type {import("eslint").Rule.RuleModule} */
+export const rule: import("eslint").Rule.RuleModule;
+export type MessageIds = (typeof MESSAGE_IDS)[keyof typeof MESSAGE_IDS];
+export type RuleOptions = {
+    /**
+     * Suffix required for variables assigned from tv().
+     */
+    suffix?: string | undefined;
+};
+//# sourceMappingURL=require-variants-suffix.d.ts.map

package/dist/src/rules/require-variants-suffix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"require-variants-suffix.d.ts","sourceRoot":"","sources":["../../../src/rules/require-variants-suffix.js"],"names":[],"mappings":";;;;AAKA,yEAAyE;AAEzE;;;GAGG;AAEH,+CAA+C;AAC/C,mBADW,OAAO,QAAQ,EAAE,IAAI,CAAC,UAAU,CA2CzC;yBAlDY,CAAA,OAAO,WAAW,EAAC,MAAM,OAAO,WAAW,CAAC"}

package/dist/src/rules/sort-custom-properties.d.ts

@@ -0,0 +1,86 @@
+export namespace MESSAGE_IDS {
+    let invalidPattern: string;
+    let missingEmptyLineBetweenGroups: string;
+    let patternTooLong: string;
+    let unsortedCustomProperties: string;
+}
+/** @typedef {typeof MESSAGE_IDS[keyof typeof MESSAGE_IDS]} MessageIds */
+/**
+ * @typedef {object} RuleOptions
+ * @property {boolean} [emptyLineBetweenGroups=false] Add empty line between different prefix groups.
+ * @property {string[]} [order=DEFAULT_ORDER] Order of patterns (RegExp strings) for custom properties.
+ */
+/** @type {import("eslint").Rule.RuleModule} */
+export const rule: import("eslint").Rule.RuleModule;
+export type CustomProperty = {
+    /**
+     * AST node of the custom property declaration.
+     */
+    node: import("estree").Node;
+    /**
+     * Index of the property based on matching order patterns.
+     */
+    orderIndex: number;
+    /**
+     * Name of the custom property (e.g., '--color-primary').
+     */
+    property: string;
+};
+export type MessageIds = (typeof MESSAGE_IDS)[keyof typeof MESSAGE_IDS];
+export type RuleOptions = {
+    /**
+     * Add empty line between different prefix groups.
+     */
+    emptyLineBetweenGroups?: boolean | undefined;
+    /**
+     * Order of patterns (RegExp strings) for custom properties.
+     */
+    order?: string[] | undefined;
+};
+export type FixerConfig = {
+    /**
+     * Properties in the current block being processed.
+     */
+    currentBlockProperties: CustomProperty[];
+    /**
+     * Properties sorted according to the defined order.
+     */
+    sorted: CustomProperty[];
+    /**
+     * Whether empty lines are required between groups.
+     */
+    emptyLineBetweenGroups: boolean;
+    /**
+     * ESLint SourceCode instance for text extraction.
+     */
+    sourceCode: import("eslint").SourceCode;
+};
+export type BlockHandlerConfig = {
+    /**
+     * Stack of property blocks being processed.
+     */
+    blockStack: CustomProperty[][];
+    /**
+     * Whether empty lines are required between groups.
+     */
+    emptyLineBetweenGroups: boolean;
+    /**
+     * Array of RegEx patterns defining the sort order.
+     */
+    order: string[];
+    /**
+     * ESLint SourceCode instance for text extraction.
+     */
+    sourceCode: import("eslint").SourceCode;
+    /**
+     * ESLint rule context for reporting.
+     */
+    context: import("eslint").Rule.RuleContext;
+};
+/**
+ * Callback to get the order index of a property name based on compiled regex patterns.
+ */
+export type OrderIndexGetter = (propName: string) => number;
+export type FixerFunction = (fixer: import("eslint").Rule.RuleFixer) => import("eslint").Rule.Fix[] | null;
+export type DeclarationCollector = (node: import("estree").Node) => void;
+//# sourceMappingURL=sort-custom-properties.d.ts.map

package/dist/src/rules/sort-custom-properties.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-custom-properties.d.ts","sourceRoot":"","sources":["../../../src/rules/sort-custom-properties.js"],"names":[],"mappings":";;;;;;AAgCA,yEAAyE;AAEzE;;;;GAIG;AAEH,+CAA+C;AAC/C,mBADW,OAAO,QAAQ,EAAE,IAAI,CAAC,UAAU,CA6EzC;;;;;UAnHY,OAAO,QAAQ,EAAE,IAAI;;;;gBACrB,MAAM;;;;cACN,MAAM;;yBA4BN,CAAA,OAAO,WAAW,EAAC,MAAM,OAAO,WAAW,CAAC;;;;;;;;;;;;;;;4BAyF5C,cAAc,EAAE;;;;YAChB,cAAc,EAAE;;;;4BAChB,OAAO;;;;gBACP,OAAO,QAAQ,EAAE,UAAU;;;;;;gBAK3B,cAAc,EAAE,EAAE;;;;4BAClB,OAAO;;;;WACP,MAAM,EAAE;;;;gBACR,OAAO,QAAQ,EAAE,UAAU;;;;aAC3B,OAAO,QAAQ,EAAE,IAAI,CAAC,WAAW;;;;;0CAwEpC,MAAM,KACJ,MAAM;oCAmNR,OAAO,QAAQ,EAAE,IAAI,CAAC,SAAS,KAC7B,OAAO,QAAQ,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI;0CAgJpC,OAAO,QAAQ,EAAE,IAAI,KACnB,IAAI"}

package/dist/src/utils/create-rule-visitors.d.ts

@@ -0,0 +1,2 @@
+export function createRuleVisitors(context: import("eslint").Rule.RuleContext, templateVisitor: import("eslint").Rule.RuleListener, scriptVisitor: import("eslint").Rule.RuleListener): import("eslint").Rule.RuleListener;
+//# sourceMappingURL=create-rule-visitors.d.ts.map

package/dist/src/utils/create-rule-visitors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-rule-visitors.d.ts","sourceRoot":"","sources":["../../../src/utils/create-rule-visitors.js"],"names":[],"mappings":"AAQO,4CALI,OAAO,QAAQ,EAAE,IAAI,CAAC,WAAW,mBACjC,OAAO,QAAQ,EAAE,IAAI,CAAC,YAAY,iBAClC,OAAO,QAAQ,EAAE,IAAI,CAAC,YAAY,GAChC,OAAO,QAAQ,EAAE,IAAI,CAAC,YAAY,CAqB9C"}

package/dist/src/utils/get-bind-class-expression.d.ts

@@ -0,0 +1,3 @@
+export function getBindClassExpression(key: import("vue-eslint-parser").AST.VDirectiveKey, value: import("vue-eslint-parser").AST.VLiteral | import("vue-eslint-parser").AST.VExpressionContainer | null): import("vue-eslint-parser").AST.VExpressionContainer | undefined;
+export function isValidDirective(node: import("vue-eslint-parser").AST.VAttribute): boolean;
+//# sourceMappingURL=get-bind-class-expression.d.ts.map

package/dist/src/utils/get-bind-class-expression.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-bind-class-expression.d.ts","sourceRoot":"","sources":["../../../src/utils/get-bind-class-expression.js"],"names":[],"mappings":"AAOO,4CAJI,OAAO,mBAAmB,EAAE,GAAG,CAAC,aAAa,SAC7C,OAAO,mBAAmB,EAAE,GAAG,CAAC,QAAQ,GAAG,OAAO,mBAAmB,EAAE,GAAG,CAAC,oBAAoB,GAAG,IAAI,GACpG,OAAO,mBAAmB,EAAE,GAAG,CAAC,oBAAoB,GAAG,SAAS,CAY5E;AAOM,uCAHI,OAAO,mBAAmB,EAAE,GAAG,CAAC,UAAU,GACxC,OAAO,CAGiD"}

package/package.json

@@ -1,63 +1,68 @@
 {
   "name": "eslint-plugin-tailwind-variants",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "ESLint plugin for Tailwind Variants",
+  "keywords": [
+    "eslint",
+    "eslint-plugin",
+    "tailwind",
+    "tailwind-variants"
+  ],
+  "license": "MIT",
+  "author": "madebydomdev",
   "repository": {
     "type": "git",
     "url": "https://github.com/domingasp/eslint-plugin-tailwind-variants.git"
   },
-  "main": "dist/index.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "main": "src/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "default": "./src/index.js"
     }
   },
   "scripts": {
-    "lint": "eslint . --ext .ts",
+    "knip": "knip",
+    "lint": "oxlint",
+    "fmt:check": "oxfmt --check",
     "build": "tsc",
     "prepublishOnly": "pnpm run build",
     "test": "vitest",
     "test:debug": "vitest --reporter=verbose",
     "prepare": "husky"
   },
-  "keywords": [
-    "eslint",
-    "eslint-plugin",
-    "tailwind",
-    "tailwind-variants"
-  ],
-  "files": [
-    "dist"
-  ],
-  "author": "madebydomdev",
-  "license": "MIT",
-  "packageManager": "pnpm@10.22.0",
-  "engines": {
-    "node": ">=18"
-  },
-  "peerDependencies": {
-    "eslint": ">9.0.0"
-  },
   "dependencies": {
-    "@eslint/css": "^0.14.1",
-    "@typescript-eslint/utils": "^8.51.0"
+    "@eslint/css": "^0.14.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.3.0",
-    "@commitlint/config-conventional": "^20.3.0",
-    "@eslint/js": "^9.39.2",
-    "@types/node": "^25.0.3",
-    "@typescript-eslint/rule-tester": "^8.51.0",
+    "@commitlint/cli": "^20.4.1",
+    "@commitlint/config-conventional": "^20.4.1",
+    "@types/eslint-scope": "^8.4.0",
+    "@types/estree": "^1.0.8",
+    "@types/estree-jsx": "^1.0.5",
+    "@types/node": "^25.2.3",
+    "@typescript-eslint/utils": "^8.55.0",
     "eslint": "^9.39.2",
-    "eslint-plugin-perfectionist": "^5.2.0",
-    "globals": "^17.0.0",
+    "eslint-plugin-jsdoc": "^62.5.5",
     "husky": "^9.1.7",
-    "jiti": "^2.6.1",
+    "knip": "^5.83.1",
+    "lint-staged": "^16.2.7",
+    "oxfmt": "^0.32.0",
+    "oxlint": "^1.47.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.51.0",
-    "vitest": "^4.0.16",
-    "vue-eslint-parser": "^10.2.0"
-  }
+    "vitest": "^4.0.18",
+    "vue-eslint-parser": "^10.3.0"
+  },
+  "peerDependencies": {
+    "eslint": ">9.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "packageManager": "pnpm@10.29.3"
 }

package/src/index.js

@@ -0,0 +1,62 @@
+import css from "@eslint/css";
+
+import {
+  name as packageName,
+  version as packageVersion,
+} from "../package.json";
+
+import { rules } from "./rules/index.js";
+
+const pluginName = "tailwind-variants";
+
+/** @type {import("eslint").ESLint.Plugin} */
+const plugin = {
+  meta: {
+    name: packageName,
+    version: packageVersion,
+  },
+  rules,
+};
+
+/**
+ * @typedef {object} PluginConfigs
+ * @property {import("eslint").Linter.Config[]} recommended Recommended ESLint configurations for this plugin.
+ */
+
+/** @type {PluginConfigs} */
+export const configs = {
+  recommended: [
+    {
+      plugins: {
+        [pluginName]: plugin,
+      },
+      rules: {
+        [`${pluginName}/limited-inline-classes`]: "error",
+        [`${pluginName}/require-variants-call-styles-name`]: "error",
+        [`${pluginName}/require-variants-suffix`]: "error",
+      },
+    },
+    {
+      files: ["**/*.css"],
+      language: "css/css",
+      plugins: { css },
+      rules: {
+        [`${pluginName}/sort-custom-properties`]: [
+          "error",
+          {
+            emptyLineBetweenGroups: true,
+          },
+        ],
+      },
+    },
+  ],
+};
+
+export { plugin };
+
+/** @type {import("eslint").ESLint.Plugin & { configs: PluginConfigs }} */
+export default {
+  configs,
+  meta: plugin.meta,
+  rules,
+};

package/{dist → src}/rules/index.js

@@ -2,10 +2,10 @@ import { rule as limitedInlineClasses } from "./limited-inline-classes.js";
 import { rule as requireVariantsCallStylesName } from "./require-variants-call-styles-name.js";
 import { rule as requireVariantsSuffix } from "./require-variants-suffix.js";
 import { rule as sortCustomProperties } from "./sort-custom-properties.js";
+
 export const rules = {
-    "limited-inline-classes": limitedInlineClasses,
-    "require-variants-call-styles-name": requireVariantsCallStylesName,
-    "require-variants-suffix": requireVariantsSuffix,
-    "sort-custom-properties": sortCustomProperties,
-    // as unknown due to ESLint and TSESLint types not aligning perfectly
+  "limited-inline-classes": limitedInlineClasses,
+  "require-variants-call-styles-name": requireVariantsCallStylesName,
+  "require-variants-suffix": requireVariantsSuffix,
+  "sort-custom-properties": sortCustomProperties,
 };