@justinmoto/frontend-guardian-core 0.1.4 → 0.1.6

package/dist/scanEngine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scanEngine.d.ts","sourceRoot":"","sources":["../src/scanEngine.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAClF,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,EAAE,CAAC;IAAC,UAAU,EAAE,SAAS,EAAE,CAAA;CAAE,CAAC;AA4S/G,wBAAsB,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAajE;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,GAAG,UAAU,CAG7E"}
+{"version":3,"file":"scanEngine.d.ts","sourceRoot":"","sources":["../src/scanEngine.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAClF,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,EAAE,CAAC;IAAC,UAAU,EAAE,SAAS,EAAE,CAAA;CAAE,CAAC;AA2W/G,wBAAsB,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAajE;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,GAAG,UAAU,CAG7E"}

package/dist/scanEngine.js

@@ -142,16 +142,30 @@ function getUnusedVariablesWithLine(ast) {
     });
     return unused;
 }
+function isCardLike(className) {
+    const hasRounded = /\brounded[\w-]*/.test(className);
+    const hasBg = /\bbg-/.test(className) || /\bbackdrop-/.test(className);
+    return !!(hasRounded && hasBg);
+}
 function runAnalysis(fileContents) {
     const sourceOnly = fileContents.filter((f) => isSourcePath(f.path));
     const warnings = [];
     const jsxHashes = new Map();
-    const spacingData = new Map();
+    const spacingByContext = new Map();
     const radiusByFile = new Map();
     const colorClassesByFile = new Map();
     const arbitraryColorByFile = new Map();
+    const hexUsedInPlaces = new Map();
+    const pixelUsageLocations = [];
     const buttonDataByFile = new Map();
+    const PX_ARBITRARY = /\[\d+(\.\d+)?\s*px\]/;
+    const BORDER_PX_ONLY = /^border-\[\d+(\.\d+)?\s*px\]$/;
     const MAX_LOCATIONS = 25;
+    function getSpacingMap(context) {
+        if (!spacingByContext.has(context))
+            spacingByContext.set(context, new Map());
+        return spacingByContext.get(context);
+    }
     for (const { path: filePath, code } of sourceOnly) {
         try {
             const ast = parser.parse(code, { sourceType: "module", plugins: ["jsx", "typescript"], attachComment: false });
@@ -175,6 +189,8 @@ function runAnalysis(fileContents) {
             }
             const classEntries = extractClassNamesWithLines(ast);
             for (const { value: cn, line } of classEntries) {
+                const context = isCardLike(cn) ? "card" : "default";
+                const spacingData = getSpacingMap(context);
                 const parts = cn.split(/\s+/).filter(Boolean);
                 for (const p of parts) {
                     if (/^p[xy]?-[a-z0-9]+$/.test(p) || /^m[xy]?-[a-z0-9]+$/.test(p)) {
@@ -195,8 +211,26 @@ function runAnalysis(fileContents) {
                         if (!colorClassesByFile.has(filePath))
                             colorClassesByFile.set(filePath, new Set());
                         colorClassesByFile.get(filePath).add(p);
-                        if (/\[#|\[rgb|\[hsl/.test(p.replace(/^(bg|text|border)-/, "")))
+                        const colorPart = p.replace(/^(bg|text|border)-/, "");
+                        if (/\[#|\[rgb|\[hsl/.test(colorPart)) {
                             arbitraryColorByFile.set(filePath, line);
+                            const hexMatch = colorPart.match(/\[#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\]/);
+                            if (hexMatch) {
+                                let hex = hexMatch[1].toLowerCase();
+                                if (hex.length === 3)
+                                    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+                                const key = "#" + hex;
+                                if (!hexUsedInPlaces.has(key))
+                                    hexUsedInPlaces.set(key, []);
+                                const locs = hexUsedInPlaces.get(key);
+                                if (locs.length < MAX_LOCATIONS)
+                                    locs.push({ file: filePath, line });
+                            }
+                        }
+                    }
+                    if (PX_ARBITRARY.test(p) && !BORDER_PX_ONLY.test(p)) {
+                        if (pixelUsageLocations.length < MAX_LOCATIONS)
+                            pixelUsageLocations.push({ file: filePath, line });
                     }
                 }
             }
@@ -219,14 +253,19 @@ function runAnalysis(fileContents) {
             });
         }
     }
-    for (const [, data] of spacingData) {
-        if (data.values.size > 1) {
-            warnings.push({
-                file: "(project)",
-                locations: data.locations.slice(0, MAX_LOCATIONS),
-                message: `Mixed spacing values: ${[...data.values].join(", ")}`,
-                suggestion: "Pick one spacing scale (e.g. px-4, py-2) for similar elements and use it across the project so spacing stays consistent.",
-            });
+    for (const [context, spacingData] of spacingByContext) {
+        for (const [, data] of spacingData) {
+            if (data.values.size > 1) {
+                const label = context === "card" ? " (cards/boxes)" : "";
+                warnings.push({
+                    file: "(project)",
+                    locations: data.locations.slice(0, MAX_LOCATIONS),
+                    message: `Mixed spacing values${label}: ${[...data.values].join(", ")}`,
+                    suggestion: context === "card"
+                        ? "Use one padding for all cards/boxes (e.g. p-6)."
+                        : "Pick one spacing scale for containers/layout (e.g. p-4) and use it consistently.",
+                });
+            }
         }
     }
     const radiusFileList = [...radiusByFile.entries()];
@@ -251,6 +290,28 @@ function runAnalysis(fileContents) {
             suggestion: "Prefer Tailwind palette classes (e.g. bg-zinc-100, text-emerald-600) for consistent theming and maintenance.",
         });
     }
+    const repeatedHexes = [...hexUsedInPlaces.entries()].filter(([, locs]) => locs.length >= 2);
+    if (repeatedHexes.length > 0) {
+        const hexList = repeatedHexes.map(([hex]) => `${hex} (${hexUsedInPlaces.get(hex).length} places)`).join(", ");
+        const firstLoc = repeatedHexes[0][1][0];
+        const allLocs = repeatedHexes.flatMap(([, locs]) => locs).slice(0, MAX_LOCATIONS);
+        warnings.push({
+            file: firstLoc.file,
+            line: firstLoc.line,
+            locations: allLocs,
+            message: `Repeated hex color(s) used in multiple places: ${hexList}.`,
+            suggestion: "Add to global CSS (e.g. globals.css or index.css) as a custom utility (e.g. .text-navy) or CSS variable, or extend Tailwind theme in tailwind.config so you define it once and reuse (e.g. text-navy) instead of repeating the hex.",
+        });
+    }
+    if (pixelUsageLocations.length > 0) {
+        warnings.push({
+            file: pixelUsageLocations[0].file,
+            line: pixelUsageLocations[0].line,
+            locations: pixelUsageLocations.slice(0, MAX_LOCATIONS),
+            message: "Pixel (px) used for sizing or spacing (e.g. w-[10px], p-[4px], text-[14px]).",
+            suggestion: "Prefer em and rem over px because they are responsive and scalable. The design adjusts more easily to screen size and user settings. Reserve px for static values like border width (e.g. border-[1px]).",
+        });
+    }
     const buttonPadding = new Map();
     const buttonRadius = new Map();
     for (const [filePath, entries] of buttonDataByFile) {
@@ -310,7 +371,8 @@ function runAnalysis(fileContents) {
         if (files.length > 1)
             duplicates.push({ files, reason: dupReason, suggestion: dupSuggestion });
     }
-    const penalty = warnings.length * 5 + duplicates.length * 10;
+    const warningsCounted = warnings.filter((w) => !w.message.startsWith("Pixel (px) used"));
+    const penalty = warningsCounted.length * 5 + duplicates.length * 10;
     const score = Math.max(0, Math.min(100, 100 - penalty));
     return { score, filesScanned: sourceOnly.length, warnings, duplicates };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justinmoto/frontend-guardian-core",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Scan engine for Frontend Guardian. To run scans from the CLI use: npx frontend-guardian .",
   "type": "module",
   "main": "dist/index.js",
@@ -12,10 +12,10 @@
       "default": "./dist/index.js"
     }
   },
-  "files": ["dist", "README.md"],
-  "scripts": {
-    "build": "tsc"
-  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "dependencies": {
     "@babel/parser": "^7.26.0",
     "@babel/traverse": "^7.26.0",
@@ -35,5 +35,8 @@
     "components",
     "ast"
   ],
-  "license": "MIT"
-}
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc"
+  }
+}