uilint-eslint 0.2.164 → 0.2.165

package/dist/index.d.ts

@@ -529,7 +529,7 @@ declare const rules: {
     }], unknown, _typescript_eslint_utils_ts_eslint.RuleListener> & {
         name: string;
     };
-    "prefer-tailwind": _typescript_eslint_utils_ts_eslint.RuleModule<"preferTailwind" | "preferSemanticColors" | "preferSemanticColorsWithSuggestion" | "preferSemanticClassGroups" | "semanticOpacityModifier", [({
+    "prefer-tailwind": _typescript_eslint_utils_ts_eslint.RuleModule<"preferTailwind" | "preferSemanticColors" | "preferSemanticColorsWithSuggestion" | "preferSemanticClassGroups" | "semanticOpacityModifier" | "componentVariantLeakage", [({
         styleRatioThreshold?: number;
         minElementsForAnalysis?: number;
         allowedStyleProperties?: string[];
@@ -543,6 +543,11 @@ declare const rules: {
         disallowSemanticOpacityModifiers?: boolean;
         allowedOpacityModifierClasses?: string[];
         allowedVisualUtilityClasses?: string[];
+        preferComponentVariants?: boolean;
+        componentVariantComponents?: string[];
+        componentVariantProps?: string[];
+        componentVariantClassThreshold?: number;
+        allowedComponentVariantClasses?: string[];
     } | undefined)?], unknown, _typescript_eslint_utils_ts_eslint.RuleListener> & {
         name: string;
     };
@@ -655,7 +660,7 @@ declare const plugin: {
         }], unknown, _typescript_eslint_utils_ts_eslint.RuleListener> & {
             name: string;
         };
-        "prefer-tailwind": _typescript_eslint_utils_ts_eslint.RuleModule<"preferTailwind" | "preferSemanticColors" | "preferSemanticColorsWithSuggestion" | "preferSemanticClassGroups" | "semanticOpacityModifier", [({
+        "prefer-tailwind": _typescript_eslint_utils_ts_eslint.RuleModule<"preferTailwind" | "preferSemanticColors" | "preferSemanticColorsWithSuggestion" | "preferSemanticClassGroups" | "semanticOpacityModifier" | "componentVariantLeakage", [({
             styleRatioThreshold?: number;
             minElementsForAnalysis?: number;
             allowedStyleProperties?: string[];
@@ -669,6 +674,11 @@ declare const plugin: {
             disallowSemanticOpacityModifiers?: boolean;
             allowedOpacityModifierClasses?: string[];
             allowedVisualUtilityClasses?: string[];
+            preferComponentVariants?: boolean;
+            componentVariantComponents?: string[];
+            componentVariantProps?: string[];
+            componentVariantClassThreshold?: number;
+            allowedComponentVariantClasses?: string[];
         } | undefined)?], unknown, _typescript_eslint_utils_ts_eslint.RuleListener> & {
             name: string;
         };

package/dist/index.js

@@ -4988,7 +4988,7 @@ function formatSuggestionsForMessage(suggestions, limit = 2) {
 // src/rules/prefer-tailwind/index.ts
 var meta14 = defineRuleMeta({
   id: "prefer-tailwind",
-  version: "1.2.0",
+  version: "1.3.0",
   name: "Prefer Tailwind",
   description: "Encourage Tailwind className over inline style attributes",
   defaultSeverity: "warn",
@@ -5011,7 +5011,12 @@ var meta14 = defineRuleMeta({
       visualUtilityMinGroups: 2,
       disallowSemanticOpacityModifiers: true,
       allowedOpacityModifierClasses: [],
-      allowedVisualUtilityClasses: []
+      allowedVisualUtilityClasses: [],
+      preferComponentVariants: true,
+      componentVariantComponents: [],
+      componentVariantProps: ["variant", "size"],
+      componentVariantClassThreshold: 4,
+      allowedComponentVariantClasses: []
     }
   ],
   optionSchema: {
@@ -5106,6 +5111,41 @@ var meta14 = defineRuleMeta({
         type: "text",
         defaultValue: "",
         description: "Comma-separated exact visual utility classes to ignore in cluster detection"
+      },
+      {
+        key: "preferComponentVariants",
+        label: "Prefer component variants",
+        type: "boolean",
+        defaultValue: true,
+        description: "Warn when design-system components with variant or size props also carry bespoke styling classes"
+      },
+      {
+        key: "componentVariantComponents",
+        label: "Component variant components",
+        type: "text",
+        defaultValue: "",
+        description: "Optional comma-separated component names to inspect; empty means any custom JSX component with variant props"
+      },
+      {
+        key: "componentVariantProps",
+        label: "Component variant props",
+        type: "text",
+        defaultValue: "variant,size",
+        description: "Comma-separated prop names that indicate a component already exposes styling variants"
+      },
+      {
+        key: "componentVariantClassThreshold",
+        label: "Component variant class threshold",
+        type: "number",
+        defaultValue: 4,
+        description: "Minimum number of styling override classes before warning on a variant component"
+      },
+      {
+        key: "allowedComponentVariantClasses",
+        label: "Allowed component variant classes",
+        type: "text",
+        defaultValue: "",
+        description: "Comma-separated exact classes to ignore when checking component variant leakage"
       }
     ]
   },
@@ -5221,6 +5261,34 @@ opacity suffixes are reported:
 Prefer a fully semantic token such as \`text-muted-foreground\`, or define a new
 theme token/class when the opacity represents a reusable state.
 
+## Component Variant Leakage
+
+When \`preferComponentVariants\` is enabled, the rule checks custom JSX
+components that already use style-like variant props such as \`variant\` or
+\`size\`. It ignores lowercase HTML elements by default. When \`className\` adds
+several bespoke styling overrides across static strings, template chunks, and
+common class combiners, the rule warns because the styling probably belongs in a
+component variant or semantic project class.
+
+### \u274C Bespoke overrides on a variant component
+
+\`\`\`tsx
+<Button
+  variant="ghost"
+  size="xs"
+  className={cn(
+    "h-auto gap-1 rounded-md px-2 py-0.5 text-[11px] font-medium",
+    running ? "cursor-not-allowed opacity-40" : "bg-primary/10 text-primary hover:bg-primary/20"
+  )}
+/>
+\`\`\`
+
+### \u2705 Semantic component variant
+
+\`\`\`tsx
+<Button variant="primarySubtle" size="xs" />
+\`\`\`
+
 ## LLM-Powered Suggestions
 
 When \`useLlmSuggestions\` is enabled and Ollama is running locally, the rule will:
@@ -5268,6 +5336,10 @@ function getComponentName2(node) {
   }
   return "";
 }
+function isCustomComponentName(componentName) {
+  const localName = componentName.split(".").at(-1) ?? componentName;
+  return /^[A-Z]/.test(localName);
+}
 function getStylePropertyNames(value) {
   const expr = value.expression;
   if (expr.type === "ObjectExpression") {
@@ -5399,6 +5471,7 @@ var SHADOW_SIZE_VALUES = /* @__PURE__ */ new Set([
   "inner",
   "none"
 ]);
+var DEFAULT_COMPONENT_VARIANT_PROPS = ["variant", "size"];
 function stripImportant(value) {
   return value.replace(/^!/, "").replace(/!$/, "");
 }
@@ -5532,6 +5605,112 @@ function findSemanticOpacityModifiers(className, allowedClasses) {
   }
   return matches;
 }
+function isSpacingOverride(baseClass) {
+  return /^-?(p|px|py|pt|pr|pb|pl|m|mx|my|mt|mr|mb|ml|gap|gap-x|gap-y)-/.test(
+    baseClass
+  ) || baseClass === "gap";
+}
+function isSizingOverride(baseClass) {
+  return /^(size|h|min-h|max-h|w|min-w|max-w)-/.test(baseClass);
+}
+function isTypographyOverride(baseClass) {
+  return baseClass.startsWith("text-[") || baseClass.startsWith("leading-") || baseClass.startsWith("tracking-") || baseClass.startsWith("font-");
+}
+function getComponentOverrideGroup(baseClass) {
+  const visualGroup = getVisualUtilityGroup(baseClass);
+  if (visualGroup) {
+    return visualGroup;
+  }
+  if (isSpacingOverride(baseClass)) {
+    return "spacing";
+  }
+  if (isSizingOverride(baseClass)) {
+    return "sizing";
+  }
+  if (isTypographyOverride(baseClass)) {
+    return "typography";
+  }
+  return null;
+}
+function findComponentVariantLeakageClasses(classNames, threshold, allowedClasses) {
+  const matches = [];
+  for (const className of classNames) {
+    for (const token of extractClassTokens(className)) {
+      if (classIsAllowed(token, allowedClasses)) {
+        continue;
+      }
+      const group = getComponentOverrideGroup(token.base);
+      if (group) {
+        matches.push({ token: token.original, group });
+      }
+    }
+  }
+  if (matches.length < threshold) {
+    return [];
+  }
+  const seen = /* @__PURE__ */ new Set();
+  return matches.map((match) => match.token).filter((token) => {
+    if (seen.has(token)) {
+      return false;
+    }
+    seen.add(token);
+    return true;
+  });
+}
+function extractStaticClassStringsFromExpression(expression) {
+  if (!expression || expression.type === "JSXEmptyExpression") {
+    return [];
+  }
+  if (expression.type === "SpreadElement") {
+    return [];
+  }
+  switch (expression.type) {
+    case "Literal":
+      return typeof expression.value === "string" ? [expression.value] : [];
+    case "TemplateLiteral":
+      return expression.quasis.map((quasi) => quasi.value.raw);
+    case "ConditionalExpression":
+      return [
+        ...extractStaticClassStringsFromExpression(expression.consequent),
+        ...extractStaticClassStringsFromExpression(expression.alternate)
+      ];
+    case "LogicalExpression":
+      return [
+        ...extractStaticClassStringsFromExpression(expression.left),
+        ...extractStaticClassStringsFromExpression(expression.right)
+      ];
+    case "CallExpression":
+      if (expression.callee.type !== "Identifier" || !CLASS_COMBINER_NAMES.has(expression.callee.name)) {
+        return [];
+      }
+      return expression.arguments.flatMap(
+        (arg) => extractStaticClassStringsFromExpression(arg)
+      );
+    case "ArrayExpression":
+      return expression.elements.flatMap(
+        (element) => extractStaticClassStringsFromExpression(element)
+      );
+    case "ObjectExpression":
+      return expression.properties.flatMap((property) => {
+        if (property.type !== "Property") {
+          return [];
+        }
+        if (property.key.type === "Literal" && typeof property.key.value === "string") {
+          return [property.key.value];
+        }
+        if (property.key.type === "Identifier") {
+          return [property.key.name];
+        }
+        return [];
+      });
+    case "TSAsExpression":
+    case "TSTypeAssertion":
+    case "TSNonNullExpression":
+      return extractStaticClassStringsFromExpression(expression.expression);
+    default:
+      return [];
+  }
+}
 var prefer_tailwind_default = createRule({
   name: "prefer-tailwind",
   meta: {
@@ -5544,7 +5723,8 @@ var prefer_tailwind_default = createRule({
       preferSemanticColors: "Hard-coded colors: {{colors}}. Use semantic classes instead.",
       preferSemanticColorsWithSuggestion: "Hard-coded colors: {{colors}}. {{suggestion}}",
       preferSemanticClassGroups: "Dense visual utility cluster: {{classes}}. Move repeated panel/card styling into a semantic class.",
-      semanticOpacityModifier: "Semantic color opacity modifiers: {{classes}}. Use fully semantic classes or tokens instead."
+      semanticOpacityModifier: "Semantic color opacity modifiers: {{classes}}. Use fully semantic classes or tokens instead.",
+      componentVariantLeakage: "{{component}} already uses {{props}}; move bespoke styling overrides into a component variant or semantic class instead of className: {{classes}}."
     },
     schema: [
       {
@@ -5611,6 +5791,30 @@ var prefer_tailwind_default = createRule({
             type: "array",
             items: { type: "string" },
             description: "Exact visual utility classes to ignore in cluster detection"
+          },
+          preferComponentVariants: {
+            type: "boolean",
+            description: "Warn when design-system components with variant props also use bespoke styling classes"
+          },
+          componentVariantComponents: {
+            type: "array",
+            items: { type: "string" },
+            description: "Optional component names to inspect for component variant leakage; empty means any custom JSX component"
+          },
+          componentVariantProps: {
+            type: "array",
+            items: { type: "string" },
+            description: "Prop names that indicate a component exposes styling variants"
+          },
+          componentVariantClassThreshold: {
+            type: "number",
+            minimum: 1,
+            description: "Minimum styling override class count before warning on a variant component"
+          },
+          allowedComponentVariantClasses: {
+            type: "array",
+            items: { type: "string" },
+            description: "Exact classes to ignore in component variant leakage detection"
           }
         },
         additionalProperties: false
@@ -5631,7 +5835,12 @@ var prefer_tailwind_default = createRule({
       visualUtilityMinGroups: 2,
       disallowSemanticOpacityModifiers: true,
       allowedOpacityModifierClasses: [],
-      allowedVisualUtilityClasses: []
+      allowedVisualUtilityClasses: [],
+      preferComponentVariants: true,
+      componentVariantComponents: [],
+      componentVariantProps: DEFAULT_COMPONENT_VARIANT_PROPS,
+      componentVariantClassThreshold: 4,
+      allowedComponentVariantClasses: []
     }
   ],
   create(context) {
@@ -5649,6 +5858,11 @@ var prefer_tailwind_default = createRule({
     const disallowSemanticOpacityModifiers = options.disallowSemanticOpacityModifiers ?? true;
     const allowedOpacityModifierClasses = options.allowedOpacityModifierClasses ?? [];
     const allowedVisualUtilityClasses = options.allowedVisualUtilityClasses ?? [];
+    const preferComponentVariants = options.preferComponentVariants ?? true;
+    const componentVariantComponents = options.componentVariantComponents ?? [];
+    const componentVariantProps = options.componentVariantProps ?? DEFAULT_COMPONENT_VARIANT_PROPS;
+    const componentVariantClassThreshold = options.componentVariantClassThreshold ?? 4;
+    const allowedComponentVariantClasses = options.allowedComponentVariantClasses ?? [];
     let fileContent = null;
     const filePath = context.filename;
     const fileDir = dirname5(filePath);
@@ -5669,6 +5883,69 @@ var prefer_tailwind_default = createRule({
     function isClassNameAttribute(attr) {
       return attr.name.type === "JSXIdentifier" && (attr.name.name === "className" || attr.name.name === "class");
     }
+    function getJSXAttributeName(attr) {
+      return attr.name.type === "JSXIdentifier" ? attr.name.name : null;
+    }
+    function getClassAttributeStaticStrings(attr) {
+      const value = attr.value;
+      if (value?.type === "Literal" && typeof value.value === "string") {
+        return [value.value];
+      }
+      if (value?.type === "JSXExpressionContainer") {
+        return extractStaticClassStringsFromExpression(value.expression);
+      }
+      return [];
+    }
+    function getComponentVariantPropNames(node) {
+      const propNames = /* @__PURE__ */ new Set();
+      for (const attr of node.attributes) {
+        if (attr.type !== "JSXAttribute") {
+          continue;
+        }
+        const attrName = getJSXAttributeName(attr);
+        if (attrName && componentVariantProps.includes(attrName)) {
+          propNames.add(attrName);
+        }
+      }
+      return [...propNames];
+    }
+    function shouldInspectComponentVariantLeakage(componentName) {
+      if (!preferComponentVariants || !isCustomComponentName(componentName)) {
+        return false;
+      }
+      if (componentVariantComponents.length === 0) {
+        return true;
+      }
+      return componentVariantComponents.includes(componentName);
+    }
+    function checkComponentVariantLeakage(node, classNameAttr) {
+      const componentName = getComponentName2(node);
+      if (!shouldInspectComponentVariantLeakage(componentName)) {
+        return;
+      }
+      const variantPropNames = getComponentVariantPropNames(node);
+      if (variantPropNames.length === 0 || !classNameAttr) {
+        return;
+      }
+      const classStrings = getClassAttributeStaticStrings(classNameAttr);
+      const leakageClasses = findComponentVariantLeakageClasses(
+        classStrings,
+        componentVariantClassThreshold,
+        allowedComponentVariantClasses
+      );
+      if (leakageClasses.length === 0) {
+        return;
+      }
+      context.report({
+        node: classNameAttr,
+        messageId: "componentVariantLeakage",
+        data: {
+          component: componentName,
+          props: variantPropNames.join("/"),
+          classes: leakageClasses.slice(0, 12).join(", ")
+        }
+      });
+    }
     function checkClassString(node, className) {
       if (preferSemanticColors) {
         const hardCodedColors = findHardCodedColors(
@@ -5764,6 +6041,7 @@ var prefer_tailwind_default = createRule({
         let hasStyle = false;
         let hasClassName = false;
         let styleProperties = [];
+        let classNameAttr = null;
         for (const attr of node.attributes) {
           if (attr.type === "JSXAttribute") {
             if (isStyleAttribute(attr)) {
@@ -5774,10 +6052,12 @@ var prefer_tailwind_default = createRule({
             }
             if (isClassNameAttribute(attr)) {
               hasClassName = true;
+              classNameAttr = attr;
               processClassAttribute(attr);
             }
           }
         }
+        checkComponentVariantLeakage(node, classNameAttr);
         if (hasStyle || hasClassName) {
           styledElements.push({
             node,
@@ -5817,23 +6097,8 @@ var prefer_tailwind_default = createRule({
         if (!CLASS_COMBINER_NAMES.has(node.callee.name)) {
           return;
         }
-        for (const arg of node.arguments) {
-          if (arg.type === "Literal" && typeof arg.value === "string") {
-            checkClassString(arg, arg.value);
-          }
-          if (arg.type === "TemplateLiteral") {
-            processTemplateLiteral(arg);
-          }
-          if (arg.type === "ArrayExpression") {
-            for (const element of arg.elements) {
-              if (element?.type === "Literal" && typeof element.value === "string") {
-                checkClassString(element, element.value);
-              }
-              if (element?.type === "TemplateLiteral") {
-                processTemplateLiteral(element);
-              }
-            }
-          }
+        for (const className of extractStaticClassStringsFromExpression(node)) {
+          checkClassString(node, className);
         }
       }
     };
@@ -6265,7 +6530,15 @@ var recommendedConfig = {
         "visualUtilityMinGroups": 2,
         "disallowSemanticOpacityModifiers": true,
         "allowedOpacityModifierClasses": [],
-        "allowedVisualUtilityClasses": []
+        "allowedVisualUtilityClasses": [],
+        "preferComponentVariants": true,
+        "componentVariantComponents": [],
+        "componentVariantProps": [
+          "variant",
+          "size"
+        ],
+        "componentVariantClassThreshold": 4,
+        "allowedComponentVariantClasses": []
       }
     ]]
   }
@@ -6405,7 +6678,15 @@ var strictConfig = {
         "visualUtilityMinGroups": 2,
         "disallowSemanticOpacityModifiers": true,
         "allowedOpacityModifierClasses": [],
-        "allowedVisualUtilityClasses": []
+        "allowedVisualUtilityClasses": [],
+        "preferComponentVariants": true,
+        "componentVariantComponents": [],
+        "componentVariantProps": [
+          "variant",
+          "size"
+        ],
+        "componentVariantClassThreshold": 4,
+        "allowedComponentVariantClasses": []
       }
     ]]
   }