eslint-plugin-tailwind-variants 2.0.3 → 2.1.0

package/src/utils/create-rule-visitors.js

@@ -0,0 +1,28 @@
+/**
+ * Create and return rule visitors that work for both Vue single-file components
+ * and regular script files.
+ * @param {import("eslint").Rule.RuleContext} context
+ * @param {import("eslint").Rule.RuleListener} templateVisitor
+ * @param {import("eslint").Rule.RuleListener} scriptVisitor
+ * @returns {import("eslint").Rule.RuleListener} Appropriate visitor based on the file type.
+ */
+export const createRuleVisitors = (context, templateVisitor, scriptVisitor) => {
+  const fileName = context.filename;
+
+  if (fileName.endsWith(".vue")) {
+    const { sourceCode } = context;
+    const { parserServices } = sourceCode;
+
+    if (
+      typeof parserServices !== "undefined" &&
+      "defineTemplateBodyVisitor" in parserServices
+    ) {
+      return parserServices.defineTemplateBodyVisitor(
+        templateVisitor,
+        scriptVisitor,
+      );
+    }
+  }
+
+  return scriptVisitor;
+};

package/src/utils/get-bind-class-expression.js

@@ -0,0 +1,36 @@
+/**
+ * Return the expression container for a bound class attribute,
+ * or undefined if not applicable.
+ * @param {import("vue-eslint-parser").AST.VDirectiveKey} key
+ * @param {import("vue-eslint-parser").AST.VLiteral | import("vue-eslint-parser").AST.VExpressionContainer | null} value
+ * @returns {import("vue-eslint-parser").AST.VExpressionContainer | undefined} Expression container if valid.
+ */
+export const getBindClassExpression = (key, value) => {
+  if (!isBindClassDirective(key)) {
+    return;
+  }
+
+  if (!value || value.type !== "VExpressionContainer") {
+    return;
+  }
+
+  return value;
+};
+
+/**
+ * Check if node is a valid directive with an expression value.
+ * @param {import("vue-eslint-parser").AST.VAttribute} node
+ * @returns {boolean} `true` if node is a valid directive with an expression value.
+ */
+export const isValidDirective = (node) =>
+  Boolean(node.directive && node.value && "expression" in node.value);
+
+/**
+ * Check if directive is a v-bind:class or :class directive.
+ * @param {import("vue-eslint-parser").AST.VDirectiveKey} key
+ * @returns {boolean} `true` if directive is a v-bind:class or :class directive.
+ */
+const isBindClassDirective = (key) =>
+  key.name.name === "bind" &&
+  key.argument?.type === "VIdentifier" &&
+  key.argument.name === "class";

package/dist/index.d.ts

@@ -1,11 +0,0 @@
-import { ESLint, Linter } from "eslint";
-type PluginConfigs = {
-    recommended: Linter.Config[];
-};
-declare const plugin: ESLint.Plugin;
-export declare const configs: PluginConfigs;
-export { plugin };
-declare const _default: ESLint.Plugin & {
-    configs: PluginConfigs;
-};
-export default _default;

package/dist/index.js

@@ -1,43 +0,0 @@
-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";
-const plugin = {
-    meta: {
-        name: packageName,
-        version: packageVersion,
-    },
-    rules,
-};
-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 };
-export default {
-    ...plugin,
-    configs,
-};

package/dist/rules/index.d.ts

@@ -1,2 +0,0 @@
-import { ESLint } from "eslint";
-export declare const rules: ESLint.Plugin["rules"];

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

@@ -1,23 +0,0 @@
-import { ESLintUtils } from "@typescript-eslint/utils";
-export declare const MESSAGE_IDS: {
-    readonly limitedInlineClasses: "limitedInlineClasses";
-    readonly noCnInClassName: "noCnInClassName";
-};
-export type MessageIds = (typeof MESSAGE_IDS)[keyof typeof MESSAGE_IDS];
-export type Options = [
-    {
-        /**
-         * Directory pattern to match
-         * @default "/components/"
-         */
-        directoryPattern?: string;
-        /**
-         * Maximum number of inline classes allowed
-         * @default 5
-         */
-        maxInlineClasses?: number;
-    }
-];
-export declare const rule: ESLintUtils.RuleModule<MessageIds, Options, unknown, ESLintUtils.RuleListener> & {
-    name: string;
-};

package/dist/rules/limited-inline-classes.js

@@ -1,198 +0,0 @@
-import { AST_NODE_TYPES, ESLintUtils, } from "@typescript-eslint/utils";
-import { createRuleVisitors } from "../utils/create-rule-visitors";
-import { getBindClassExpression } from "../utils/get-bind-class-expression";
-const createRule = ESLintUtils.RuleCreator((name) => name);
-export const MESSAGE_IDS = {
-    limitedInlineClasses: "limitedInlineClasses",
-    noCnInClassName: "noCnInClassName",
-};
-function countClasses(value) {
-    return value.trim().split(/\s+/).filter(Boolean).length;
-}
-/** Recursively validate classes in any expression and detect cn() calls */
-function validateExpression(node, expr, context, maxInlineClasses = 5) {
-    if (!expr)
-        return false;
-    switch (expr.type) {
-        case AST_NODE_TYPES.ArrayExpression:
-            return expr.elements
-                .filter((el) => {
-                return el !== null && el.type !== AST_NODE_TYPES.SpreadElement;
-            })
-                .some((el) => validateExpression(node, el, context, maxInlineClasses));
-        case AST_NODE_TYPES.BinaryExpression:
-            return (validateExpression(node, expr.left, context, maxInlineClasses) ||
-                validateExpression(node, expr.right, context, maxInlineClasses));
-        case AST_NODE_TYPES.CallExpression:
-            if (expr.callee.type === AST_NODE_TYPES.Identifier &&
-                expr.callee.name === "cn") {
-                context.report({
-                    messageId: MESSAGE_IDS.noCnInClassName,
-                    node: node,
-                });
-                return true;
-            }
-            return expr.arguments
-                .filter((arg) => {
-                return arg.type !== AST_NODE_TYPES.SpreadElement;
-            })
-                .some((arg) => validateExpression(node, arg, context, maxInlineClasses));
-        case AST_NODE_TYPES.ConditionalExpression:
-            return (validateExpression(node, expr.consequent, context, maxInlineClasses) ||
-                validateExpression(node, expr.alternate, context, maxInlineClasses));
-        case AST_NODE_TYPES.Identifier:
-            return false;
-        case AST_NODE_TYPES.Literal:
-            if (typeof expr.value === "string") {
-                if (countClasses(expr.value) > maxInlineClasses) {
-                    context.report({
-                        data: { max: maxInlineClasses.toString() },
-                        messageId: MESSAGE_IDS.limitedInlineClasses,
-                        node: node,
-                    });
-                    return true;
-                }
-            }
-            return false;
-        case AST_NODE_TYPES.LogicalExpression:
-            return (validateExpression(node, expr.left, context, maxInlineClasses) ||
-                validateExpression(node, expr.right, context, maxInlineClasses));
-        case AST_NODE_TYPES.ObjectExpression:
-            return expr.properties.some((prop) => {
-                if (prop.type === AST_NODE_TYPES.Property) {
-                    return validateExpression(node, prop.value &&
-                        prop.value.type !== "ObjectPattern" &&
-                        prop.value.type !== "ArrayPattern"
-                        ? prop.value
-                        : null, context, maxInlineClasses);
-                }
-                // Ignore SpreadElement and other non-Property types
-                return false;
-            });
-        case AST_NODE_TYPES.TemplateLiteral:
-            // Static template literal
-            if (expr.expressions.length === 0) {
-                const raw = expr.quasis[0]?.value.cooked ?? "";
-                if (countClasses(raw) > maxInlineClasses) {
-                    context.report({
-                        data: { max: maxInlineClasses.toString() },
-                        messageId: MESSAGE_IDS.limitedInlineClasses,
-                        node: node,
-                    });
-                    return true;
-                }
-            }
-            // Recurse into expressions
-            return expr.expressions.some((el) => validateExpression(node, el, context, maxInlineClasses));
-        case AST_NODE_TYPES.ThisExpression:
-            return false;
-        default:
-            console.log("Unhandled expression type:", expr.type);
-            return false;
-    }
-}
-export const rule = createRule({
-    name: "limited-inline-classes",
-    meta: {
-        docs: {
-            description: `Allow a configurable number of inline class names; require use of tailwind-variants.`,
-        },
-        messages: {
-            limitedInlineClasses: `Inline className may contain at most {{max}} class. Use tailwind-variants instead.`,
-            noCnInClassName: "Using cn() in className is not allowed in component definition. Use tailwind-variants instead.",
-        },
-        schema: [
-            {
-                additionalProperties: false,
-                properties: {
-                    directoryPattern: {
-                        default: "/components/",
-                        description: 'Directory pattern to match, e.g., "/components/".',
-                        type: "string",
-                    },
-                    maxInlineClasses: {
-                        default: 5,
-                        description: "Maximum number of inline classes allowed (default: 5).",
-                        minimum: 1,
-                        type: "number",
-                    },
-                },
-                type: "object",
-            },
-        ],
-        type: "problem",
-    },
-    defaultOptions: [
-        {
-            directoryPattern: "/components/",
-            maxInlineClasses: 5,
-        },
-    ],
-    create: (context) => {
-        const options = context.options[0] || {};
-        const directoryPattern = options.directoryPattern || "/components/";
-        const maxInlineClasses = options.maxInlineClasses ?? 5;
-        const fileName = context.filename;
-        if (!fileName.replace(/\\/g, "/").includes(directoryPattern)) {
-            return {};
-        }
-        // Script visitors (for JSX in Vue <script> or React files)
-        const scriptVisitor = {
-            JSXAttribute(node) {
-                const jsxAttr = node;
-                if (jsxAttr.name.name !== "className")
-                    return;
-                const value = jsxAttr.value;
-                if (!value)
-                    return;
-                // className="..."
-                if (value.type === AST_NODE_TYPES.Literal &&
-                    typeof value.value === "string") {
-                    if (countClasses(value.value) > maxInlineClasses) {
-                        context.report({
-                            data: { max: maxInlineClasses.toString() },
-                            messageId: MESSAGE_IDS.limitedInlineClasses,
-                            node: jsxAttr,
-                        });
-                        return;
-                    }
-                }
-                // className={`...`} / className={"..."}
-                if (value.type === AST_NODE_TYPES.JSXExpressionContainer) {
-                    const expr = value.expression;
-                    if (expr.type !== AST_NODE_TYPES.JSXEmptyExpression) {
-                        validateExpression(jsxAttr, expr, context, maxInlineClasses);
-                    }
-                }
-            },
-        };
-        // Template visitors (for Vue <template>)
-        const templateVisitor = {
-            VAttribute(node) {
-                const vAttr = node;
-                if (!vAttr.value)
-                    return;
-                // class="..."
-                if (!vAttr.directive &&
-                    vAttr.key.type === "VIdentifier" &&
-                    vAttr.key.name === "class") {
-                    if (countClasses(vAttr.value.value) > maxInlineClasses) {
-                        context.report({
-                            data: { max: maxInlineClasses.toString() },
-                            messageId: MESSAGE_IDS.limitedInlineClasses,
-                            node: vAttr,
-                        });
-                    }
-                }
-                const container = getBindClassExpression(vAttr);
-                if (!container)
-                    return;
-                // :class="..." / v-bind:class
-                if (container.expression) {
-                    validateExpression(vAttr, container.expression, context, maxInlineClasses);
-                }
-            },
-        };
-        return createRuleVisitors(context, templateVisitor, scriptVisitor);
-    },
-});

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

@@ -1,17 +0,0 @@
-import { ESLintUtils } from "@typescript-eslint/utils";
-export declare const MESSAGE_IDS: {
-    readonly requireVariantsCallStylesName: "requireVariantsCallStylesName";
-};
-export type MessageIds = (typeof MESSAGE_IDS)[keyof typeof MESSAGE_IDS];
-export type Options = [
-    {
-        /**
-         * Name required for variables assigned from tv()
-         * @default "styles"
-         */
-        name?: string;
-    }
-];
-export declare const rule: ESLintUtils.RuleModule<"requireVariantsCallStylesName", Options, unknown, ESLintUtils.RuleListener> & {
-    name: string;
-};

package/dist/rules/require-variants-call-styles-name.js

@@ -1,75 +0,0 @@
-import { ESLintUtils } from "@typescript-eslint/utils";
-const createRule = ESLintUtils.RuleCreator((name) => name);
-export const MESSAGE_IDS = {
-    requireVariantsCallStylesName: "requireVariantsCallStylesName",
-};
-export const rule = createRule({
-    name: "require-variants-call-styles-name",
-    meta: {
-        docs: {
-            description: "Require variables assigned from calling a function returned by tv() to be named {{name}}.",
-        },
-        fixable: "code",
-        messages: {
-            requireVariantsCallStylesName: "Require variables assigned from calling a function returned by tv() to be named {{name}}.",
-        },
-        schema: [
-            {
-                additionalProperties: false,
-                properties: {
-                    name: {
-                        default: "styles",
-                        description: "Name required for variables assigned from tv().",
-                        type: "string",
-                    },
-                },
-                type: "object",
-            },
-        ],
-        type: "suggestion",
-    },
-    defaultOptions: [
-        {
-            name: "styles",
-        },
-    ],
-    create: (context) => {
-        const options = context.options[0] || {};
-        const requiredName = options.name || "styles";
-        const variantFunctions = new Set();
-        return {
-            VariableDeclarator(node) {
-                const init = node.init;
-                const id = node.id;
-                if (!init)
-                    return;
-                if (init.type !== "CallExpression")
-                    return;
-                if (init.callee.type !== "Identifier")
-                    return;
-                if (id.type !== "Identifier")
-                    return;
-                // Track variant functions created by tv()
-                if (init.callee.name === "tv") {
-                    variantFunctions.add(id.name);
-                    return;
-                }
-                if (variantFunctions.has(init.callee.name)) {
-                    const variableName = id.name;
-                    const functionName = init.callee.name;
-                    if (variableName === requiredName)
-                        return;
-                    context.report({
-                        data: {
-                            functionName,
-                            name: requiredName,
-                        },
-                        fix: (fixer) => fixer.replaceText(id, requiredName),
-                        messageId: MESSAGE_IDS.requireVariantsCallStylesName,
-                        node: id,
-                    });
-                }
-            },
-        };
-    },
-});

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

@@ -1,17 +0,0 @@
-import { ESLintUtils } from "@typescript-eslint/utils";
-export declare const MESSAGE_IDS: {
-    readonly requireVariantsSuffix: "requireVariantsSuffix";
-};
-export type MessageIds = (typeof MESSAGE_IDS)[keyof typeof MESSAGE_IDS];
-export type Options = [
-    {
-        /**
-         * Suffix required for variables assigned from tv()
-         * @default "Variants"
-         */
-        suffix?: string;
-    }
-];
-export declare const rule: ESLintUtils.RuleModule<"requireVariantsSuffix", Options, unknown, ESLintUtils.RuleListener> & {
-    name: string;
-};

package/dist/rules/require-variants-suffix.js

@@ -1,66 +0,0 @@
-import { ESLintUtils } from "@typescript-eslint/utils";
-const createRule = ESLintUtils.RuleCreator((name) => name);
-export const MESSAGE_IDS = {
-    requireVariantsSuffix: "requireVariantsSuffix",
-};
-export const rule = createRule({
-    name: "require-variants-suffix",
-    meta: {
-        docs: {
-            description: "Require variables assigned from tv() to end with {{suffix}}.",
-        },
-        fixable: "code",
-        messages: {
-            requireVariantsSuffix: "Variable assigned from tv() must end with '{{suffix}}'.",
-        },
-        schema: [
-            {
-                additionalProperties: false,
-                properties: {
-                    suffix: {
-                        default: "Variants",
-                        description: "Suffix required for variables assigned from tv().",
-                        type: "string",
-                    },
-                },
-                type: "object",
-            },
-        ],
-        type: "suggestion",
-    },
-    defaultOptions: [
-        {
-            suffix: "Variants",
-        },
-    ],
-    create: (context) => {
-        const options = context.options[0] || {};
-        const suffix = options.suffix || "Variants";
-        return {
-            VariableDeclarator(node) {
-                const init = node.init;
-                if (!init)
-                    return;
-                if (init.type !== "CallExpression")
-                    return;
-                if (init.callee.type !== "Identifier")
-                    return;
-                if (init.callee.name !== "tv")
-                    return;
-                const { id } = node;
-                if (id.type !== "Identifier")
-                    return;
-                if (id.name.endsWith(suffix))
-                    return;
-                context.report({
-                    data: { suffix },
-                    fix: (fixer) => {
-                        return fixer.insertTextAfter(id, suffix);
-                    },
-                    messageId: MESSAGE_IDS.requireVariantsSuffix,
-                    node: id,
-                });
-            },
-        };
-    },
-});

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

@@ -1,37 +0,0 @@
-import { ESLintUtils } from "@typescript-eslint/utils";
-export declare const MESSAGE_IDS: {
-    readonly missingEmptyLineBetweenGroups: "missingEmptyLineBetweenGroups";
-    readonly patternTooLong: "patternTooLong";
-    readonly unsortedCustomProperties: "unsortedCustomProperties";
-};
-export type MessageIds = (typeof MESSAGE_IDS)[keyof typeof MESSAGE_IDS];
-export type Options = [
-    {
-        /**
-         * Add empty line between different prefix groups
-         * @default false
-         */
-        emptyLineBetweenGroups?: boolean;
-        /**
-         * Order of patterns (RegExp strings) for custom properties.
-         * Properties matching the first pattern appear first.
-         * @default [
-         * 	"^--spacing-",
-         * 	"^--size-",
-         * 	"^--font-",
-         * 	"^--weight-",
-         * 	"^--leading-",
-         * 	"^--tracking-",
-         * 	"^--radius-",
-         * 	"^--shadow-",
-         * 	"^--animate-",
-         * 	"^--transition-",
-         * 	"^--color-",
-         * ]
-         */
-        order?: string[];
-    }
-];
-export declare const rule: ESLintUtils.RuleModule<MessageIds, Options, unknown, ESLintUtils.RuleListener> & {
-    name: string;
-};