uilint-eslint 0.2.57 → 0.2.58

package/dist/index.d.ts

@@ -790,11 +790,13 @@ declare const rules: {
     }], unknown, _typescript_eslint_utils_ts_eslint.RuleListener> & {
         name: string;
     };
-    "prefer-tailwind": _typescript_eslint_utils_ts_eslint.RuleModule<"preferTailwind", [({
+    "prefer-tailwind": _typescript_eslint_utils_ts_eslint.RuleModule<"preferTailwind" | "preferSemanticColors", [({
         styleRatioThreshold?: number;
         minElementsForAnalysis?: number;
         allowedStyleProperties?: string[];
         ignoreComponents?: string[];
+        preferSemanticColors?: boolean;
+        allowedHardCodedColors?: string[];
     } | undefined)?], unknown, _typescript_eslint_utils_ts_eslint.RuleListener> & {
         name: string;
     };
@@ -933,11 +935,13 @@ declare const plugin: {
         }], unknown, _typescript_eslint_utils_ts_eslint.RuleListener> & {
             name: string;
         };
-        "prefer-tailwind": _typescript_eslint_utils_ts_eslint.RuleModule<"preferTailwind", [({
+        "prefer-tailwind": _typescript_eslint_utils_ts_eslint.RuleModule<"preferTailwind" | "preferSemanticColors", [({
             styleRatioThreshold?: number;
             minElementsForAnalysis?: number;
             allowedStyleProperties?: string[];
             ignoreComponents?: string[];
+            preferSemanticColors?: boolean;
+            allowedHardCodedColors?: string[];
         } | undefined)?], unknown, _typescript_eslint_utils_ts_eslint.RuleListener> & {
             name: string;
         };

package/dist/index.js

@@ -6501,7 +6501,9 @@ var meta16 = defineRuleMeta({
       styleRatioThreshold: 0.3,
       minElementsForAnalysis: 3,
       allowedStyleProperties: [],
-      ignoreComponents: []
+      ignoreComponents: [],
+      preferSemanticColors: true,
+      allowedHardCodedColors: []
     }
   ],
   optionSchema: {
@@ -6533,6 +6535,20 @@ var meta16 = defineRuleMeta({
         type: "text",
         defaultValue: "",
         description: "Comma-separated component names to skip (e.g., motion.div,animated.View)"
+      },
+      {
+        key: "preferSemanticColors",
+        label: "Prefer semantic colors",
+        type: "boolean",
+        defaultValue: true,
+        description: "Warn against hard-coded colors (bg-red-500) in favor of semantic theme colors (bg-destructive)"
+      },
+      {
+        key: "allowedHardCodedColors",
+        label: "Allowed hard-coded colors",
+        type: "text",
+        defaultValue: "",
+        description: "Comma-separated color names to allow when preferSemanticColors is enabled (e.g., gray,slate)"
       }
     ]
   },
@@ -6581,10 +6597,36 @@ but only when the file exceeds a configurable threshold ratio.
   styleRatioThreshold: 0.3,      // Warn when >30% of elements are style-only
   minElementsForAnalysis: 3,     // Need at least 3 styled elements to analyze
   allowedStyleProperties: ["transform", "animation"],  // Skip these properties
-  ignoreComponents: ["motion.div", "animated.View"]    // Skip animation libraries
+  ignoreComponents: ["motion.div", "animated.View"],   // Skip animation libraries
+  preferSemanticColors: true,    // Warn on hard-coded colors like bg-red-500
+  allowedHardCodedColors: ["gray", "slate"]  // Allow specific color palettes
 }]
 \`\`\`
 
+## Semantic Colors
+
+When \`preferSemanticColors\` is enabled, the rule warns against hard-coded Tailwind color classes
+in favor of semantic theme colors:
+
+### \u274C Hard-coded colors (when enabled)
+
+\`\`\`tsx
+<div className="bg-red-500 text-white">Error</div>
+<button className="hover:bg-blue-600">Click</button>
+\`\`\`
+
+### \u2705 Semantic colors (preferred)
+
+\`\`\`tsx
+<div className="bg-destructive text-destructive-foreground">Error</div>
+<button className="hover:bg-primary">Click</button>
+\`\`\`
+
+Semantic colors like \`bg-background\`, \`text-foreground\`, \`bg-primary\`, \`bg-destructive\`,
+\`bg-muted\`, etc. work better with theming and dark mode.
+
+Colors that are always allowed: \`white\`, \`black\`, \`transparent\`, \`inherit\`, \`current\`.
+
 ## Notes
 
 - Elements with BOTH \`style\` and \`className\` are considered acceptable
@@ -6636,6 +6678,63 @@ function hasOnlyAllowedProperties(styleProperties, allowedProperties) {
   }
   return styleProperties.every((prop) => allowedProperties.includes(prop));
 }
+var HARD_CODED_COLOR_NAMES = [
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose",
+  "slate",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone"
+];
+function createHardCodedColorRegex(colorNames) {
+  const colorPattern = colorNames.join("|");
+  return new RegExp(
+    `(?:^|\\s)(?:[a-z-]+:)*(?:bg|text|border|ring|outline|decoration|accent|fill|stroke|from|via|to|divide|placeholder|caret|shadow)-(${colorPattern})-\\d{1,3}(?:/\\d{1,3})?(?=\\s|$)`,
+    "g"
+  );
+}
+function getClassNameValue(attr) {
+  if (!attr.value) return null;
+  if (attr.value.type === "Literal" && typeof attr.value.value === "string") {
+    return attr.value.value;
+  }
+  if (attr.value.type === "JSXExpressionContainer" && attr.value.expression.type === "Literal" && typeof attr.value.expression.value === "string") {
+    return attr.value.expression.value;
+  }
+  if (attr.value.type === "JSXExpressionContainer" && attr.value.expression.type === "TemplateLiteral") {
+    return attr.value.expression.quasis.map((q) => q.value.raw).join(" ");
+  }
+  return null;
+}
+function findHardCodedColors(className, allowedColors) {
+  const disallowedColorNames = HARD_CODED_COLOR_NAMES.filter(
+    (c) => !allowedColors.includes(c)
+  );
+  if (disallowedColorNames.length === 0) return [];
+  const regex = createHardCodedColorRegex(disallowedColorNames);
+  const matches = [];
+  let match;
+  while ((match = regex.exec(className)) !== null) {
+    matches.push(match[0].trim());
+  }
+  return matches;
+}
 var prefer_tailwind_default = createRule({
   name: "prefer-tailwind",
   meta: {
@@ -6644,7 +6743,8 @@ var prefer_tailwind_default = createRule({
       description: "Encourage Tailwind className over inline style attributes"
     },
     messages: {
-      preferTailwind: "Prefer Tailwind className over inline style. This element uses style attribute without className."
+      preferTailwind: "Prefer Tailwind className over inline style. This element uses style attribute without className.",
+      preferSemanticColors: "Prefer semantic color classes (e.g., bg-destructive, text-primary) over hard-coded colors (e.g., bg-red-500)."
     },
     schema: [
       {
@@ -6670,6 +6770,15 @@ var prefer_tailwind_default = createRule({
             type: "array",
             items: { type: "string" },
             description: "Component names to skip"
+          },
+          preferSemanticColors: {
+            type: "boolean",
+            description: "Warn against hard-coded colors in favor of semantic theme colors"
+          },
+          allowedHardCodedColors: {
+            type: "array",
+            items: { type: "string" },
+            description: "Hard-coded color names to allow when preferSemanticColors is enabled"
           }
         },
         additionalProperties: false
@@ -6681,7 +6790,9 @@ var prefer_tailwind_default = createRule({
       styleRatioThreshold: 0.3,
       minElementsForAnalysis: 3,
       allowedStyleProperties: [],
-      ignoreComponents: []
+      ignoreComponents: [],
+      preferSemanticColors: false,
+      allowedHardCodedColors: []
     }
   ],
   create(context) {
@@ -6690,6 +6801,8 @@ var prefer_tailwind_default = createRule({
     const minElementsForAnalysis = options.minElementsForAnalysis ?? 3;
     const allowedStyleProperties = options.allowedStyleProperties ?? [];
     const ignoreComponents = options.ignoreComponents ?? [];
+    const preferSemanticColors = options.preferSemanticColors ?? false;
+    const allowedHardCodedColors = options.allowedHardCodedColors ?? [];
     const styledElements = [];
     function isStyleAttribute(attr) {
       return attr.name.type === "JSXIdentifier" && attr.name.name === "style" && attr.value?.type === "JSXExpressionContainer";
@@ -6716,11 +6829,31 @@ var prefer_tailwind_default = createRule({
             }
             if (isClassNameAttribute(attr)) {
               hasClassName = true;
+              if (preferSemanticColors) {
+                const classNameValue = getClassNameValue(attr);
+                if (classNameValue) {
+                  const hardCodedColors = findHardCodedColors(
+                    classNameValue,
+                    allowedHardCodedColors
+                  );
+                  if (hardCodedColors.length > 0) {
+                    context.report({
+                      node,
+                      messageId: "preferSemanticColors"
+                    });
+                  }
+                }
+              }
             }
           }
         }
         if (hasStyle || hasClassName) {
-          styledElements.push({ node, hasStyle, hasClassName, styleProperties });
+          styledElements.push({
+            node,
+            hasStyle,
+            hasClassName,
+            styleProperties
+          });
         }
       },
       "Program:exit"() {
@@ -6968,7 +7101,9 @@ var recommendedConfig = {
         "styleRatioThreshold": 0.3,
         "minElementsForAnalysis": 3,
         "allowedStyleProperties": [],
-        "ignoreComponents": []
+        "ignoreComponents": [],
+        "preferSemanticColors": true,
+        "allowedHardCodedColors": []
       }
     ]]
   }
@@ -7114,7 +7249,9 @@ var strictConfig = {
         "styleRatioThreshold": 0.3,
         "minElementsForAnalysis": 3,
         "allowedStyleProperties": [],
-        "ignoreComponents": []
+        "ignoreComponents": [],
+        "preferSemanticColors": true,
+        "allowedHardCodedColors": []
       }
     ]]
   }