Stop guessing which CSS rules apply to your HTML. Stop copy-pasting 5,000 lines of code.
CodeScoop is a forensic tool for your frontend. It extracts the dependency graph of a single component—HTML, specific CSS rules, JS events, and variables—so you can debug legacy sites or feed clean context to an LLM.
The Problem
You are trying to fix a bug in a legacy WordPress header, or convert it to Next.js.
- The Debugging Nightmare: You see class="btn", but where is the style coming from? style.css? bootstrap.min.css? An inline script?
- The AI Nightmare: You paste the HTML into ChatGPT. It hallucinates CSS that doesn't exist or misses the JS logic entirely because you didn't paste the right file.
The Solution
``bash
codescoop index.html -s "header"
`
One command. Complete context.
CodeScoop analyzes your project and generates a forensic report containing:
* The exact HTML structure
* The Winning CSS: Specificity scoring shows you exactly which rule wins (and which are overridden)
Ghost Classes: Identifies classes in HTML that have no* matching CSS
* JS Forensics: Finds jQuery listeners and vanilla JS events targeting your elements
* Variable Resolution: Inlines values for var(--primary) so you don't need to hunt them down
* Asset Inventory: Lists all images, videos, fonts, canvas elements with availability status
---
Key Features
$3
Don't just list files. Solve specificity wars. CodeScoop calculates specificity scores for every matching rule so you can see exactly why your style isn't applying.
$3
Cleaning up legacy code? CodeScoop flags classes in your HTML that have zero matching CSS rules in your project. Delete them with confidence.
$3
CodeScoop automatically extracts and checks all assets from your component:
* Images: From , CSS background-image, video posters
* Media: Videos, audio files with availability status
* Fonts: CSS @font-face references
* Canvas/WebGL: Detects canvas elements for 3D rendering context
* SVG: Inline and external SVG graphics
For Debugging: See which images are missing (404) and where they're referenced
For AI Conversion: LLM gets complete asset list to include in React components
$3
It doesn't dump the whole file. It extracts only the rules that affect your specific component.
Result:* A 50-line context file instead of a 5,000-line dump.
$3
If you are migrating, this flag analyzes JS patterns and suggests:
* State variables (useState)
* Event handlers to implement
* Animation libraries to install
* Shadow DOM: Native support for ::part() and ::slotted() selectors allows you to analyze Web Components styling.
* CSS Houdini: Detects and reports custom properties defined with @property, preserving their type syntax and initial values.
---
Quick Start
`bash
npm install -g codescoop
1. Debug a specific component
codescoop page.html -s ".navbar"
2. Analyze a live site (e.g., WordPress local dev)
| Option | Short | Description |
| --- | --- | --- |
| --selector | -s | CSS selector to target |
| --dir | -d | Project directory to scan (Required for live URLs) |
| --for-conversion | | Add React/Next.js migration hints |
| --compact | -c | Minimal output (hides long code blocks) |
| --summary-only | | Just list files and ghost classes |
| --skip-minified | | Exclude .min.css / .min.js |
| --max-rules | | Max CSS rules per file (Default: 50) |
---
Why Not Just Copy-Paste?
| Feature | Manual Copy-Paste | CodeScoop |
| --- | --- | --- |
| Context | Partial (whatever you see) | Complete (hidden dependencies) |
| CSS Conflicts | Guesswork | Specificity Scoring |
| Dead Code | Hard to find | Ghost Class Detection |
| Variables | Undefined | Auto-resolved |
| Time | 15+ mins per component | < 10 seconds |
---
---
How CodeScoop Handles Complexity (The "Black Holes")
Frontend analysis is hard. Here is how CodeScoop solves the common "black holes" that break other tools:
$3
* Problem: Classes like .is-open are often added by JS and missing from static HTML.
Solution: CodeScoop uses Greedy Prefix Matching. If you target .menu, we automatically find .menu.is-open, .menu:hover, and .menu::before. We also filter common state classes (is-, has-*) to prevent false alarms.
$3
* Problem: BEM syntax like &__item is invisible to standard regex searches.
* Solution: We implement AST Resolution. CodeScoop parses your SCSS, unwraps the & nesting, and resolves the actual selector (e.g., resolving &__item to .block__item) to ensure no rule is left behind.
$3
* Problem: Utility classes (p-4, flex) clutter reports and look like "missing" styles if not built.
* Solution: Our Smart Filter distinguishes between likely utility classes (Tailwind/Bootstrap patterns) and your actual missing custom styles, keeping your "Ghost Class" report clean and actionable.
$3
* Problem: Styles buried 5 levels deep in @import chains are often missed.
* Solution: CodeScoop performs a Deep Project Scan, indexing every CSS/SCSS file in your directory to find relevant rules regardless of where they are imported.
$3
* Problem: Modern features like Shadow DOM (::part) and CSS Houdini (@property) are often ignored by traditional parsers.
* Solution: CodeScoop includes native support for these features, correctly identifying ::part() and ::slotted() rules and extracting structured @property definitions.
$3
* Problem: Build-time hashing (CSS Modules: Button_primary_a8f3d) and runtime CSS-in-JS (Styled Components: sc-bdVaJa) create dynamic class names that look like "missing" CSS to static analyzers.
* Solution: Our Smart Filter recognizes 50+ patterns including:
* CSS Modules hashes (_hash suffix patterns)
* Styled Components (sc-xxxxx)
* Emotion (emotion-0, css-xxxxx)
* JSS (jss0, jss1)
These are excluded from Ghost Class reports, keeping output focused on actual issues.
---
What We DON'T Handle (And Why)
While CodeScoop solves 95%+ of CSS analysis problems, some scenarios are outside the scope of static analysis:
$3
Example:styled.div\color: ${props => props.color};\ * Why: Styles are generated at runtime based on component props/state. No static CSS file exists to analyze.
* Workaround: Use --for-conversion mode which hints at CSS-in-JS patterns in your JavaScript.
$3
Example:element.classList.add('dynamic-class-' + userId) * Why: Class names are computed at runtime. Static analysis can't predict all possible values.
* Impact: These may appear as "Ghost Classes" if not defined in your CSS.
* Workaround: Use js- or is- prefixes for JS-generated classes (auto-filtered).
$3
Why: Line numbers from the original source are "good enough" for debugging. Parsing .css.map files adds significant complexity for minimal benefit.
$3
Example:@custom-media --mobile (max-width: 768px); * Why: Requires PostCSS plugin preprocessing. Very low adoption (< 1% of sites).
* Status: Not planned unless adoption increases.