codescoop 1.0.0 → 1.0.3

package/README.md

@@ -31,6 +31,7 @@ CodeScoop analyzes your project and generates a forensic report containing:
 * **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
 
 ---
 
@@ -44,6 +45,20 @@ Don't just list files. **Solve specificity wars.** CodeScoop calculates specific
 
 Cleaning up legacy code? CodeScoop flags classes in your HTML that have **zero matching CSS rules** in your project. Delete them with confidence.
 
+### Asset Extraction & Verification
+
+CodeScoop automatically extracts and checks all assets from your component:
+
+* **Images:** From `<img>`, 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
+
 ### Smart Extraction
 
 It doesn't dump the whole file. It extracts *only* the rules that affect your specific component.
@@ -228,17 +243,51 @@ Frontend analysis is hard. Here is how CodeScoop solves the common "black holes"
 *   **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.
 
+### 6. CSS Modules & CSS-in-JS Detection
+*   **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:
+
+### Runtime CSS-in-JS Generation
+**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.
+
+### Dynamic className Manipulation
+**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).
+
+### Source Maps
+**Why:** Line numbers from the original source are "good enough" for debugging. Parsing `.css.map` files adds significant complexity for minimal benefit.
+
+### CSS Custom Media Queries (Draft Spec)
+**Example:** `@custom-media --mobile (max-width: 768px);`
+*   **Why:** Requires PostCSS plugin preprocessing. Very low adoption (< 1% of sites).
+*   **Status:** Not planned unless adoption increases.
+
 ---
 
 ## Contributing
 
 Found a bug? Want a feature? PRs welcome!
-
-```bash
-git clone https://github.com/yourusername/codescoop.git
-cd codescoop && npm install
-node bin/codescoop.js test/sample.html -s ".navbar"
-```
+ 
+ ```bash
+ git clone https://github.com/lumos021/codescoop.git
+ cd codescoop && npm install
+ node bin/codescoop.js test/sample.html -s ".navbar"
+ ```
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codescoop",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "Extract HTML component dependencies for AI-powered React/Next.js conversion",
   "main": "src/index.js",
   "bin": {
@@ -38,16 +38,16 @@
     "blade",
     "twig"
   ],
-  "author": "",
+  "author": "Lumos021",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/yourusername/codescoop.git"
+    "url": "https://github.com/lumos021/codescoop.git"
   },
   "bugs": {
-    "url": "https://github.com/yourusername/codescoop/issues"
+    "url": "https://github.com/lumos021/codescoop/issues"
   },
-  "homepage": "https://github.com/yourusername/codescoop#readme",
+  "homepage": "https://github.com/lumos021/codescoop#readme",
   "engines": {
     "node": ">=16.0.0"
   },

package/src/index.js

@@ -182,7 +182,37 @@ async function runAnalysis(options) {
     const variableData = await extractVariablesFromMatches(allCSSMatches, allCSSFiles, projectDir);
     log(`Found ${variableData.usedVariables.length} variables used`);
 
-    // Step 11: Generate markdown output
+    // Step 11: Extract and check assets
+    log('\nExtracting assets...');
+    const { extractCSSAssets } = require('./parsers/css-analyzer');
+    const { checkAssetAvailability } = require('./utils/asset-checker');
+
+    // Get HTML assets (already extracted in targetInfo)
+    const htmlAssets = targetInfo.assets || { images: [], videos: [], audio: [], icons: [], canvas: [], svgs: [] };
+
+    // Extract CSS assets
+    const cssAssets = extractCSSAssets(cssResults);
+
+    // Combine all assets
+    const allAssets = [
+        ...htmlAssets.images.map(a => ({ ...a, source: 'html' })),
+        ...htmlAssets.videos.map(a => ({ ...a, source: 'html' })),
+        ...htmlAssets.audio.map(a => ({ ...a, source: 'html' })),
+        ...htmlAssets.icons.map(a => ({ ...a, source: 'html' })),
+        ...cssAssets.map(a => ({ ...a, source: 'css' }))
+    ];
+
+    // Check asset availability
+    const assetStatus = await checkAssetAvailability(
+        allAssets,
+        projectDir || process.cwd(),
+        htmlPath,
+        { checkRemote: false } // Can be controlled by CLI flag later
+    );
+
+    log(`Assets: ${assetStatus.total} total, ${assetStatus.available} available, ${assetStatus.missing} missing`);
+
+    // Step 12: Generate markdown output
     log('\nGenerating markdown report...');
     const analysis = {
         targetInfo,
@@ -197,6 +227,8 @@ async function runAnalysis(options) {
         inlineScripts,
         missingImports,
         variableData,
+        htmlAssets,
+        assetStatus,
         generatedAt: new Date().toISOString(),
         // Output options
         outputOptions: {

package/src/output/markdown.js

@@ -27,6 +27,8 @@ function generateMarkdown(analysis) {
         inlineScripts,
         missingImports,
         variableData = {},
+        htmlAssets = {},
+        assetStatus = {},
         generatedAt,
         outputOptions = {}
     } = analysis;
@@ -117,6 +119,12 @@ function generateMarkdown(analysis) {
         sections.push(houdiniSection);
     }
 
+    // Assets & Resources
+    const assetsSection = generateAssetsSection(htmlAssets, assetStatus);
+    if (assetsSection) {
+        sections.push(assetsSection);
+    }
+
     // CSS Dependencies (custom code only)
     const linkedCSS = filteredCssResults.filter(r => r.isLinked);
     const unlinkedCSS = filteredCssResults.filter(r => !r.isLinked);
@@ -554,9 +562,129 @@ function updateSummaryForAdvancedFeatures(cssResults) {
     return summaryAddition;
 }
 
+/**
+ * Generate Assets & Resources section
+ */
+function generateAssetsSection(htmlAssets, assetStatus) {
+    const { details = [] } = assetStatus;
+
+    if (details.length === 0) {
+        return null; // No assets to report
+    }
+
+    let content = `## Assets & Resources\n\n`;
+
+    // Summary
+    content += `> **Total:** ${assetStatus.total} | `;
+    content += `**Available:** ${assetStatus.available} | `;
+    content += `**Missing:** ${assetStatus.missing} | `;
+    content += `**External:** ${assetStatus.external} | `;
+    content += `**Embedded:** ${assetStatus.embedded}\n\n`;
+
+    // Group by category
+    const images = details.filter(a => a.type.includes('img') || a.type.includes('background') || a.type.includes('poster'));
+    const videos = details.filter(a => a.type.includes('video') && !a.type.includes('poster'));
+    const audio = details.filter(a => a.type.includes('audio'));
+    const fonts = details.filter(a => a.type.includes('font'));
+    const icons = details.filter(a => a.type === 'icon');
+    const canvas = htmlAssets.canvas || [];
+    const svgs = htmlAssets.svgs || [];
+
+    // Images
+    if (images.length > 0) {
+        content += `### Images (${images.length})\n\n`;
+        content += `| Path | Type | Status | Size | Location |\n`;
+        content += `|------|------|--------|------|----------|\n`;
+
+        images.forEach(img => {
+            const status = img.status === 'OK' ? 'OK' :
+                img.status === 'EMBEDDED' ? 'Embedded' :
+                    img.status === 'EXTERNAL' ? 'External' :
+                        '**NOT FOUND**';
+            const size = img.sizeFormatted || '-';
+            const location = img.location || 'HTML';
+            content += `| \`${img.src}\` | ${img.type} | ${status} | ${size} | ${location} |\n`;
+        });
+        content += `\n`;
+    }
+
+    // Videos
+    if (videos.length > 0) {
+        content += `### Videos (${videos.length})\n\n`;
+        videos.forEach(vid => {
+            const status = vid.status === 'OK' ? 'OK' : vid.status === 'EXTERNAL' ? 'External' : '**NOT FOUND**';
+            content += `- \`${vid.src}\` - ${status}`;
+            if (vid.sizeFormatted) content += ` (${vid.sizeFormatted})`;
+            content += `\n`;
+        });
+        content += `\n`;
+    }
+
+    // Audio
+    if (audio.length > 0) {
+        content += `### Audio (${audio.length})\n\n`;
+        audio.forEach(aud => {
+            const status = aud.status === 'OK' ? 'OK' : aud.status === 'EXTERNAL' ? 'External' : '**NOT FOUND**';
+            content += `- \`${aud.src}\` - ${status}\n`;
+        });
+        content += `\n`;
+    }
+
+    // Fonts
+    if (fonts.length > 0) {
+        content += `### Fonts (${fonts.length})\n\n`;
+        fonts.forEach(font => {
+            const status = font.status === 'OK' ? 'OK' : font.status === 'EXTERNAL' ? 'External' : '**NOT FOUND**';
+            content += `- \`${font.src}\` - ${status}`;
+            if (font.sizeFormatted) content += ` (${font.sizeFormatted})`;
+            content += `\n`;
+        });
+        content += `\n`;
+    }
+
+    // Icons
+    if (icons.length > 0) {
+        content += `### Icons (${icons.length})\n\n`;
+        icons.forEach(icon => {
+            content += `- \`${icon.src}\` (${icon.rel || 'icon'})\n`;
+        });
+        content += `\n`;
+    }
+
+    // Canvas (for WebGL/3D context)
+    if (canvas.length > 0) {
+        content += `### Canvas Elements (${canvas.length})\n\n`;
+        content += `> **Note:** Canvas elements may be used for WebGL/3D rendering. LLM can infer library (Three.js, Babylon.js) from associated JavaScript.\n\n`;
+        canvas.forEach(c => {
+            content += `- ID: \`${c.id}\` | Size: ${c.width} x ${c.height}\n`;
+        });
+        content += `\n`;
+    }
+
+    // SVG
+    if (svgs.length > 0) {
+        content += `### Inline SVG (${svgs.length})\n\n`;
+        content += `> Inline SVG graphics detected. Full SVG code is included in the HTML section.\n\n`;
+        svgs.forEach(s => {
+            content += `- ID: \`${s.id}\``;
+            if (s.viewBox) content += ` | ViewBox: ${s.viewBox}`;
+            content += `\n`;
+        });
+        content += `\n`;
+    }
+
+    // Missing assets warning
+    if (assetStatus.missing > 0) {
+        content += `> **Warning:** ${assetStatus.missing} asset(s) are missing. These may cause broken images or functionality.\n\n`;
+    }
+
+    return content;
+}
+
 module.exports = {
     generateMarkdown,
     generateShadowDOMSection,
     generateHoudiniSection,
-    updateSummaryForAdvancedFeatures
+    updateSummaryForAdvancedFeatures,
+    generateAssetsSection
 };

package/src/parsers/css-analyzer.js

@@ -480,9 +480,63 @@ function getCacheStats() {
     };
 }
 
+/**
+ * Extract assets from CSS (background images, fonts, etc.)
+ * @param {Array} cssResults - Array of CSS analysis results
+ * @returns {Array} Array of asset objects
+ */
+function extractCSSAssets(cssResults) {
+    const assets = [];
+    const urlRegex = /url\(['"]?([^'"()]+)['"]?\)/g;
+
+    for (const result of cssResults) {
+        const allRules = [
+            ...(result.matches || []),
+            ...(result.shadowDOMRules || [])
+        ];
+
+        for (const match of allRules) {
+            const content = match.content || '';
+
+            // Extract all url() references
+            let urlMatch;
+            while ((urlMatch = urlRegex.exec(content)) !== null) {
+                const url = urlMatch[1].trim();
+
+                // Determine asset type based on context
+                let assetType = 'css-unknown';
+
+                if (content.includes('background')) {
+                    assetType = 'css-background';
+                } else if (content.includes('list-style')) {
+                    assetType = 'css-list-style';
+                } else if (content.includes('content:')) {
+                    assetType = 'css-content';
+                } else if (content.includes('cursor:')) {
+                    assetType = 'css-cursor';
+                } else if (content.includes('@font-face')) {
+                    assetType = 'css-font';
+                } else if (content.includes('mask') || content.includes('clip-path')) {
+                    assetType = 'css-mask';
+                }
+
+                assets.push({
+                    src: url,
+                    type: assetType,
+                    location: `${path.basename(result.filePath)}:${match.startLine}`,
+                    selector: match.selector
+                });
+            }
+        }
+    }
+
+    return assets;
+}
+
 module.exports = {
     analyzeCSS,
     formatCSS,
     clearCache,
-    getCacheStats
+    getCacheStats,
+    extractCSSAssets
 };

package/src/parsers/html-parser.js

@@ -160,6 +160,9 @@ function extractTargetElement($, htmlContent, options) {
     // Generate a summary description
     const summary = generateSummary(tagName, classes, ids);
 
+    // Extract assets from target element
+    const assets = extractAssets(targetElement, $);
+
     return {
         html: targetHtml,
         classes,
@@ -172,7 +175,8 @@ function extractTargetElement($, htmlContent, options) {
         summary,
         selector: selector || `lines ${lineRange}`,
         matchCount,
-        warning
+        warning,
+        assets
     };
 }
 
@@ -448,8 +452,175 @@ function getHTMLStructure($) {
     return structure;
 }
 
+/**
+ * Extract all assets (images, videos, audio, icons, canvas, SVG) from target element
+ * @param {CheerioElement} element - Target element
+ * @param {CheerioAPI} $ - Cheerio instance
+ * @returns {Object} Assets grouped by type
+ */
+function extractAssets(element, $) {
+    const assets = {
+        images: [],
+        videos: [],
+        audio: [],
+        icons: [],
+        canvas: [],
+        svgs: []
+    };
+
+    // Extract IMG tags
+    element.find('img').each((_, el) => {
+        const $el = $(el);
+        const src = $el.attr('src');
+        const srcset = $el.attr('srcset');
+        const alt = $el.attr('alt') || '';
+
+        if (src) {
+            assets.images.push({
+                src,
+                type: 'img',
+                alt,
+                srcset: srcset || null
+            });
+        }
+
+        // Parse srcset for additional images
+        if (srcset) {
+            const srcsetUrls = srcset.split(',').map(s => s.trim().split(' ')[0]);
+            srcsetUrls.forEach(url => {
+                if (url && url !== src) {
+                    assets.images.push({
+                        src: url,
+                        type: 'img-srcset',
+                        alt
+                    });
+                }
+            });
+        }
+    });
+
+    // Extract PICTURE sources
+    element.find('picture source').each((_, el) => {
+        const $el = $(el);
+        const srcset = $el.attr('srcset');
+        if (srcset) {
+            const srcsetUrls = srcset.split(',').map(s => s.trim().split(' ')[0]);
+            srcsetUrls.forEach(url => {
+                assets.images.push({
+                    src: url,
+                    type: 'picture-source'
+                });
+            });
+        }
+    });
+
+    // Extract VIDEO tags
+    element.find('video').each((_, el) => {
+        const $el = $(el);
+        const src = $el.attr('src');
+        const poster = $el.attr('poster');
+
+        if (src) {
+            assets.videos.push({
+                src,
+                type: 'video',
+                poster
+            });
+        }
+
+        if (poster) {
+            assets.images.push({
+                src: poster,
+                type: 'video-poster'
+            });
+        }
+
+        // Extract source tags inside video
+        $el.find('source').each((_, source) => {
+            const sourceSrc = $(source).attr('src');
+            if (sourceSrc) {
+                assets.videos.push({
+                    src: sourceSrc,
+                    type: 'video-source'
+                });
+            }
+        });
+    });
+
+    // Extract AUDIO tags
+    element.find('audio').each((_, el) => {
+        const $el = $(el);
+        const src = $el.attr('src');
+
+        if (src) {
+            assets.audio.push({
+                src,
+                type: 'audio'
+            });
+        }
+
+        // Extract source tags inside audio
+        $el.find('source').each((_, source) => {
+            const sourceSrc = $(source).attr('src');
+            if (sourceSrc) {
+                assets.audio.push({
+                    src: sourceSrc,
+                    type: 'audio-source'
+                });
+            }
+        });
+    });
+
+    // Extract LINK icons (favicon, apple-touch-icon, etc.)
+    element.find('link[rel*="icon"]').each((_, el) => {
+        const $el = $(el);
+        const href = $el.attr('href');
+        const rel = $el.attr('rel');
+
+        if (href) {
+            assets.icons.push({
+                src: href,
+                type: 'icon',
+                rel
+            });
+        }
+    });
+
+    // Extract CANVAS elements (for WebGL detection)
+    element.find('canvas').each((_, el) => {
+        const $el = $(el);
+        const id = $el.attr('id');
+        const width = $el.attr('width');
+        const height = $el.attr('height');
+
+        assets.canvas.push({
+            id: id || 'unnamed',
+            width: width || 'auto',
+            height: height || 'auto',
+            type: 'canvas'
+        });
+    });
+
+    // Extract inline SVG elements (count only, not full content)
+    element.find('svg').each((_, el) => {
+        const $el = $(el);
+        const id = $el.attr('id');
+        const viewBox = $el.attr('viewBox');
+
+        assets.svgs.push({
+            id: id || 'unnamed',
+            viewBox: viewBox || null,
+            type: 'inline-svg',
+            inline: true
+        });
+    });
+
+    return assets;
+}
+
 module.exports = {
     parseHTML,
     extractTargetElement,
-    getHTMLStructure
+    getHTMLStructure,
+    extractAssets
 };

package/src/utils/asset-checker.js

@@ -0,0 +1,175 @@
+/**
+ * Asset Availability Checker
+ * Verifies that images, fonts, and other assets exist and are accessible
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Check if a local file exists and get its stats
+ * @param {string} assetPath - Absolute path to the asset
+ * @returns {Object} Status object
+ */
+function checkLocalAsset(assetPath) {
+    try {
+        if (fs.existsSync(assetPath)) {
+            const stats = fs.statSync(assetPath);
+            return {
+                status: 'OK',
+                exists: true,
+                size: stats.size,
+                sizeFormatted: formatBytes(stats.size)
+            };
+        }
+    } catch (error) {
+        return {
+            status: 'ERROR',
+            exists: false,
+            error: error.message
+        };
+    }
+
+    return {
+        status: 'NOT FOUND',
+        exists: false
+    };
+}
+
+/**
+ * Check if a remote asset is accessible (HEAD request)
+ * @param {string} url - URL to check
+ * @returns {Promise<Object>} Status object
+ */
+async function checkRemoteAsset(url) {
+    // Skip for now - avoid network calls by default
+    // Can be enabled with --check-remote flag
+    return {
+        status: 'EXTERNAL',
+        exists: null, // unknown
+        url: url,
+        note: 'Use --check-remote to verify external URLs'
+    };
+}
+
+/**
+ * Resolve asset path relative to HTML file or project directory
+ * @param {string} assetSrc - Asset source from HTML/CSS
+ * @param {string} basePath - Base path (HTML file dir or project dir)
+ * @returns {string} Resolved absolute path
+ */
+function resolveAssetPath(assetSrc, basePath) {
+    // Handle absolute URLs
+    if (assetSrc.startsWith('http://') || assetSrc.startsWith('https://') || assetSrc.startsWith('//')) {
+        return assetSrc;
+    }
+
+    // Handle data URLs
+    if (assetSrc.startsWith('data:')) {
+        return 'EMBEDDED_DATA_URL';
+    }
+
+    // Handle root-relative paths (/)
+    if (assetSrc.startsWith('/')) {
+        // Relative to project root
+        return path.join(basePath, assetSrc.substring(1));
+    }
+
+    // Handle relative paths
+    return path.join(basePath, assetSrc);
+}
+
+/**
+ * Check availability of multiple assets
+ * @param {Array} assets - Array of asset objects {src, type, location}
+ * @param {string} projectDir - Project directory
+ * @param {string} htmlPath - HTML file path
+ * @param {Object} options - Options {checkRemote: boolean}
+ * @returns {Promise<Object>} Availability report
+ */
+async function checkAssetAvailability(assets, projectDir, htmlPath, options = {}) {
+    const { checkRemote = false } = options;
+
+    const basePath = htmlPath ? path.dirname(htmlPath) : projectDir;
+    const results = [];
+
+    let totalCount = 0;
+    let availableCount = 0;
+    let missingCount = 0;
+    let externalCount = 0;
+    let embeddedCount = 0;
+
+    for (const asset of assets) {
+        totalCount++;
+
+        const resolvedPath = resolveAssetPath(asset.src, basePath);
+        let checkResult;
+
+        // Data URL (embedded)
+        if (resolvedPath === 'EMBEDDED_DATA_URL') {
+            embeddedCount++;
+            checkResult = {
+                status: 'EMBEDDED',
+                exists: true,
+                note: 'Data URL (embedded in HTML/CSS)'
+            };
+        }
+        // External URL
+        else if (resolvedPath.startsWith('http')) {
+            externalCount++;
+            if (checkRemote) {
+                checkResult = await checkRemoteAsset(resolvedPath);
+            } else {
+                checkResult = {
+                    status: 'EXTERNAL',
+                    exists: null,
+                    url: resolvedPath
+                };
+            }
+        }
+        // Local file
+        else {
+            checkResult = checkLocalAsset(resolvedPath);
+            if (checkResult.exists) {
+                availableCount++;
+            } else {
+                missingCount++;
+            }
+        }
+
+        results.push({
+            src: asset.src,
+            type: asset.type,
+            location: asset.location,
+            resolvedPath,
+            ...checkResult
+        });
+    }
+
+    return {
+        total: totalCount,
+        available: availableCount,
+        missing: missingCount,
+        external: externalCount,
+        embedded: embeddedCount,
+        details: results
+    };
+}
+
+/**
+ * Format bytes to human-readable string
+ */
+function formatBytes(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i)) + ' ' + sizes[i];
+}
+
+module.exports = {
+    checkAssetAvailability,
+    resolveAssetPath,
+    checkLocalAsset,
+    formatBytes
+};

package/src/utils/ghost-detector.js

@@ -112,9 +112,23 @@ function detectGhostClasses(targetInfo, cssResults = [], cssLibraryResults = [],
         /^animate__/, /^aos-/, /^fade/, /^slide/, /^zoom/,
 
         // Utility libraries
-        /^u-/, /^util-/, /^helper-/
+        /^u-/, /^util-/, /^helper-/,
+
+        // CSS Modules (build-time hash patterns)
+        // Examples: Button_primary_a8f3d, styles_header_x9k2l, MyComponent__button__2x3d
+        /^[A-Z][a-zA-Z0-9]*_[a-zA-Z0-9]+_[a-z0-9]{4,}$/,  // CamelCase_name_hash
+        /_[a-z0-9]{5,}$/,  // Any class ending with _hash (5+ chars)
+        /^[a-z]+__[a-z]+__[a-z0-9]{4,}$/,  // BEM-like with hash: component__element__hash
+
+        // CSS-in-JS (Styled Components, Emotion)
+        // Examples: sc-bdVaJa, css-1x2y3z, emotion-0
+        /^sc-[a-zA-Z0-9]{5,}$/,  // Styled Components: sc-xxxxx
+        /^css-[a-z0-9]{5,}$/,     // Generic CSS-in-JS: css-xxxxx
+        /^emotion-\d+$/,          // Emotion: emotion-0, emotion-1
+        /^jss\d+$/                // JSS: jss0, jss1
     ];
 
+
     // Find ghost classes (in HTML but not in any CSS)
     const ghostClasses = classes.filter(cls => {
         const className = cls.startsWith('.') ? cls : '.' + cls;

package/src/utils/specificity-calculator.js

@@ -17,6 +17,27 @@ function calculateSpecificity(selector) {
         return [0, 0, 0, 0];
     }
 
+    // Special case: :where() always has 0,0,0 specificity per W3C spec
+    // Check if selector contains :where() but NOT inside :is() or other pseudo-classes
+    if (selector.includes(':where(')) {
+        // If the selector is ONLY :where(...) content, return 0,0,0
+        // Example: :where(.menu, .nav) -> 0,0,0
+        // But :is(.menu):where(.active) -> calculate :is() part only
+
+        // Simple heuristic: if selector starts with :where(, it's purely :where()
+        if (selector.trim().startsWith(':where(')) {
+            return [0, 0, 0, 0];
+        }
+
+        // More complex: has both :is() and :where()
+        // For now, strip :where() parts and calculate the rest
+        const withoutWhere = selector.replace(/:where\([^)]+\)/g, '');
+        if (withoutWhere.trim().length === 0) {
+            return [0, 0, 0, 0];
+        }
+        selector = withoutWhere;
+    }
+
     try {
         const result = calculate(selector);
         if (result) {