pasika 0.3.1 → 0.3.3

package/dist/eslint/pasika/rules/css/theme-reset.js

@@ -0,0 +1,36 @@
+/**
+ * ESLint rule: pasika/theme-reset
+ *
+ * The global stylesheet MUST reset Tailwind's default theme with `--*: initial`.
+ *
+ * @see docs/styling-guide/rules/global-stylesheet-rule.md
+ */
+import { atrulesNamed, blockChildren } from "./helpers.js";
+export const themeResetRule = {
+    meta: {
+        schema: [],
+        type: "problem",
+        docs: {
+            description: "Require Tailwind's default theme reset --*: initial.",
+        },
+    },
+    create(context) {
+        return {
+            "StyleSheet:exit"(node) {
+                const resetFound = atrulesNamed(node, "theme").some((theme) => blockChildren(theme).some((child) => {
+                    if (child.type === "Declaration")
+                        return child.property.startsWith("--*");
+                    if (child.type === "Raw")
+                        return child.value.includes("--*: initial");
+                    return false;
+                }));
+                if (!resetFound) {
+                    context.report({
+                        node,
+                        message: "The global stylesheet must reset Tailwind's default theme with --*: initial inside an @theme block.",
+                    });
+                }
+            },
+        };
+    },
+};

package/dist/eslint/pasika/rules/css/theme-variable-namespace.d.ts

@@ -0,0 +1,11 @@
+/**
+ * ESLint rule: pasika/theme-variable-namespace
+ *
+ * A value that needs at least two utility classes from the same Tailwind
+ * theme-variable namespace MUST use that namespace and have the same name in
+ * :root.
+ *
+ * @see docs/styling-guide/rules/theme-and-utility-definition-rule.md
+ */
+import type { CSSRuleDefinition } from "@eslint/css";
+export declare const themeVariableNamespaceRule: CSSRuleDefinition;

package/dist/eslint/pasika/rules/css/theme-variable-namespace.js

@@ -0,0 +1,53 @@
+/**
+ * ESLint rule: pasika/theme-variable-namespace
+ *
+ * A value that needs at least two utility classes from the same Tailwind
+ * theme-variable namespace MUST use that namespace and have the same name in
+ * :root.
+ *
+ * @see docs/styling-guide/rules/theme-and-utility-definition-rule.md
+ */
+import { atrulesNamed, blockChildren, preludeIdentifiers } from "./helpers.js";
+export const themeVariableNamespaceRule = {
+    meta: {
+        schema: [],
+        type: "problem",
+        docs: {
+            description: "Require utility classes from the same theme namespace to share a prefix.",
+        },
+    },
+    create(context) {
+        return {
+            "StyleSheet:exit"(node) {
+                // Namespaces are the first segment of each theme variable name, e.g.
+                // --color-* defines the `color` namespace.
+                const namespaces = new Set();
+                for (const theme of atrulesNamed(node, "theme")) {
+                    for (const child of blockChildren(theme)) {
+                        if (child.type !== "Declaration")
+                            continue;
+                        const segments = child.property.replace(/^--/, "").split("-");
+                        if (segments[0])
+                            namespaces.add(segments[0]);
+                    }
+                }
+                for (const apply of atrulesNamed(node, "apply")) {
+                    const classes = preludeIdentifiers(apply);
+                    for (const ns of namespaces) {
+                        const matching = classes.filter((name) => name.startsWith(`${ns}-`) || name === ns);
+                        if (matching.length < 2)
+                            continue;
+                        // All classes from one namespace must share a deeper prefix.
+                        const prefixes = matching.map((name) => name.split("-").slice(0, 2).join("-"));
+                        if (new Set(prefixes).size > 1) {
+                            context.report({
+                                node: apply,
+                                message: `Utility classes ${matching.join(", ")} use namespace "${ns}" but lack a shared prefix; use the theme-variable namespace prefix.`,
+                            });
+                        }
+                    }
+                }
+            },
+        };
+    },
+};

package/dist/eslint/pasika/rules/cva-appearance-props.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ESLint rule: pasika/cva-appearance-props
+ *
+ * Enforces that components exposing visual option props (size, variant, etc.)
+ * define them via a cva() call rather than raw union types.
+ *
+ * @see docs/styling-guide/rules/component-variant-rule.md
+ */
+import type { Rule } from "eslint";
+export declare const cvaAppearancePropsRule: Rule.RuleModule;

package/dist/eslint/pasika/rules/cva-appearance-props.js

@@ -0,0 +1,77 @@
+/**
+ * ESLint rule: pasika/cva-appearance-props
+ *
+ * Enforces that components exposing visual option props (size, variant, etc.)
+ * define them via a cva() call rather than raw union types.
+ *
+ * @see docs/styling-guide/rules/component-variant-rule.md
+ */
+const VISUAL_OPTION_NAMES = new Set([
+    "size",
+    "variant",
+    "tone",
+    "color",
+    "appearance",
+    "intent",
+    "style",
+    "scheme",
+    "theme",
+]);
+function hasCvaCall(body) {
+    for (const stmt of body) {
+        if (stmt.type !== "VariableDeclaration")
+            continue;
+        for (const decl of stmt.declarations) {
+            const init = decl.init;
+            if (init?.type === "CallExpression" && init.callee.type === "Identifier" && init.callee.name === "cva") {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+export const cvaAppearancePropsRule = {
+    meta: {
+        schema: [],
+        type: "problem",
+        docs: {
+            description: "Components with visual option props must define them using cva.",
+        },
+    },
+    create(context) {
+        const program = context.sourceCode.ast;
+        const hasCva = hasCvaCall(program.body);
+        // If cva is used anywhere in the file, all visual option props are assumed
+        // to be handled by that definition. This avoids false positives when the
+        // cva call and the component are in different scopes.
+        if (hasCva)
+            return {};
+        return {
+            TSTypeAliasDeclaration(node) {
+                if (node.id?.type !== "Identifier" || !node.id.name?.endsWith("Props"))
+                    return;
+                if (node.typeAnnotation?.type !== "TSTypeLiteral")
+                    return;
+                for (const member of node.typeAnnotation.members ?? []) {
+                    if (member.type !== "TSPropertySignature")
+                        continue;
+                    const keyName = member.key?.type === "Identifier" ? member.key.name : undefined;
+                    if (!keyName || !VISUAL_OPTION_NAMES.has(keyName))
+                        continue;
+                    // Only flag union types (string literal unions like "sm" | "lg")
+                    const typeAnnotation = member.typeAnnotation?.typeAnnotation ?? member.typeAnnotation;
+                    if (!typeAnnotation)
+                        continue;
+                    // Accept both TSUnionType and TSTypeLiteral
+                    if (typeAnnotation.type === "TSUnionType" || typeAnnotation.type === "TSTypeLiteral") {
+                        context.report({
+                            node,
+                            message: `Visual option prop "${keyName}" must be defined through a cva() call ` +
+                                "rather than a manual union type. See docs/styling-guide/rules/component-variant-rule.md",
+                        });
+                    }
+                }
+            },
+        };
+    },
+};

package/dist/eslint/pasika/rules/cva-boolean-variants.d.ts

@@ -0,0 +1,11 @@
+/**
+ * ESLint rule: pasika/cva-boolean-variants
+ *
+ * Enforces correct placement of boolean appearance props:
+ * - If a boolean variant appears in both CVA and cn(), report it —
+ *   it belongs in exactly one place.
+ *
+ * @see docs/styling-guide/rules/component-variant-rule.md
+ */
+import type { Rule } from "eslint";
+export declare const cvaBooleanVariantsRule: Rule.RuleModule;

package/dist/eslint/pasika/rules/cva-boolean-variants.js

@@ -0,0 +1,97 @@
+/**
+ * ESLint rule: pasika/cva-boolean-variants
+ *
+ * Enforces correct placement of boolean appearance props:
+ * - If a boolean variant appears in both CVA and cn(), report it —
+ *   it belongs in exactly one place.
+ *
+ * @see docs/styling-guide/rules/component-variant-rule.md
+ */
+function extractCvaInfo(node) {
+    if (node.callee.type !== "Identifier" || node.callee.name !== "cva") {
+        return undefined;
+    }
+    const variantNames = new Set();
+    const compoundVariants = new Set();
+    const options = node.arguments[1];
+    if (options?.type !== "ObjectExpression")
+        return { variantNames, compoundVariants };
+    for (const prop of options.properties) {
+        if (prop.type !== "Property")
+            continue;
+        const keyName = prop.key.type === "Identifier" ? prop.key.name : undefined;
+        if (keyName === "variants" && prop.value.type === "ObjectExpression") {
+            for (const vProp of prop.value.properties) {
+                if (vProp.type !== "Property")
+                    continue;
+                const vName = vProp.key.type === "Identifier" ? vProp.key.name : undefined;
+                if (vName)
+                    variantNames.add(vName);
+            }
+        }
+        if (keyName === "compoundVariants" && prop.value.type === "ArrayExpression") {
+            for (const entry of prop.value.elements) {
+                if (entry?.type !== "ObjectExpression")
+                    continue;
+                for (const cvProp of entry.properties) {
+                    if (cvProp.type !== "Property")
+                        continue;
+                    const cvName = cvProp.key.type === "Identifier" ? cvProp.key.name : undefined;
+                    if (cvName && variantNames.has(cvName)) {
+                        compoundVariants.add(cvName);
+                    }
+                }
+            }
+        }
+    }
+    return { variantNames, compoundVariants };
+}
+export const cvaBooleanVariantsRule = {
+    meta: {
+        schema: [],
+        type: "problem",
+        docs: {
+            description: "Enforce correct boolean variant placement between CVA and cn().",
+        },
+    },
+    create(context) {
+        const cvaInfos = [];
+        return {
+            // Collect all cva() calls in the file
+            CallExpression(node) {
+                const info = extractCvaInfo(node);
+                if (info)
+                    cvaInfos.push(info);
+            },
+            // Detect boolean && "class" patterns anywhere inside a className attribute
+            "JSXAttribute[name.name='className'] LogicalExpression[operator='&&']"(node) {
+                if (cvaInfos.length === 0)
+                    return;
+                if (node.type !== "LogicalExpression")
+                    return;
+                const left = node.left;
+                const right = node.right;
+                // Right side should be a string literal (class name)
+                if (right.type !== "Literal" || typeof right.value !== "string") {
+                    return;
+                }
+                // Left side should be an identifier (boolean prop)
+                if (left.type !== "Identifier")
+                    return;
+                const propName = left.name;
+                // Check if this prop is also a CVA variant
+                for (const info of cvaInfos) {
+                    if (info.variantNames.has(propName)) {
+                        context.report({
+                            node,
+                            message: `Boolean prop "${propName}" is used as a standalone conditional in cn() ` +
+                                "but is also defined as a CVA variant. Move it to one place: " +
+                                "either CVA (with both true/false treatments) or cn() (standalone). " +
+                                "See docs/styling-guide/rules/component-variant-rule.md",
+                        });
+                    }
+                }
+            },
+        };
+    },
+};

package/dist/eslint/pasika/rules/data-testid-case.d.ts

@@ -0,0 +1,2 @@
+import type { Rule } from "eslint";
+export declare const dataTestIdCaseRule: Rule.RuleModule;

package/dist/eslint/pasika/rules/data-testid-case.js

@@ -0,0 +1,76 @@
+/**
+ * ESLint rule: pasika/data-testid-case
+ *
+ * Enforces data-testid casing for components whose rendered result has one
+ * statically identifiable intrinsic root. Components with multiple or dynamic
+ * roots are intentionally left alone, matching the documented exemption.
+ *
+ * @see docs/code-organization-guide/rules/smart-vs-dumb-component-rule.md
+ */
+import path from "node:path";
+import { findSimpleRoot, getTestId, parseComponentInfo } from "./component-conventions.js";
+const NEXT_ROUTING_FILES = new Set([
+    "page",
+    "layout",
+    "loading",
+    "error",
+    "not-found",
+    "route",
+    "template",
+    "default",
+    "middleware",
+    "instrumentation",
+]);
+const isPascalCase = (value) => /^[A-Z][A-Za-z0-9]*$/.test(value);
+const isKebabCase = (value) => /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/.test(value);
+export const dataTestIdCaseRule = {
+    meta: {
+        schema: [],
+        type: "problem",
+        docs: {
+            description: "Enforce data-testid casing for smart and dumb components with a single intrinsic root.",
+        },
+    },
+    create(context) {
+        const filename = path.resolve(context.filename);
+        if (!filename.endsWith(".tsx"))
+            return {};
+        const base = path.basename(filename, path.extname(filename));
+        if (NEXT_ROUTING_FILES.has(base))
+            return {};
+        const text = context.sourceCode.text;
+        const components = parseComponentInfo(text, filename);
+        return {
+            Program(node) {
+                for (const component of components) {
+                    const root = findSimpleRoot(component, text, filename);
+                    if (!root)
+                        continue;
+                    const { value } = getTestId(root);
+                    const expected = component.smart ? component.name : toKebabCase(component.name);
+                    if (component.smart && value === undefined) {
+                        context.report({
+                            node,
+                            message: `Smart component "${component.name}" with one outer DOM element must set data-testid="${expected}".`,
+                        });
+                        continue;
+                    }
+                    if (value === undefined || value === expected)
+                        continue;
+                    if (component.smart ? !isPascalCase(value) || value !== expected : !isKebabCase(value)) {
+                        context.report({
+                            node,
+                            message: `data-testid for ${component.smart ? "smart" : "dumb"} component "${component.name}" must be ${component.smart ? "PascalCase" : "kebab-case"}: expected "${expected}".`,
+                        });
+                    }
+                }
+            },
+        };
+    },
+};
+function toKebabCase(value) {
+    return value
+        .replace(/(?<lower>[a-z0-9])(?<upper>[A-Z])/g, "$<lower>-$<upper>")
+        .replace(/(?<first>[A-Z])(?<rest>[A-Z][a-z])/g, "$<first>-$<rest>")
+        .toLowerCase();
+}

package/dist/eslint/pasika/rules/enforce-cn-merge.d.ts

@@ -6,4 +6,16 @@
  * @see docs/styling-guide/rules/class-composition-rule.md
  */
 import type { Rule } from "eslint";
-export declare const enforceCnMergeRule: Rule.RuleModule;
+import type { JsxAttributeNode } from "../ast-types.js";
+export declare const enforceCnMergeRule: {
+    meta: {
+        schema: never[];
+        type: "problem";
+        docs: {
+            description: string;
+        };
+    };
+    create(context: Rule.RuleContext): {
+        JSXAttribute(node: JsxAttributeNode): void;
+    };
+};

package/dist/eslint/pasika/rules/enforce-cn-merge.js

@@ -8,72 +8,75 @@
 function classCount(str) {
     return str.split(/\s+/).filter(Boolean).length;
 }
+function isComponentName(name) {
+    return name?.type === "JSXIdentifier" && /^[A-Z]/.test(name.name);
+}
+function isOuterLayoutClass(className) {
+    const utility = className.split(":").pop() ?? className;
+    return /^(?:-?m[trblsexy]?-.+|(?:min-|max-)?[wh]-.+|size-.+|(?:flex-(?:1|auto|initial|none|grow|shrink|basis-.+)|grow(?:-.+)?|shrink(?:-.+)?|basis-.+|order-.+|(?:col|row)-(?:auto|span-.+|start-.+|end-.+)|(?:self|place-self|justify-self)-.+|z-.+|gap-.+|space-[xy]-.+))$/.test(utility);
+}
+function stringArguments(node) {
+    if (node?.type === "Literal" && typeof node.value === "string")
+        return [node.value];
+    if (node?.type === "TemplateLiteral")
+        return node.quasis.map((quasi) => quasi.value.raw);
+    if (node?.type === "ConditionalExpression")
+        return [...stringArguments(node.consequent), ...stringArguments(node.alternate)];
+    if (node?.type === "LogicalExpression")
+        return [...stringArguments(node.left), ...stringArguments(node.right)];
+    if (node?.type === "CallExpression" && node.callee.type === "Identifier" && node.callee.name === "cn") {
+        return node.arguments.flatMap((argument) => stringArguments(argument));
+    }
+    return [];
+}
 export const enforceCnMergeRule = {
-    meta: {
-        schema: [],
-        type: "problem",
-        docs: {
-            description: "Enforce cn() for conditional class merging.",
-        },
-    },
+    meta: { schema: [], type: "problem", docs: { description: "Enforce cn() for conditional class merging." } },
     create(context) {
         return {
             JSXAttribute(node) {
-                if (node.name.name !== "className" && node.name.name !== "class")
+                const attributeName = node.name?.name ?? "";
+                const element = node.parent.parent;
+                const isComponentProp = isComponentName(element.openingElement?.name);
+                if (isComponentProp && attributeName !== "className" && attributeName.endsWith("ClassName")) {
+                    context.report({ node, message: "Expose appearance through typed variant props instead of separate internal class-name props. See docs/styling-guide/rules/class-composition-rule.md" });
+                    return;
+                }
+                if (attributeName !== "className" && attributeName !== "class")
                     return;
                 const valueNode = node.value;
                 if (!valueNode)
                     return;
+                if (isComponentProp && attributeName === "className") {
+                    const expression = valueNode.type === "JSXExpressionContainer" ? valueNode.expression : valueNode;
+                    const invalidClass = stringArguments(expression).flatMap((value) => value.split(/\s+/).filter(Boolean)).find((className) => !isOuterLayoutClass(className));
+                    if (invalidClass)
+                        context.report({ node, message: `Passed className contains non-layout utility "${invalidClass}". Expose appearance through typed variant props. See docs/styling-guide/rules/class-composition-rule.md` });
+                    return;
+                }
                 if (valueNode.type === "Literal" && typeof valueNode.value === "string") {
-                    if (classCount(valueNode.value) > 5) {
-                        context.report({
-                            node,
-                            message: "Static className with more than 5 classes must use cn() with grouped string literals. " +
-                                "See docs/styling-guide/rules/class-composition-rule.md",
-                        });
-                    }
+                    if (classCount(valueNode.value) > 5)
+                        context.report({ node, message: "Static className with more than 5 classes must use cn() with grouped string literals. See docs/styling-guide/rules/class-composition-rule.md" });
                     return;
                 }
-                if (valueNode.type !== "JSXExpressionContainer" || !valueNode.expression)
+                if (valueNode.type !== "JSXExpressionContainer")
                     return;
                 const expr = valueNode.expression;
                 if (expr.type === "BinaryExpression" && expr.operator === "+") {
-                    context.report({
-                        node,
-                        message: "Use cn() instead of + operator for className. " +
-                            "See docs/styling-guide/rules/class-composition-rule.md",
-                    });
+                    context.report({ node, message: "Use cn() instead of + operator for className. See docs/styling-guide/rules/class-composition-rule.md" });
                     return;
                 }
                 if (expr.type === "TemplateLiteral" && expr.expressions.length > 0) {
-                    context.report({
-                        node,
-                        message: "Use cn() instead of template literals with conditionals for className. " +
-                            "See docs/styling-guide/rules/class-composition-rule.md",
-                    });
+                    context.report({ node, message: "Use cn() instead of template literals with conditionals for className. See docs/styling-guide/rules/class-composition-rule.md" });
                     return;
                 }
-                if (expr.type === "Literal" && typeof expr.value === "string") {
-                    if (classCount(expr.value) > 5) {
-                        context.report({
-                            node,
-                            message: "Static className with more than 5 classes must use cn() with grouped string literals. " +
-                                "See docs/styling-guide/rules/class-composition-rule.md",
-                        });
-                    }
+                if (expr.type === "Literal" && typeof expr.value === "string" && classCount(expr.value) > 5) {
+                    context.report({ node, message: "Static className with more than 5 classes must use cn() with grouped string literals. See docs/styling-guide/rules/class-composition-rule.md" });
                     return;
                 }
                 if (expr.type === "CallExpression" && expr.callee.type === "Identifier" && expr.callee.name === "cn") {
                     for (const arg of expr.arguments) {
-                        if (arg.type === "Literal" && typeof arg.value === "string") {
-                            if (classCount(arg.value) > 5) {
-                                context.report({
-                                    node: arg,
-                                    message: "Each cn() string argument must contain at most 5 class names. " +
-                                        "Group by styling concern. " +
-                                        "See docs/styling-guide/rules/class-composition-rule.md",
-                                });
-                            }
+                        if (arg.type === "Literal" && typeof arg.value === "string" && classCount(arg.value) > 5) {
+                            context.report({ node: arg, message: "Each cn() string argument must contain at most 5 class names. Group by styling concern. See docs/styling-guide/rules/class-composition-rule.md" });
                         }
                     }
                 }
@@ -81,4 +84,3 @@ export const enforceCnMergeRule = {
         };
     },
 };
-/* eslint-enable  -- re-enable rules disabled for AST access @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument */

package/dist/eslint/pasika/rules/enforce-cva-variant-props.js

@@ -17,59 +17,65 @@ export const enforceCvaVariantPropsRule = {
         const cvaDefinitions = new Map();
         return {
             VariableDeclarator(node) {
-                if (node.init?.type === "CallExpression" &&
-                    node.init.callee.type === "Identifier" &&
-                    node.init.callee.name === "cva" &&
-                    node.id.type === "Identifier") {
-                    const args = node.init.arguments;
-                    if (args.length < 2)
-                        return;
-                    const options = args[1];
-                    if (options?.type === "ObjectExpression") {
-                        for (const prop of options.properties) {
-                            if (prop.type === "Property" &&
-                                prop.key.type === "Identifier" &&
-                                prop.key.name === "variants" &&
-                                prop.value.type === "ObjectExpression") {
-                                const variantNames = prop.value.properties
-                                    .filter((p) => p.type === "Property" && p.key.type === "Identifier")
-                                    .map((p) => p.key.name);
-                                if (variantNames.length > 0) {
-                                    cvaDefinitions.set(node.id.name, variantNames);
-                                }
-                            }
-                        }
+                const init = node.init;
+                if (init?.type !== "CallExpression" ||
+                    init.callee.type !== "Identifier" ||
+                    init.callee.name !== "cva" ||
+                    node.id.type !== "Identifier") {
+                    return;
+                }
+                const args = init.arguments;
+                if (args.length < 2)
+                    return;
+                const options = args[1];
+                if (options?.type !== "ObjectExpression")
+                    return;
+                for (const prop of options.properties) {
+                    if (prop.type !== "Property" ||
+                        prop.key.type !== "Identifier" ||
+                        prop.key.name !== "variants" ||
+                        prop.value.type !== "ObjectExpression") {
+                        continue;
+                    }
+                    const variantNames = prop.value.properties
+                        .filter((p) => p.type === "Property" && p.key.type === "Identifier")
+                        .map((p) => p.key.name);
+                    if (variantNames.length > 0) {
+                        cvaDefinitions.set(node.id.name, variantNames);
                     }
                 }
             },
             TSTypeAliasDeclaration(node) {
-                if (!node.id.name.endsWith("Props"))
+                const aliasName = node.id?.name;
+                if (!aliasName?.endsWith("Props"))
                     return;
-                if (node.typeAnnotation.type !== "TSTypeLiteral")
+                if (node.typeAnnotation?.type !== "TSTypeLiteral")
                     return;
-                for (const member of node.typeAnnotation.members) {
-                    if (member.type === "TSPropertySignature" &&
-                        member.key.type === "Identifier" &&
-                        member.typeAnnotation?.typeAnnotation?.type === "TSUnionType") {
-                        const keyName = String(member.key.name);
-                        const typeAnn = member.typeAnnotation.typeAnnotation;
-                        // typescript-eslint emits ESTree `Literal` nodes; other TypeScript
-                        // parsers emit `StringLiteral`. Accept both so the rule works
-                        // whichever parser the consuming config installs.
-                        const allStringLiterals = typeAnn.types.every((t) => t.type === "TSLiteralType" &&
-                            (t.literal?.type === "StringLiteral" ||
-                                (t.literal?.type === "Literal" && typeof t.literal.value === "string")));
-                        if (allStringLiterals && typeAnn.types.length >= 2) {
-                            for (const [, variantNames] of cvaDefinitions) {
-                                if (variantNames.includes(keyName)) {
-                                    context.report({
-                                        node: member,
-                                        message: `Variant prop "${keyName}" duplicates CVA variant values. ` +
-                                            "Use VariantProps<typeof variants> instead of manually writing union types. " +
-                                            "See docs/styling-guide/rules/component-variant-rule.md",
-                                    });
-                                    return;
-                                }
+                for (const member of node.typeAnnotation.members ?? []) {
+                    if (member.type !== "TSPropertySignature")
+                        continue;
+                    const keyName = member.key?.type === "Identifier" ? member.key.name : undefined;
+                    if (!keyName)
+                        continue;
+                    const typeAnn = member.typeAnnotation?.typeAnnotation;
+                    if (typeAnn?.type !== "TSUnionType")
+                        continue;
+                    // typescript-eslint emits ESTree `Literal` nodes; other TypeScript
+                    // parsers emit `StringLiteral`. Accept both so the rule works
+                    // whichever parser the consuming config installs.
+                    const allStringLiterals = (typeAnn.types ?? []).every((t) => t.type === "TSLiteralType" &&
+                        (t.literal?.type === "StringLiteral" ||
+                            (t.literal?.type === "Literal" && typeof t.literal.value === "string")));
+                    if (allStringLiterals && (typeAnn.types?.length ?? 0) >= 2) {
+                        for (const variantNames of cvaDefinitions.values()) {
+                            if (variantNames.includes(keyName)) {
+                                context.report({
+                                    node,
+                                    message: `Variant prop "${keyName}" duplicates CVA variant values. ` +
+                                        "Use VariantProps<typeof variants> instead of manually writing union types. " +
+                                        "See docs/styling-guide/rules/component-variant-rule.md",
+                                });
+                                return;
                             }
                         }
                     }
@@ -78,4 +84,3 @@ export const enforceCvaVariantPropsRule = {
         };
     },
 };
-/* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any -- re-enable after AST node access block */