aiex/eslint.config.mjs at master · imsaif/aiex · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

// Custom rule to prevent hardcoded border colors
const noHardcodedBorderColorsRule = {
  meta: {
    type: "suggestion",
    docs: {
      description: "Prevent hardcoded border colors - use design system colors instead",
      category: "Stylistic Issues",
      recommended: true,
    },
  },
  create(context) {
    return {
      JSXAttribute(node) {
        // Check for style attribute with hardcoded colors
        if (node.name.name === "style" && node.value?.expression?.type === "ObjectExpression") {
          node.value.expression.properties.forEach((prop) => {
            if (prop.key?.name?.includes("border") || prop.key?.value?.includes("border")) {
              const value = prop.value?.value || prop.value?.raw;
              if (value && typeof value === "string") {
                // Check for hex colors
                if (/#[0-9A-Fa-f]{3,6}/.test(value)) {
                  context.report({
                    node: prop,
                    message: `Hardcoded hex border color "${value}" detected. Use design system colors instead (e.g., border-gray-200, border-gray-300, border-accent-primary).`,
                  });
                }
              }
            }
          });
        }

        // Check for className attribute with bracket notation colors
        if (node.name.name === "className" && node.value?.type === "Literal") {
          const classValue = node.value.value;
          if (classValue && typeof classValue === "string") {
            // Check for border-[#...] pattern
            if (/border-\[#[0-9A-Fa-f]{3,6}\]/.test(classValue)) {
              context.report({
                node,
                message: `Hardcoded border color in className detected. Use design system colors instead (e.g., border-gray-200, border-gray-300, border-accent-primary).`,
              });
            }
            // Check for other hardcoded color patterns
            if (/\b(bg|text|border)-\[#[0-9A-Fa-f]{3,6}\]/.test(classValue)) {
              context.report({
                node,
                message: `Hardcoded hex color in className detected. Use design system colors instead.`,
              });
            }
          }
        }
      },

      Literal(node) {
        // Check string literals for style patterns
        if (typeof node.value === "string") {
          // Detect inline styles in strings like "border: 1px solid #..."
          if (/border[^:]*:\s*[^;]*#[0-9A-Fa-f]{3,6}/.test(node.value)) {
            context.report({
              node,
              message: `Hardcoded border color in inline style string detected. Use design system colors instead.`,
            });
          }
        }
      },
    };
  },
};

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    files: ["**/*.{js,jsx,ts,tsx}"],
    plugins: {
      "custom-rules": {
        rules: {
          "no-hardcoded-border-colors": noHardcodedBorderColorsRule,
        },
      },
    },
    rules: {
      "custom-rules/no-hardcoded-border-colors": "warn",
    },
  },
];

export default eslintConfig;