@rolandjlevy/css-ghost 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolandjlevy/css-ghost",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Find orphaned CSS class selectors in your codebase",
   "type": "module",
   "bin": {
@@ -9,14 +9,31 @@
   "scripts": {
     "start": "node bin/css-ghost.js"
   },
+  "files": [
+    "bin",
+    "src",
+    "README.md"
+  ],
   "keywords": [
     "css",
     "orphan",
     "unused",
     "selectors",
     "cli",
-    "linter"
+    "linter",
+    "react",
+    "scss",
+    "stylesheet",
+    "audit"
   ],
   "author": "Roland Levy",
-  "license": "MIT"
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rolandjlevy/css-ghost.git"
+  },
+  "homepage": "https://github.com/rolandjlevy/css-ghost#readme",
+  "engines": {
+    "node": ">=18"
+  }
 }

package/src/parser.js

@@ -4,17 +4,68 @@ import { extname } from 'path';
 // ─── CSS / SCSS selector extraction ────────────────────────────────────────
 
 function extractCssSelectors(content) {
-  const selectors = new Set();
+  const selectors = new Map(); // name → { line, rule }
+  const lines = content.split('\n');
 
-  // Strip comments
-  const stripped = content
-    .replace(/\/\*[\s\S]*?\*\//g, '')
-    .replace(/\/\/.*$/gm, '');
+  // Strip block comments but preserve line numbers by replacing with spaces
+  const stripped = content.replace(/\/\*[\s\S]*?\*\//g, m =>
+    m.replace(/[^\n]/g, ' ')
+  );
 
-  const regex = /\.([a-zA-Z_-][a-zA-Z0-9_-]*)/g;
-  let match;
-  while ((match = regex.exec(stripped)) !== null) {
-    selectors.add(match[1]);
+  // Walk line by line to track line numbers
+  const strippedLines = stripped.split('\n');
+  let insideRule = false;
+  let currentRule = [];
+  let currentSelectors = [];
+  let ruleStartLine = 0;
+
+  for (let i = 0; i < strippedLines.length; i++) {
+    const line = strippedLines[i];
+    const lineNum = i + 1;
+
+    if (!insideRule) {
+      // Look for .className optionally followed by { on same or next line
+      const selectorRegex = /\.([a-zA-Z_-][a-zA-Z0-9_-]*)/g;
+      let m;
+      while ((m = selectorRegex.exec(line)) !== null) {
+        currentSelectors.push({ name: m[1], line: lineNum });
+      }
+
+      if (line.includes('{')) {
+        insideRule = true;
+        ruleStartLine = lineNum;
+        currentRule = [lines[i]];
+
+        if (line.includes('}')) {
+          // Single-line rule
+          const ruleText = currentRule.join('\n').trim();
+          currentSelectors.forEach(({ name, line: l }) => {
+            if (!selectors.has(name)) {
+              selectors.set(name, { line: l, rule: ruleText });
+            }
+          });
+          currentSelectors = [];
+          currentRule = [];
+          insideRule = false;
+        }
+      } else if (currentSelectors.length > 0 && line.trim() === '') {
+        // Empty line with no { means these weren't selectors for a rule
+        currentSelectors = [];
+      }
+    } else {
+      currentRule.push(lines[i]);
+      if (line.includes('}')) {
+        const ruleText = currentRule.join('\n').trim();
+        currentSelectors.forEach(({ name, line: l }) => {
+          if (!selectors.has(name)) {
+            selectors.set(name, { line: l, rule: ruleText });
+          }
+        });
+        currentSelectors = [];
+        currentRule = [];
+        insideRule = false;
+      }
+    }
   }
 
   return selectors;
@@ -30,19 +81,29 @@ export function isJsStyleFile(content, filePath) {
 }
 
 function extractJsStyleKeys(content) {
-  const keys = new Set();
+  const keys = new Map(); // name → { line, rule }
+  const lines = content.split('\n');
 
-  // StyleSheet.create({ key: ... })
   const ssMatch = content.match(/StyleSheet\.create\s*\(\s*\{([\s\S]*?)\}\s*\)/);
-  // Plain object: const styles = { key: ... }
   const plainMatch = content.match(/(?:const|let|var)\s+styles?\s*=\s*\{([\s\S]*)\}/);
-
   const objectContent = ssMatch?.[1] ?? plainMatch?.[1];
+
   if (objectContent) {
+    // Find start offset in original content
+    const startOffset = content.indexOf(objectContent);
+    const preContent = content.slice(0, startOffset);
+    const startLine = preContent.split('\n').length;
+
     const keyRegex = /^\s*([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:/gm;
     let m;
     while ((m = keyRegex.exec(objectContent)) !== null) {
-      keys.add(m[1]);
+      const keyLine = startLine + objectContent.slice(0, m.index).split('\n').length - 1;
+      const name = m[1];
+      if (!keys.has(name)) {
+        // Grab the value snippet for context
+        const lineText = lines[keyLine - 1]?.trim() ?? '';
+        keys.set(name, { line: keyLine, rule: lineText });
+      }
     }
   }
 

package/src/reporter.js

@@ -43,10 +43,18 @@ export function generateReport(results, outputPath = 'orphan-report.md') {
     }
 
     if (hasOrphans) {
-      lines.push('**Orphaned selectors:**');
-      lines.push('');
-      orphaned.forEach(s => lines.push(`- \`.${s}\``));
-      lines.push('');
+      lines.push('### 👻 Orphaned selectors\n');
+
+      orphaned.forEach(({ name, line, rule }) => {
+        lines.push(`#### \`.${name}\` — line ${line}`);
+        lines.push('');
+        if (rule) {
+          lines.push('```css');
+          lines.push(rule);
+          lines.push('```');
+        }
+        lines.push('');
+      });
     }
 
     lines.push('---');
@@ -80,7 +88,23 @@ export function generateReport(results, outputPath = 'orphan-report.md') {
   const content = summary + sections.join('');
   writeFileSync(outputPath, content, 'utf-8');
 
+  // Console output — also print orphans inline
   console.log(`✅ Report written to ${outputPath}`);
-  console.log(`📊 ${totalOrphaned} orphaned selector${totalOrphaned !== 1 ? 's' : ''} across ${filesWithOrphans} file${filesWithOrphans !== 1 ? 's' : ''}`);
+  console.log(`📊 ${totalOrphaned} orphaned selector${totalOrphaned !== 1 ? 's' : ''} across ${filesWithOrphans} file${filesWithOrphans !== 1 ? 's' : ''}\n`);
+
+  for (const result of results) {
+    if (result.orphaned.length === 0) continue;
+    const relPath = relative(process.cwd(), result.filePath);
+    console.log(`📄 ${relPath}`);
+    result.orphaned.forEach(({ name, line, rule }) => {
+      console.log(`   👻 .${name} (line ${line})`);
+      if (rule) {
+        const preview = rule.split('\n').slice(0, 4).join('\n');
+        console.log(preview.split('\n').map(l => `      ${l}`).join('\n'));
+      }
+      console.log('');
+    });
+  }
+
   console.log(`📁 ${results.length} style file${results.length !== 1 ? 's' : ''} scanned\n`);
 }

package/src/scanner.js

@@ -55,7 +55,10 @@ export function scan(dirs) {
   for (const styleFile of styleFiles) {
     try {
       const { selectors, hasDynamic } = parseStyleFile(styleFile);
-      const orphaned = [...selectors].filter(s => !globalUsed.has(s));
+      // selectors is now a Map: name → { line, rule }
+      const orphaned = [...selectors.entries()]
+        .filter(([name]) => !globalUsed.has(name))
+        .map(([name, meta]) => ({ name, ...meta }));
 
       results.push({
         filePath: styleFile,

package/.devcontainer/devcontainer.json

@@ -1,35 +0,0 @@
-{
-  "name": "css-ghost",
-  "image": "mcr.microsoft.com/devcontainers/javascript-node:20",
-
-  "customizations": {
-    "vscode": {
-      "extensions": [
-        "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode",
-        "GitHub.github-vscode-theme",
-        "christian-kohler.path-intellisense",
-        "streetsidesoftware.code-spell-checker"
-      ],
-      "settings": {
-        "workbench.colorTheme": "GitHub Dark Dimmed",
-        "workbench.iconTheme": "vs-seti",
-        "editor.fontSize": 14,
-        "editor.tabSize": 2,
-        "editor.formatOnSave": true,
-        "editor.defaultFormatter": "esbenp.prettier-vscode",
-        "editor.minimap.enabled": false,
-        "editor.wordWrap": "on",
-        "terminal.integrated.defaultProfile.linux": "bash",
-        "files.exclude": {
-          "node_modules": true,
-          "orphan-report.md": true
-        }
-      }
-    }
-  },
-
-  "postCreateCommand": "echo '👻 css-ghost dev container ready. Run: node bin/css-ghost.js --help'",
-
-  "remoteUser": "node"
-}