@rolandjlevy/css-ghost 1.1.2 → 1.2.0

package/CHANGELOG.md

@@ -0,0 +1,50 @@
+# Changelog
+
+All notable changes to `@rolandjlevy/css-ghost` are documented here.
+
+---
+
+## [1.2.0] — 2026-10-17
+
+### Fixed
+
+- **SASS indented syntax** (`src/parser.js`) — `.sass` files previously returned 0 selectors because the parser required `{` to open a rule block. A new `extractSassIndentedSelectors()` branch parses the indentation-based syntax correctly, detecting top-level class selectors and collecting their rule bodies from the indented lines that follow.
+
+- **Vue and Svelte components not scanned** (`src/walker.js`) — `.vue` and `.svelte` files were excluded from the component walk, causing all selectors used only in Vue SFCs or Svelte components to appear as false positives. Both extensions are now included in `COMPONENT_EXTENSIONS`.
+
+- **`hasDynamic` flag contaminating unrelated files** (`src/scanner.js`) — when any component anywhere in the scan used `styles[variable]` or a template literal, every style file in the entire scan was tagged `hasDynamic: true`. The flag and the `dynamicFiles` list are now scoped to style files that share a directory with the dynamic component.
+
+- **Terminal output missing dynamic warning** (`src/reporter.js`) — the `⚠️ Dynamic class references detected` message appeared in the Markdown report but not in the terminal output. The warning now appears inline per file in the terminal, matching the Markdown behaviour.
+
+### Added
+
+- Comprehensive CLI test fixtures under `test/` covering all documented use-cases: SCSS, LESS, SASS indented syntax, React Native `StyleSheet.create()`, dynamic class access, hyphenated selectors, `clsx` (strings/objects/arrays), Vue SFC `:class` bindings, and Svelte `class:name` directives.
+
+---
+
+## [1.1.3] — 2026-10-16
+
+- Internal release; no public changelog entry.
+
+---
+
+## [1.1.0] — 2026-10-01
+
+### Added
+
+- `--ghost-trail` flag: shows the last git commit that touched each orphaned selector
+- `--ai` flag: appends an AI-generated summary via OpenRouter (run `--setup` once to save your key)
+- CSS custom property orphan detection (`--my-token` defined but never consumed via `var(--my-token)`)
+- `--install-hook` flag: writes a pre-commit hook that blocks commits when orphans are present
+
+---
+
+## [1.0.0] — 2026-09-01
+
+### Initial release
+
+- CSS selector orphan detection across `.css`, `.module.css`, `.scss`, `.sass`, `.less`, and JS style files (`StyleSheet.create`, `makeStyles`, vanilla-extract)
+- `--delete` / `--delete --yes` to remove orphaned selectors from source files
+- `--strict` flag for CI (exit code 1 when any orphans found)
+- `--output <file>` for custom Markdown report paths
+- Interactive folder picker when run with no arguments

package/README.md

@@ -6,26 +6,29 @@ Find and remove unused CSS selectors and orphaned CSS custom properties — sele
 
 Scans one or more directories for style files, extracts every class selector defined, then cross-references them against usages in your component files. Anything defined but never used is reported as an orphan — with its line number and the actual CSS printed inline.
 
-**Supported style files:**
+**Supported style files:** `.css`, `.module.css`, `.scss`, `.sass`, `.less`, `.js`/`.ts` using `StyleSheet.create({})` / `makeStyles({})` (MUI), `.css.ts`/`.css.js` using `style()` or `styleVariants()` (vanilla-extract)
 
-- `.css`, `.module.css`, `.scss`, `.sass`, `.less`
-- `.js` / `.ts` files using `StyleSheet.create({})`, `makeStyles({})` (MUI), or named style objects
-- `.css.ts` / `.css.js` files using `style()` or `styleVariants()` (vanilla-extract)
+**Detected usage patterns:** `className="foo"`, `className={styles.foo}`, `styles['foo']`, ternary patterns, `cx()` / `clsx()` / `classnames()` (strings, objects and arrays), `classes.foo` (MUI), vanilla-extract named imports, Vue `:class` bindings, Svelte `class:name` directives
 
-**Detected usage patterns:**
+**Dynamic class detection:** Patterns where the class name can't be resolved statically — `styles[variable]` or template literals with `${}` — are flagged with a ⚠️ warning per file in both the terminal output and the Markdown report.
 
-- `className="foo"`
-- `className={styles.foo}`
-- `styles['foo']`
-- `styles[condition ? 'foo' : 'bar']` — both branches extracted
-- `cx('foo')`, `clsx('foo')`, `classnames('foo')`
-- `cx({ active: isOn, disabled: true })` — object keys extracted
-- `cx(['foo', condition && 'bar'])` — array string literals extracted
-- `classes.foo` — MUI `makeStyles` / `useStyles` convention
-- `import { foo } from './styles.css'` — vanilla-extract named imports
+## Example output
 
-**Dynamic class detection:**
-Patterns where the class name is truly unknowable at parse time — `styles[variable]` or template literals containing `${}` — are flagged with a ⚠️ warning. All statically resolvable patterns (string literals, ternaries, object keys) are analysed without warnings.
+![css-ghost demo](./docs/demo.gif)
+
+When a component uses dynamic class access (`styles[variant]`), the file is flagged rather than reporting false positives:
+
+```
+✅ src/components/alert.module.css
+
+   ⚠️  Dynamic class references detected — results may be incomplete.
+   Dynamic references in: src/components/Alert.jsx
+
+   👻 .hidden (line 30)
+      .hidden { display: none; }
+```
+
+---
 
 ## How is this different from PurgeCSS?
 
@@ -37,16 +40,16 @@ css-ghost is a **source code auditor** — it finds dead selectors in your actua
 npx @rolandjlevy/css-ghost ./src
 ```
 
-| | PurgeCSS | css-ghost |
-|---|---|---|
-| Works on source files | ❌ Build output only | ✅ |
-| Zero config, no build step | ❌ Requires webpack / PostCSS | ✅ |
-| CSS custom property orphans | ❌ | ✅ |
-| Git history per orphan | ❌ | ✅ |
-| Pre-commit hook | ❌ | ✅ |
-| Deletes dead code for you | ❌ | ✅ |
-| MUI / vanilla-extract aware | ❌ | ✅ |
-| Safe with dynamic classes | ❌ Silently removes them | ✅ Flags with ⚠️ |
+|                             | PurgeCSS                      | css-ghost        |
+| --------------------------- | ----------------------------- | ---------------- |
+| Works on source files       | ❌ Build output only          | ✅               |
+| Zero config, no build step  | ❌ Requires webpack / PostCSS | ✅               |
+| CSS custom property orphans | ❌                            | ✅               |
+| Git history per orphan      | ❌                            | ✅               |
+| Pre-commit hook             | ❌                            | ✅               |
+| Deletes dead code for you   | ❌                            | ✅               |
+| MUI / vanilla-extract aware | ❌                            | ✅               |
+| Safe with dynamic classes   | ❌ Silently removes them      | ✅ Flags with ⚠️ |
 
 The two tools are complementary: PurgeCSS for trimming framework output at build time; css-ghost for auditing your own hand-written CSS throughout development.
 
@@ -54,19 +57,14 @@ The two tools are complementary: PurgeCSS for trimming framework output at build
 
 ## To enable AI features
 
-css-ghost can generate a plain English summary of your orphaned selectors using a free [OpenRouter](https://openrouter.ai) API key. Run the setup wizard once:
+Run the setup wizard once to save your free [OpenRouter](https://openrouter.ai) API key ([openrouter.ai/keys](https://openrouter.ai/keys)), then pass `--ai` to any scan:
 
 ```bash
 css-ghost --setup
-```
-
-It will prompt you to paste your key (free at [openrouter.ai/keys](https://openrouter.ai/keys)) and save it to `~/.css-ghost`. Then pass `--ai` to any scan:
-
-```bash
 css-ghost ./src --ai
 ```
 
-The AI summary appears in both the terminal output and the markdown report. The core scan always runs without a key — `--ai` is entirely optional.
+The AI summary appears in both the terminal output and the markdown report. The core scan always runs without a key.
 
 ## Install
 
@@ -102,44 +100,18 @@ css-ghost [directory] [directory2] ... [options]
 
 ## CSS variable orphan detection
 
-css-ghost also catches **orphaned CSS custom properties** — variables defined with `--my-token: value` but never consumed anywhere via `var(--my-token)`.
-
-Usages are detected across all file types: CSS, SCSS, JS, TS, JSX, TSX, Vue, Svelte, HTML. A variable defined in `variables.css` and used in a React component is correctly seen as _used_.
-
-```
-   🔮 --colour-danger-hover (line 8)
-      --colour-danger-hover: #dc2626;
-
-   🔮 --spacing-xl (line 26)
-      --spacing-xl: 64px;
-```
-
-Orphaned variables appear under a separate **🔮 Orphaned CSS variables** section in both the terminal output and the markdown report.
-
----
+css-ghost also catches **orphaned CSS custom properties** — variables defined with `--my-token: value` but never consumed via `var(--my-token)` anywhere in the codebase. Usages are detected across all file types: CSS, SCSS, JS, TS, JSX, TSX, Vue, Svelte, HTML. Orphaned variables appear under a **🔮 Orphaned CSS variables** section in both the terminal output and the markdown report.
 
 ## Ghost trail — git history for orphans
 
-Pass `--ghost-trail` to fetch the last git commit that changed each orphan's occurrence count in the codebase. For class-name orphans the search is limited to component file types (`.tsx`, `.jsx`, `.ts`, `.js`, etc.) so the result reflects _usage_ history rather than the style-file definition.
+Pass `--ghost-trail` to fetch the last git commit that changed each orphan's occurrence count:
 
 ```bash
 css-ghost ./src --ghost-trail
 ```
 
-```
-   👻 .iconRight (line 28)
-      🕵️  b5c6efb · Roland Levy · 3 weeks ago — "Refactor Button component"
-      .iconRight {
-        margin-left: 6px;
-      }
-```
-
-For CSS variables the search looks for `var(--name` across all file types.
-
 > **Note:** ghost trail runs one `git log -S` per orphan in parallel. On large histories with many orphans it may take a few seconds.
 
----
-
 ## Pre-commit hook
 
 Install a hook that blocks commits when orphaned selectors are present:
@@ -148,255 +120,60 @@ Install a hook that blocks commits when orphaned selectors are present:
 css-ghost --install-hook ./src
 ```
 
-This writes `.git/hooks/pre-commit` (executable, `chmod 755`) containing:
-
-```sh
-#!/bin/sh
-echo "👻  css-ghost — checking for orphaned CSS selectors..."
-npx --yes @rolandjlevy/css-ghost ./src --strict --output /tmp/css-ghost-hook-report.md
-
-if [ $? -ne 0 ]; then
-  echo "❌  Commit blocked: orphaned CSS selectors found"
-  echo "    Run 'css-ghost ./src --delete' to remove them"
-  echo "    Or skip: git commit --no-verify"
-  exit 1
-fi
-```
-
-Pass multiple directories to the hook installer the same way you would to a normal scan:
-
-```bash
-css-ghost --install-hook ./src ./components ./pages
-```
-
-To uninstall: `rm .git/hooks/pre-commit`
+This writes `.git/hooks/pre-commit` (executable, `chmod 755`). Pass multiple directories the same way you would to a normal scan. To uninstall: `rm .git/hooks/pre-commit`
 
 ### `--strict` flag
 
-`--strict` makes css-ghost exit with code 1 when any orphans are found — the mechanism the hook depends on, but also useful in CI workflows independently:
+Exit with code 1 when any orphans are found — the mechanism the hook depends on, also useful in CI:
 
 ```bash
-# In CI: fail the build if orphans exist
 css-ghost ./src --strict
 ```
 
----
-
 ## Interactive folder picker
 
-Run `css-ghost` with no arguments and an arrow-key picker opens in your terminal:
-
-```
-📂 Directory picker  — navigate into a folder, then press [a] to add it
-
-📍 /home/user/my-project
-
-    📁 components
-  ▶  📁 src
-    📁 styles
-
-✅ Added to scan:
-   /home/user/my-project/src
-
-[↑↓/jk] navigate  [↵/→] enter  [←] parent  [a] add current dir  [d] done  [^C] quit
-```
-
-| Key                    | Action                                  |
-| ---------------------- | --------------------------------------- |
-| `↑` / `↓` or `k` / `j` | Move up and down the folder list        |
-| `↵` or `→`             | Enter the highlighted folder            |
-| `←` or Backspace       | Go up to the parent folder              |
-| `a`                    | Add the current folder to the scan list |
-| `d`                    | Done — start the scan                   |
-| `Ctrl+C`               | Quit without scanning                   |
-
-You can add **multiple folders** before pressing `d` — just navigate to each one and press `a`. If you press `d` without adding anything, the folder you're currently browsing is used.
+Run `css-ghost` with no arguments to open an arrow-key picker. Navigate with `↑↓`, enter with `↵`, press `a` to add the current folder to the scan list, `d` to start the scan. Add multiple folders before pressing `d`.
 
 ## Deleting orphans
 
-Pass `--delete` after a scan to remove every flagged selector directly from its source file:
-
 ```bash
-css-ghost ./src --delete
+css-ghost ./src --delete        # prints report, then asks for confirmation
+css-ghost ./src --delete --yes  # skip the prompt (CI / scripts)
 ```
 
-css-ghost prints the full report first, then lists what will be deleted and asks for confirmation before touching anything. Pass `--yes` to skip the prompt (useful in CI or scripts):
-
-```bash
-css-ghost ./src --delete --yes
-```
-
-Works across all supported file types — `.css`, `.scss`, `.less`, MUI `makeStyles`, and vanilla-extract exports.
-
 > **Tip:** commit or stash your work before running `--delete`. There is no undo.
 
 ## Examples
 
 ```bash
-# Interactive folder picker (no args)
-css-ghost
-
-# Scan your src folder
-css-ghost ./src
-
-# Show git history for each orphan
-css-ghost ./src --ghost-trail
-
-# Fail with exit code 1 when orphans exist (CI)
-css-ghost ./src --strict
-
-# Install a pre-commit hook that scans ./src
-css-ghost --install-hook ./src
-
-# Scan and delete all orphans (with confirmation prompt)
-css-ghost ./src --delete
-
-# Scan and delete without prompting
-css-ghost ./src --delete --yes
-
-# Scan multiple directories
-css-ghost ./src ./components ./pages
-
-# With AI summary
-css-ghost ./src --ai
-
-# Write report to a custom path
-css-ghost ./src --output ./reports/css-audit.md
+css-ghost                              # interactive folder picker
+css-ghost ./src                        # scan a folder
+css-ghost ./src --ghost-trail          # show git history per orphan
+css-ghost ./src --strict               # CI: exit 1 on any orphan
+css-ghost --install-hook ./src         # install pre-commit hook
+css-ghost ./src --delete               # remove orphans (with prompt)
+css-ghost ./src --delete --yes         # remove without prompting
+css-ghost ./src ./components ./pages   # scan multiple directories
+css-ghost ./src --ai                   # with AI summary
+css-ghost ./src --output ./reports/audit.md
 ```
 
-## CLI output
-
-Running `css-ghost ./src` prints a live summary to your terminal:
-
-```
-✅ Report written to orphan-report.md
-📊 3 orphaned selectors across 1 file
-
-📄 src/components/Button/Button.module.css
-   👻 .iconLeft (line 4)
-      .iconLeft {
-        margin-right: 6px;
-        flex-shrink: 0;
-      }
-
-   👻 .loadingSpinner (line 12)
-      .loadingSpinner {
-        animation: spin 0.8s linear infinite;
-      }
-
-   👻 .disabled (line 18)
-      .disabled {
-        opacity: 0.4;
-        pointer-events: none;
-      }
-
-📁 1 style file scanned
-💾 Potential savings: 3 selectors removed
-```
-
-Each orphan shows:
-
-- the selector name and the **exact line number** where it's defined
-- the **full CSS rule** so you can see what it does before deciding to delete it
-
-## Markdown report
-
-A full report is also written to `orphan-report.md` (or your `--output` path):
-
----
-
-### 👻 Orphaned selectors
-
-#### `.iconLeft` — line 4
-
-```css
-.iconLeft {
-  margin-right: 6px;
-  flex-shrink: 0;
-}
-```
-
-#### `.loadingSpinner` — line 12
-
-```css
-.loadingSpinner {
-  animation: spin 0.8s linear infinite;
-}
-```
-
----
-
 ## Using with npm scripts
 
-If you're working inside the project itself, add a `scan` script to `package.json`:
-
 ```json
 "scripts": {
   "scan": "css-ghost ./src"
 }
 ```
 
-Then run:
-
 ```bash
-npm run scan
-
-# Pass extra args with --
 npm run scan -- --output ./reports/audit.md
 ```
 
-## Troubleshooting
-
-### `css-ghost: command not found` after global install
-
-Your npm global bin directory may not be on your PATH. Run:
-
-```bash
-npm bin -g
-```
-
-Then add that path to your shell config (`~/.zshrc`, `~/.bashrc`, etc.):
-
-```bash
-export PATH="$(npm bin -g):$PATH"
-```
-
-Reload with `source ~/.zshrc`. This is a one-time fix — it won't be needed again after that.
-
-> This is common when Node was installed via the official installer rather than nvm or Homebrew.
-
 ## Dependencies
 
 One runtime dependency: [`picocolors`](https://github.com/alexeyraspopov/picocolors) for terminal colours. Everything else uses Node.js built-ins (`fs`, `path`, `readline`).
 
-## Origin — built with OpenRouter free models via Claude Code
-
-This tool was created as a test project to explore [using OpenRouter's free model tier with Claude Code](https://www.mindstudio.ai/blog/open-router-free-models-claude-code-cost-reduction) as a way to cut AI development costs.
-
-Claude Code normally calls Anthropic's API directly. By overriding two environment variables you can route it through OpenRouter's free tier instead — meaning you can run agentic coding sessions at no cost.
-
-If you've already run `css-ghost --setup`, you have an OpenRouter key. You can also export it as an environment variable — css-ghost picks it up automatically, so you don't even need `--setup`:
-
-```bash
-export OPENROUTER_API_KEY="sk-or-v1-YOUR_KEY"
-```
-
-And you can reuse the same key with Claude Code by adding these aliases to your `~/.zshrc`:
-
-```bash
-alias claude-free='ANTHROPIC_BASE_URL="https://openrouter.ai/api/v1" \
-  ANTHROPIC_API_KEY="$OPENROUTER_API_KEY" \
-  claude --model "nvidia/nemotron-3.5-lightning:free"'
-
-alias claude-r1='ANTHROPIC_BASE_URL="https://openrouter.ai/api/v1" \
-  ANTHROPIC_API_KEY="$OPENROUTER_API_KEY" \
-  claude --model "qwen/qwen3.8-27b:free"'
-```
-
-Then `source ~/.zshrc`. Use `claude-free` or `claude-r1` in place of `claude` to start a free session.
-
-> **Note:** Free model availability changes frequently. Browse current options at [openrouter.ai/models](https://openrouter.ai/models?q=free) — filter by `:free`.
-
 ## License
 
 [MIT](./LICENSE)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolandjlevy/css-ghost",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Find and remove unused CSS selectors and orphaned CSS custom properties — a CLI linter and auditor for React, Vue, Svelte, SCSS, and CSS Modules",
   "type": "module",
   "bin": {
@@ -18,6 +18,7 @@
     "bin",
     "src",
     "README.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   "keywords": [

package/src/deleter.js

@@ -36,10 +36,42 @@ function findBlockEnd(lines, startIdx) {
 
 // ─── CSS / SCSS / LESS ───────────────────────────────────────────────────────
 
-function deleteFromCssFile(filePath, orphans) {
+// Return the start index of a comment block (/* ... */) that sits immediately
+// before `idx` in `content` (separated only by whitespace/newlines), or -1.
+function findPrecedingComment(content, idx) {
+  // Walk backwards over whitespace
+  let i = idx - 1;
+  while (i >= 0 && /[\s]/.test(content[i])) i--;
+
+  if (i < 1 || content[i] !== '/' || content[i - 1] !== '*') return -1;
+
+  // Found the end of a block comment — now find its start
+  const closePos = i - 1; // position of '*/'  second char
+  const openPos = content.lastIndexOf('/*', closePos);
+  return openPos === -1 ? -1 : openPos;
+}
+
+// Delete individual CSS declarations (e.g. `  --token: value;\n`) from content.
+function deleteCssDeclarations(content, varNames) {
+  let removed = 0;
+  for (const name of varNames) {
+    // Match `  --name: anything up to semicolon;\n?` including leading whitespace
+    const re = new RegExp(`[ \\t]*${escapeRegex(name)}\\s*:[^;]*;[ \\t]*\\n?`, 'g');
+    const next = content.replace(re, () => { removed++; return ''; });
+    if (next !== content) content = next;
+  }
+  return { content, removed };
+}
+
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function deleteFromCssFile(filePath, orphans, orphanedVarNames = []) {
   let content = readFileSync(filePath, 'utf-8');
   let removed = 0;
 
+  // ── 1. Delete orphaned class/selector rules ────────────────────────────────
   // Sort longest rules first so that nested/contained rules don't mis-match.
   const sorted = [...orphans].sort((a, b) => (b.rule?.length ?? 0) - (a.rule?.length ?? 0));
 
@@ -48,13 +80,24 @@ function deleteFromCssFile(filePath, orphans) {
     const idx = content.indexOf(rule);
     if (idx === -1) continue;
 
-    const before = content.slice(0, idx);
+    // Bug fix: also remove a comment block immediately preceding the rule.
+    const commentStart = findPrecedingComment(content, idx);
+    const deleteFrom   = commentStart !== -1 ? commentStart : idx;
+
+    const before = content.slice(0, deleteFrom);
     const after  = content.slice(idx + rule.length);
     // Eat one trailing newline so we don't leave double-blank-lines everywhere.
     content = before + after.replace(/^\n/, '');
     removed++;
   }
 
+  // ── 2. Delete orphaned CSS variable declarations ───────────────────────────
+  if (orphanedVarNames.length > 0) {
+    const { content: next, removed: varRemoved } = deleteCssDeclarations(content, orphanedVarNames);
+    content = next;
+    removed += varRemoved;
+  }
+
   writeFileSync(filePath, normalise(content), 'utf-8');
   return removed;
 }
@@ -110,23 +153,27 @@ function deleteFromVeFile(filePath, orphans) {
 // ─── Public API ──────────────────────────────────────────────────────────────
 
 export async function deleteOrphans(results, { yes = false } = {}) {
-  const toDelete = results.filter(r => r.orphaned.length > 0);
+  // A file is eligible for deletion if it has orphaned selectors OR orphaned vars.
+  const toDelete = results.filter(r => r.orphaned.length > 0 || (r.orphanedVars?.length ?? 0) > 0);
 
   if (toDelete.length === 0) {
     console.log('Nothing to delete.\n');
     return 0;
   }
 
-  const totalCount = toDelete.reduce((n, r) => n + r.orphaned.length, 0);
-
   console.log(
-    `\n${pc.bold('🗑️  The following orphaned selectors will be permanently deleted:')}\n`
+    `\n${pc.bold('🗑️  The following orphaned selectors and CSS variables will be permanently deleted:')}\n`
   );
 
-  for (const { filePath, orphaned } of toDelete) {
+  for (const { filePath, orphaned, orphanedVars } of toDelete) {
     const rel = relative(process.cwd(), filePath);
     console.log(`  ${pc.bold(rel)}`);
-    orphaned.forEach(o => console.log(`    ${pc.yellow('•')} .${o.name} ${pc.dim(`(line ${o.line})`)}`));
+    orphaned.forEach(o =>
+      console.log(`    ${pc.yellow('•')} .${o.name} ${pc.dim(`(line ${o.line})`)}`)
+    );
+    (orphanedVars ?? []).forEach(o =>
+      console.log(`    ${pc.magenta('•')} ${o.name} ${pc.dim(`(line ${o.line})`)}`)
+    );
   }
 
   if (!yes) {
@@ -142,25 +189,27 @@ export async function deleteOrphans(results, { yes = false } = {}) {
   console.log('');
   let totalRemoved = 0;
 
-  for (const { filePath, orphaned } of toDelete) {
-    const ext    = extname(filePath);
-    const rel    = relative(process.cwd(), filePath);
+  for (const { filePath, orphaned, orphanedVars } of toDelete) {
+    const ext         = extname(filePath);
+    const rel         = relative(process.cwd(), filePath);
+    const varNames    = (orphanedVars ?? []).map(v => v.name);
+    const totalExpected = orphaned.length + varNames.length;
     let removed;
 
     try {
       if (['.css', '.scss', '.sass', '.less'].includes(ext)) {
-        removed = deleteFromCssFile(filePath, orphaned);
+        removed = deleteFromCssFile(filePath, orphaned, varNames);
       } else if (/\.css\.(ts|js)x?$/.test(filePath)) {
         removed = deleteFromVeFile(filePath, orphaned);
       } else {
         removed = deleteFromJsFile(filePath, orphaned);
       }
 
-      const label = removed === orphaned.length
+      const label = removed === totalExpected
         ? pc.green(`✂️  ${rel}`)
         : pc.yellow(`✂️  ${rel}`);
-      const note  = removed < orphaned.length
-        ? pc.dim(` (${orphaned.length - removed} could not be located — check manually)`)
+      const note  = removed < totalExpected
+        ? pc.dim(` (${totalExpected - removed} could not be located — check manually)`)
         : '';
       console.log(`${label} — removed ${removed}${note}`);
       totalRemoved += removed;
@@ -169,8 +218,9 @@ export async function deleteOrphans(results, { yes = false } = {}) {
     }
   }
 
+  const noun = totalRemoved === 1 ? 'item' : 'items';
   console.log(
-    `\n${pc.green(pc.bold(`✅ Done.`))} Removed ${totalRemoved} orphaned selector${totalRemoved !== 1 ? 's' : ''}.\n`
+    `\n${pc.green(pc.bold(`✅ Done.`))} Removed ${totalRemoved} orphaned ${noun}.\n`
   );
 
   return totalRemoved;

package/src/parser.js

@@ -53,6 +53,58 @@ export function extractVarUsages(content) {
 
 // ─── CSS / SCSS selector extraction ────────────────────────────────────────
 
+/**
+ * Parse SASS indented syntax (.sass) — no braces, indentation defines blocks.
+ * Class selectors appear at the start of a line (after optional whitespace),
+ * followed by indented property lines.
+ */
+function extractSassIndentedSelectors(content) {
+  const selectors = new Map();
+  const lines = content.split('\n');
+
+  // Strip // single-line comments (SASS uses // as well as /* */)
+  const stripped = content
+    .replace(/\/\*[\s\S]*?\*\//g, m => m.replace(/[^\n]/g, ' '))
+    .split('\n')
+    .map(l => l.replace(/\/\/.*$/, ''));
+
+  let i = 0;
+  while (i < stripped.length) {
+    const raw = stripped[i];
+    const trimmed = raw.trimStart();
+    const indent = raw.length - trimmed.length;
+
+    // A class selector: zero or shallow indent, starts with "."
+    if (indent === 0 && trimmed.startsWith('.')) {
+      const m = trimmed.match(/^\.([a-zA-Z_-][a-zA-Z0-9_-]*)/);
+      if (m) {
+        const name = m[1];
+        const lineNum = i + 1;
+        // Collect the rule block: this line + indented lines that follow
+        const ruleLines = [lines[i]];
+        let j = i + 1;
+        while (j < lines.length) {
+          const nextRaw = stripped[j];
+          if (nextRaw.trim() === '') { j++; continue; }
+          const nextIndent = nextRaw.length - nextRaw.trimStart().length;
+          if (nextIndent > indent) {
+            ruleLines.push(lines[j]);
+            j++;
+          } else {
+            break;
+          }
+        }
+        if (!selectors.has(name)) {
+          selectors.set(name, { line: lineNum, rule: ruleLines.join('\n').trim() });
+        }
+      }
+    }
+    i++;
+  }
+
+  return selectors;
+}
+
 function extractCssSelectors(content) {
   const selectors = new Map(); // name → { line, rule }
   const lines = content.split('\n');
@@ -259,14 +311,14 @@ export function extractUsages(content) {
     used.add(m[1]);
   }
 
-  // styles['foo'] or styles["foo"]
-  const bracketStringRegex = /styles?\[['"]([a-zA-Z_$][a-zA-Z0-9_$]*)['"]]/g;
+  // styles['foo'] or styles["foo"] — includes hyphenated names (e.g. styles['btn-primary'])
+  const bracketStringRegex = /styles?\[['"]([a-zA-Z_$][a-zA-Z0-9_$-]*)['"]]/g;
   while ((m = bracketStringRegex.exec(content)) !== null) {
     used.add(m[1]);
   }
 
   // styles[condition ? 'foo' : 'bar'] — ternary with string literals: extract both branches
-  const ternaryBracketRegex = /styles?\[\s*[^?]+\?\s*['"]([a-zA-Z_$][a-zA-Z0-9_$]*)["']\s*:\s*['"]([a-zA-Z_$][a-zA-Z0-9_$]*)["']\s*\]/g;
+  const ternaryBracketRegex = /styles?\[\s*[^?]+\?\s*['"]([a-zA-Z_$][a-zA-Z0-9_$-]*)["']\s*:\s*['"]([a-zA-Z_$][a-zA-Z0-9_$-]*)["']\s*\]/g;
   while ((m = ternaryBracketRegex.exec(content)) !== null) {
     used.add(m[1]);
     used.add(m[2]);
@@ -324,7 +376,7 @@ export function parseStyleFile(filePath) {
   const content = readFileSync(filePath, 'utf-8');
   const ext = extname(filePath);
 
-  if (['.css', '.scss', '.sass', '.less'].includes(ext)) {
+  if (['.css', '.scss', '.less'].includes(ext)) {
     return {
       selectors: extractCssSelectors(content),
       cssVars:   extractCssVarDefinitions(content),
@@ -333,6 +385,16 @@ export function parseStyleFile(filePath) {
     };
   }
 
+  // SASS indented syntax — no braces; needs its own parser branch
+  if (ext === '.sass') {
+    return {
+      selectors: extractSassIndentedSelectors(content),
+      cssVars:   extractCssVarDefinitions(content),
+      varUsages: extractVarUsages(content),
+      hasDynamic: false,
+    };
+  }
+
   // JS/TS style file — CSS custom properties are not typically defined here
   const selectors = extractJsStyleKeys(content);
   return { selectors, cssVars: new Map(), varUsages: new Set(), hasDynamic: false };

package/src/reporter.js

@@ -197,7 +197,7 @@ export function generateReport(results, outputPath = 'orphan-report.md', aiSumma
   }
 
   for (const result of results) {
-    const { orphaned, orphanedVars = [], trails, varTrails } = result;
+    const { orphaned, orphanedVars = [], trails, varTrails, hasDynamic, dynamicFiles } = result;
     if (orphaned.length === 0 && orphanedVars.length === 0) continue;
 
     const relPath = relative(process.cwd(), result.filePath);
@@ -207,6 +207,17 @@ export function generateReport(results, outputPath = 'orphan-report.md', aiSumma
       : '';
     console.log(`✅ ${pc.bold(relPath)}${savingsSuffix}\n`);
 
+    if (hasDynamic) {
+      console.log(`   ${pc.yellow('⚠️  Dynamic class references detected — results may be incomplete.')}`);
+      if (dynamicFiles?.length > 0) {
+        const relDynamic = dynamicFiles
+          .map(f => `${relative(process.cwd(), f)}`)
+          .join(', ');
+        console.log(pc.dim(`   Dynamic references in: ${relDynamic}`));
+      }
+      console.log('');
+    }
+
     orphaned.forEach(({ name, line, rule }) => {
       console.log(`   👻 ${pc.yellow('.' + name)} ${pc.dim(`(line ${line})`)}`);
       const trail = trails?.[name];

package/src/scanner.js

@@ -1,5 +1,5 @@
 import { readFileSync } from 'fs';
-import { extname } from 'path';
+import { extname, dirname } from 'path';
 import { walkDir } from './walker.js';
 import { parseStyleFile, parseComponentFile, isJsStyleFile } from './parser.js';
 
@@ -75,6 +75,12 @@ export function scan(dirs) {
   }
 
   // ── PASS 3: Cross-reference and build results ─────────────────────────────
+  // Build a Set of directories that contain dynamic components, so we can
+  // scope the hasDynamic flag to style files that share a directory — rather
+  // than tagging every style file in the entire scan when just one component
+  // anywhere uses dynamic class access.
+  const dynamicDirs = new Set(dynamicComponentFiles.map(f => dirname(f)));
+
   const results = [];
 
   for (const styleFile of styleFiles) {
@@ -82,6 +88,13 @@ export function scan(dirs) {
     if (!parsed) continue;
 
     const { selectors, cssVars, hasDynamic } = parsed;
+    const styleDir = dirname(styleFile);
+
+    // Only the dynamic components co-located with this style file are relevant
+    const localDynamicFiles = dynamicComponentFiles.filter(
+      f => dirname(f) === styleDir
+    );
+    const localHasDynamic = hasDynamic || dynamicDirs.has(styleDir);
 
     // Orphaned class selectors
     const orphaned = [...selectors.entries()]
@@ -101,8 +114,8 @@ export function scan(dirs) {
       orphaned,
       orphanedVars,
       totalVars: cssVars?.size ?? 0,
-      hasDynamic: hasDynamic || dynamicComponentFiles.length > 0,
-      dynamicFiles: dynamicComponentFiles,
+      hasDynamic: localHasDynamic,
+      dynamicFiles: localDynamicFiles,
     });
   }
 

package/src/walker.js

@@ -2,7 +2,7 @@ import { readdirSync } from 'fs';
 import { join, extname, basename } from 'path';
 
 const STYLE_EXTENSIONS = ['.css', '.scss', '.sass', '.less'];
-const COMPONENT_EXTENSIONS = new Set(['.js', '.jsx', '.ts', '.tsx']);
+const COMPONENT_EXTENSIONS = new Set(['.js', '.jsx', '.ts', '.tsx', '.vue', '.svelte']);
 const IGNORE_DIRS = new Set(['node_modules', '.git', 'dist', 'build', '.next', 'out', 'coverage', '.cache']);
 
 export function walkDir(dir) {