eva-css-purge 1.0.1

package/README.md

@@ -0,0 +1,197 @@
+# @eva/purge
+
+> Intelligent CSS purging tool for EVA CSS projects
+
+Removes unused CSS classes, IDs, and optimizes your stylesheets while keeping what matters.
+
+## 🎯 Features
+
+- **Smart Analysis**: Scans HTML, JS, Vue, JSX, TSX files
+- **CSS Variables**: Preserves all CSS variables (critical for EVA CSS)
+- **Element Selectors**: Keeps all HTML element styles
+- **Dynamic Classes**: Detects classes used in JavaScript
+- **Compression**: Minifies output CSS
+- **Safelist**: Protect specific classes from removal
+- **CLI & Programmatic**: Use via command line or in your build process
+
+## 📦 Installation
+
+```bash
+npm install @eva/purge
+# or
+pnpm add @eva/purge
+# or
+yarn add @eva/purge
+```
+
+## 🚀 Usage
+
+### CLI Usage
+
+```bash
+# Basic usage
+eva-purge --css dist/style.css --content "src/**/*.html"
+
+# Multiple content patterns
+eva-purge --css dist/style.css --content "src/**/*.{html,js,vue}"
+
+# Custom output
+eva-purge --css dist/style.css --content "src/**/*" --output dist/style-purged.css
+
+# With safelist (classes to always keep)
+eva-purge --css dist/style.css --safelist "theme-,current-,all-grads"
+
+# Using config file
+eva-purge --config eva.config.js
+```
+
+### Configuration File
+
+Create `eva.config.js`:
+
+```javascript
+module.exports = {
+  purge: {
+    // Content files to scan
+    content: [
+      'src/**/*.html',
+      'src/**/*.js',
+      'src/**/*.vue',
+      'src/**/*.jsx',
+      'src/**/*.tsx'
+    ],
+
+    // CSS file to purge
+    css: 'dist/style.css',
+
+    // Output file
+    output: 'dist/style-purged.css',
+
+    // Classes to keep (optional)
+    safelist: {
+      standard: ['current-theme', 'all-grads', 'toggle-theme'],
+      deep: [/^theme-/],        // Regex patterns
+      greedy: [/^brand-/, /^accent-/]
+    }
+  }
+};
+```
+
+Then run:
+
+```bash
+eva-purge --config eva.config.js
+```
+
+### Programmatic Usage
+
+```javascript
+const CSSPurger = require('@eva/purge');
+
+const config = {
+  content: ['src/**/*.{html,js}'],
+  css: 'dist/style.css',
+  output: 'dist/style-purged.css'
+};
+
+const purger = new CSSPurger(config);
+await purger.purge();
+```
+
+### Integration with Build Tools
+
+**With npm scripts:**
+
+```json
+{
+  "scripts": {
+    "build:css": "sass src/styles.scss dist/style.css",
+    "purge:css": "eva-purge --css dist/style.css --content 'src/**/*.html'",
+    "build": "npm run build:css && npm run purge:css"
+  }
+}
+```
+
+**With Vite:**
+
+```javascript
+// vite.config.js
+import { defineConfig } from 'vite';
+import { exec } from 'child_process';
+
+export default defineConfig({
+  plugins: [
+    {
+      name: 'eva-purge',
+      closeBundle() {
+        exec('eva-purge --css dist/assets/style.css --content "dist/**/*.html"');
+      }
+    }
+  ]
+});
+```
+
+## 📋 What Gets Kept
+
+@eva/purge intelligently keeps:
+
+✅ **CSS Variables** - All `:root` variables (essential for EVA CSS)
+✅ **HTML Elements** - `body`, `h1`, `p`, `button`, etc.
+✅ **Used Classes** - Classes found in HTML/JS files
+✅ **Used IDs** - IDs found in HTML/JS files
+✅ **Media Queries** - All responsive breakpoints
+✅ **Theme Classes** - `.current-theme`, `.all-grads`, etc.
+✅ **Dynamic Classes** - Classes from `classList.add()`, `querySelector()`
+
+## ❌ What Gets Removed
+
+❌ **Unused Classes** - Classes not found in any content files
+❌ **Unused IDs** - IDs not referenced anywhere
+❌ **Comments** - CSS comments (optional)
+❌ **Whitespace** - Extra spaces and newlines
+
+## 🎨 Perfect for EVA CSS
+
+@eva/purge is specifically designed for EVA CSS projects:
+
+- Preserves all CSS variable definitions in `:root`
+- Keeps utility classes like `w-64`, `p-16`, `fs-32`
+- Maintains color classes like `_bg-brand`, `_c-accent`
+- Protects theme classes like `.theme-*`
+- Preserves gradient system classes `.all-grads`
+
+## 📊 Example Results
+
+```
+Original CSS:  120 KB
+Purged CSS:     45 KB
+Space saved:   62.5%
+```
+
+Typical savings: **40-70%** depending on your project.
+
+## 🧪 Testing
+
+Run the included test suite:
+
+```bash
+cd packages/eva-purge
+pnpm test
+```
+
+## 📄 License
+
+MIT © [Michaël Tati](https://ulysse-2029.com/)
+
+## 👨‍💻 Author
+
+**Michaël Tati**
+- Portfolio: [ulysse-2029.com](https://ulysse-2029.com/)
+- LinkedIn: [linkedin.com/in/mtati](https://www.linkedin.com/in/mtati/)
+- Website: [eva-css.xyz](https://eva-css.xyz/)
+
+## 🔗 Related Packages
+
+- [@eva/css](https://www.npmjs.com/package/@eva/css) - Fluid design framework
+- [@eva/colors](https://www.npmjs.com/package/@eva/colors) - OKLCH color utilities
+- [@eva/mcp-server](https://www.npmjs.com/package/@eva/mcp-server) - Figma to HTML MCP server

package/cli.js

@@ -0,0 +1,146 @@
+#!/usr/bin/env node
+
+/**
+ * EVA Purge CLI
+ * Intelligent CSS purging for EVA CSS projects
+ */
+
+const fs = require('fs');
+const path = require('path');
+const CSSPurger = require('./src/purge.js');
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+function printHelp() {
+  console.log(`
+EVA Purge - Intelligent CSS Optimization
+
+Usage:
+  eva-purge [options]
+
+Options:
+  --content <pattern>    Content files to scan (default: **/*.{html,js,vue,jsx,tsx})
+  --css <file>           CSS file to purge (required)
+  --output <file>        Output file path (default: [css]-purged.css)
+  --config <file>        Config file path (eva.config.js)
+  --safelist <classes>   Comma-separated list of classes to keep
+  --help                 Show this help
+
+Examples:
+  # Basic usage
+  eva-purge --css dist/style.css --content "src/**/*.html"
+
+  # With safelist
+  eva-purge --css dist/style.css --safelist "theme-,current-,all-grads"
+
+  # Using config file
+  eva-purge --config eva.config.js
+
+Config file example (eva.config.js):
+  module.exports = {
+    purge: {
+      content: ['src/**/*.html', 'src/**/*.js'],
+      css: 'dist/style.css',
+      output: 'dist/style-purged.css',
+      safelist: {
+        standard: ['current-theme', 'all-grads'],
+        deep: [/^theme-/],
+        greedy: [/^brand-/, /^accent-/]
+      }
+    }
+  };
+  `);
+}
+
+// Parse CLI arguments
+function parseArgs() {
+  const config = {
+    content: [],
+    css: null,
+    output: null,
+    safelist: []
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    switch (args[i]) {
+      case '--content':
+        config.content.push(args[++i]);
+        break;
+      case '--css':
+        config.css = args[++i];
+        break;
+      case '--output':
+        config.output = args[++i];
+        break;
+      case '--safelist':
+        config.safelist = args[++i].split(',').map(s => s.trim());
+        break;
+      case '--config':
+        const configPath = path.resolve(process.cwd(), args[++i]);
+        if (fs.existsSync(configPath)) {
+          const fileConfig = require(configPath);
+          return fileConfig.purge || fileConfig;
+        } else {
+          console.error(`❌ Config file not found: ${configPath}`);
+          process.exit(1);
+        }
+        break;
+      case '--help':
+      case '-h':
+        printHelp();
+        process.exit(0);
+        break;
+    }
+  }
+
+  // Set defaults
+  if (config.content.length === 0) {
+    config.content = ['**/*.{html,js,vue,jsx,tsx}'];
+  }
+
+  if (!config.output && config.css) {
+    const parsed = path.parse(config.css);
+    config.output = path.join(parsed.dir, `${parsed.name}-purged${parsed.ext}`);
+  }
+
+  return config;
+}
+
+async function main() {
+  if (args.length === 0 || args.includes('--help') || args.includes('-h')) {
+    printHelp();
+    process.exit(0);
+  }
+
+  const config = parseArgs();
+
+  if (!config.css) {
+    console.error('❌ Error: --css parameter is required');
+    console.log('Run eva-purge --help for usage information');
+    process.exit(1);
+  }
+
+  if (!fs.existsSync(config.css)) {
+    console.error(`❌ Error: CSS file not found: ${config.css}`);
+    process.exit(1);
+  }
+
+  console.log('🚀 EVA Purge - Starting CSS optimization...\n');
+  console.log('📋 Configuration:');
+  console.log(`   CSS Input:  ${config.css}`);
+  console.log(`   CSS Output: ${config.output}`);
+  console.log(`   Content:    ${config.content.join(', ')}`);
+  if (config.safelist && config.safelist.length > 0) {
+    console.log(`   Safelist:   ${config.safelist.join(', ')}`);
+  }
+  console.log('');
+
+  const purger = new CSSPurger(config);
+  await purger.purge();
+}
+
+main().catch(error => {
+  console.error('❌ Fatal error:', error);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "eva-css-purge",
+  "version": "1.0.1",
+  "description": "Intelligent CSS purging tool for EVA CSS projects",
+  "type": "commonjs",
+  "main": "src/purge.js",
+  "bin": {
+    "eva-purge": "./cli.js"
+  },
+  "files": [
+    "src/",
+    "cli.js",
+    "README.md"
+  ],
+  "keywords": [
+    "css",
+    "purge",
+    "optimization",
+    "eva",
+    "css-optimizer",
+    "tree-shaking",
+    "unused-css"
+  ],
+  "scripts": {
+    "test": "node test/test.js"
+  },
+  "dependencies": {
+    "glob": "^10.3.10"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nkdeus/eva.git",
+    "directory": "packages/eva-purge"
+  },
+  "author": {
+    "name": "Michaël Tati",
+    "url": "https://ulysse-2029.com/"
+  },
+  "homepage": "https://eva-css.xyz/",
+  "license": "MIT"
+}

package/src/purge.js

@@ -0,0 +1,608 @@
+
+/**
+ * CSS Purge Script for EvaCSS
+ * 
+ * This script analyzes HTML and JavaScript files to extract used CSS classes and variables,
+ * then creates a compressed CSS file with only the used styles.
+ * 
+ * Usage: npm run purge
+ */
+
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+
+class CSSPurger {
+    constructor(config = {}) {
+        this.config = {
+            content: config.content || ['**/*.{html,js}'],
+            css: config.css || 'styles/main.css',
+            output: config.output || 'styles/main-compressed.css',
+            safelist: config.safelist || [],
+            ...config
+        };
+        this.usedClasses = new Set();
+        this.usedVariables = new Set();
+        this.usedIds = new Set();
+        this.cssContent = '';
+        this.compressedCSS = '';
+    }
+
+    /**
+     * Main purge process
+     */
+    async purge() {
+        console.log('🚀 Starting CSS purge process...');
+        
+        try {
+            // Step 1: Analyze HTML files
+            await this.analyzeHTMLFiles();
+            
+            // Step 2: Analyze JavaScript files
+            await this.analyzeJavaScriptFiles();
+            
+            // Step 3: Read compiled CSS
+            await this.readCompiledCSS();
+            
+            // Step 4: Extract used styles
+            await this.extractUsedStyles();
+            
+            // Step 5: Compress and optimize
+            await this.compressCSS();
+            
+            // Step 6: Write output
+            await this.writeCompressedCSS();
+            
+            console.log('✅ CSS purge completed successfully!');
+            this.showStats();
+            
+        } catch (error) {
+            console.error('❌ Error during CSS purge:', error);
+            process.exit(1);
+        }
+    }
+
+    /**
+     * Analyze HTML files to extract used classes and CSS variables
+     */
+    async analyzeHTMLFiles() {
+        console.log('📄 Analyzing HTML files...');
+        
+        const htmlFiles = glob.sync('**/*.html', { 
+            ignore: ['node_modules/**', 'dist/**', 'build/**'] 
+        });
+        
+        for (const file of htmlFiles) {
+            const content = fs.readFileSync(file, 'utf8');
+            
+            // Extract classes from class attributes
+            const classMatches = content.match(/class=["']([^"']+)["']/g);
+            if (classMatches) {
+                classMatches.forEach(match => {
+                    const classes = match.replace(/class=["']([^"']+)["']/, '$1').split(/\s+/);
+                    classes.forEach(cls => {
+                        if (cls.trim()) {
+                            this.usedClasses.add(cls.trim());
+                        }
+                    });
+                });
+            }
+            
+            // Extract IDs from id attributes
+            const idMatches = content.match(/id=["']([^"']+)["']/g);
+            if (idMatches) {
+                idMatches.forEach(match => {
+                    const id = match.replace(/id=["']([^"']+)["']/, '$1').trim();
+                    if (id) {
+                        this.usedIds.add(id);
+                    }
+                });
+            }
+            
+            // Extract CSS variables from style attributes and content
+            const varMatches = content.match(/var\(--[^)]+\)/g);
+            if (varMatches) {
+                varMatches.forEach(match => {
+                    const varName = match.replace(/var\((--[^)]+)\)/, '$1');
+                    this.usedVariables.add(varName);
+                });
+            }
+        }
+        
+        console.log(`📊 Found ${this.usedClasses.size} unique classes in HTML`);
+        console.log(`📊 Found ${this.usedIds.size} unique IDs in HTML`);
+        console.log(`📊 Found ${this.usedVariables.size} CSS variables in HTML`);
+    }
+
+    /**
+     * Analyze JavaScript files to extract dynamically used classes and IDs
+     */
+    async analyzeJavaScriptFiles() {
+        console.log('📄 Analyzing JavaScript files...');
+        
+        const jsFiles = glob.sync('**/*.js', { 
+            ignore: ['node_modules/**', 'dist/**', 'build/**', 'scripts/purge-css.js'] 
+        });
+        
+        let jsClassCount = 0;
+        let jsIdCount = 0;
+        let jsVarCount = 0;
+        
+        for (const file of jsFiles) {
+            const content = fs.readFileSync(file, 'utf8');
+            
+            // Extract classes from classList methods
+            const classListMatches = content.match(/classList\.(add|remove|toggle|contains)\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g);
+            if (classListMatches) {
+                classListMatches.forEach(match => {
+                    const className = match.replace(/.*['"`]([^'"`]+)['"`].*/, '$1');
+                    if (className) {
+                        this.usedClasses.add(className);
+                        jsClassCount++;
+                    }
+                });
+            }
+            
+            // Extract classes from className assignments
+            const classNameMatches = content.match(/\.className\s*=\s*['"`]([^'"`]+)['"`]/g);
+            if (classNameMatches) {
+                classNameMatches.forEach(match => {
+                    const classes = match.replace(/.*['"`]([^'"`]+)['"`].*/, '$1').split(/\s+/);
+                    classes.forEach(cls => {
+                        if (cls.trim()) {
+                            this.usedClasses.add(cls.trim());
+                            jsClassCount++;
+                        }
+                    });
+                });
+            }
+            
+            // Extract classes from querySelector and querySelectorAll
+            const querySelectorMatches = content.match(/querySelector(?:All)?\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g);
+            if (querySelectorMatches) {
+                querySelectorMatches.forEach(match => {
+                    const selector = match.replace(/.*['"`]([^'"`]+)['"`].*/, '$1');
+                    
+                    // Extract class names (starts with .)
+                    const classMatches = selector.match(/\.([a-zA-Z][a-zA-Z0-9_-]*)/g);
+                    if (classMatches) {
+                        classMatches.forEach(cls => {
+                            const className = cls.substring(1); // Remove the dot
+                            this.usedClasses.add(className);
+                            jsClassCount++;
+                        });
+                    }
+                    
+                    // Extract IDs (starts with #)
+                    const idMatches = selector.match(/#([a-zA-Z][a-zA-Z0-9_-]*)/g);
+                    if (idMatches) {
+                        idMatches.forEach(id => {
+                            const idName = id.substring(1); // Remove the hash
+                            this.usedIds.add(idName);
+                            jsIdCount++;
+                        });
+                    }
+                });
+            }
+            
+            // Extract IDs from getElementById
+            const getElementByIdMatches = content.match(/getElementById\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g);
+            if (getElementByIdMatches) {
+                getElementByIdMatches.forEach(match => {
+                    const id = match.replace(/.*['"`]([^'"`]+)['"`].*/, '$1');
+                    if (id) {
+                        this.usedIds.add(id);
+                        jsIdCount++;
+                    }
+                });
+            }
+            
+            // Extract CSS variables from JavaScript
+            const jsVarMatches = content.match(/['"`]--[a-zA-Z][a-zA-Z0-9_-]*['"`]/g);
+            if (jsVarMatches) {
+                jsVarMatches.forEach(match => {
+                    const varName = match.replace(/['"`]/g, '');
+                    this.usedVariables.add(varName);
+                    jsVarCount++;
+                });
+            }
+            
+            // Extract CSS variables from setProperty calls
+            const setPropMatches = content.match(/setProperty\s*\(\s*['"`](--[^'"`]+)['"`]/g);
+            if (setPropMatches) {
+                setPropMatches.forEach(match => {
+                    const varName = match.replace(/.*['"`](--[^'"`]+)['"`].*/, '$1');
+                    this.usedVariables.add(varName);
+                    jsVarCount++;
+                });
+            }
+            
+            // Extract CSS variables from getPropertyValue calls
+            const getPropMatches = content.match(/getPropertyValue\s*\(\s*['"`](--[^'"`]+)['"`]/g);
+            if (getPropMatches) {
+                getPropMatches.forEach(match => {
+                    const varName = match.replace(/.*['"`](--[^'"`]+)['"`].*/, '$1');
+                    this.usedVariables.add(varName);
+                    jsVarCount++;
+                });
+            }
+        }
+        
+        console.log(`📊 Found ${jsClassCount} class references in JavaScript`);
+        console.log(`📊 Found ${jsIdCount} ID references in JavaScript`);
+        console.log(`📊 Found ${jsVarCount} CSS variable references in JavaScript`);
+        console.log(`📊 Total unique classes: ${this.usedClasses.size}`);
+        console.log(`📊 Total unique IDs: ${this.usedIds.size}`);
+        console.log(`📊 Total unique CSS variables: ${this.usedVariables.size}`);
+    }
+
+    /**
+     * Read the compiled CSS file
+     */
+    async readCompiledCSS() {
+        console.log('📖 Reading compiled CSS...');
+
+        const cssPath = path.resolve(process.cwd(), this.config.css);
+
+        if (!fs.existsSync(cssPath)) {
+            throw new Error(`CSS file not found: ${cssPath}`);
+        }
+
+        this.cssContent = fs.readFileSync(cssPath, 'utf8');
+        console.log(`📊 Original CSS size: ${(this.cssContent.length / 1024).toFixed(2)} KB`);
+    }
+
+    /**
+     * Extract only the used CSS rules and variables
+     */
+    async extractUsedStyles() {
+        console.log('🔍 Extracting used styles...');
+        
+        const lines = this.cssContent.split('\n');
+        const usedLines = [];
+        let currentRule = '';
+        let currentRuleContent = '';
+        let inRule = false;
+        let inRootRule = false; // Special flag for :root blocks
+        let inMediaQuery = false; // Special flag for @media blocks
+        let braceCount = 0;
+        let ruleLines = [];
+        let processedRules = 0;
+        let mediaQueryCount = 0;
+        
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            const trimmedLine = line.trim();
+            
+            // Progress indicator
+            if (i % 1000 === 0) {
+                console.log(`📊 Processing line ${i}/${lines.length} (${Math.round(i/lines.length*100)}%)`);
+            }
+            
+            // Skip empty lines and comments at the root level
+            if (!trimmedLine || (trimmedLine.startsWith('/*') && !inRule)) {
+                continue;
+            }
+            
+            // If we're not in a rule but this line looks like a selector (no { yet), accumulate it for multi-line selectors
+            if (!inRule && !trimmedLine.includes('{') && !trimmedLine.includes('}') && 
+                (trimmedLine.includes(',') || /^[a-zA-Z*#.\[]/.test(trimmedLine) || trimmedLine.includes('::') || trimmedLine.includes(':'))) {
+                // This might be part of a multi-line selector
+                if (!currentRule) {
+                    currentRule = trimmedLine;
+                    ruleLines = [line];
+                } else {
+                    // Append to existing selector
+                    currentRule += ',' + trimmedLine;
+                    ruleLines.push(line);
+                }
+                continue;
+            }
+            
+            // Handle opening braces
+            if (trimmedLine.includes('{')) {
+                braceCount++;
+                if (!inRule && braceCount === 1) {
+                    // Complete the selector if it wasn't already accumulated
+                    if (!currentRule) {
+                        currentRule = trimmedLine.replace(/\s*\{.*/, '');
+                        ruleLines = [line];
+                    } else {
+                        // Use accumulated selector and add the line with the opening brace
+                        currentRule += trimmedLine.replace(/\s*\{.*/, '');
+                        ruleLines.push(line);
+                    }
+                    currentRuleContent = '';
+                    inRule = true;
+                    
+                    // Check if this is a media query (always keep these completely)
+                    if (currentRule.includes('@media')) {
+                        inMediaQuery = true;
+                        mediaQueryCount++;
+                        console.log(`📱 Found media query: ${currentRule.trim()} - keeping completely`);
+                    }
+                    // Check if this is a :root or .all-grads rule (always keep these completely)
+                    else if (currentRule.includes(':root') || currentRule.includes('.all-grads')) {
+                        inRootRule = true;
+                        console.log(`📋 Found ${currentRule.trim()} block - keeping all variables`);
+                    }
+                } else if (inRule) {
+                    ruleLines.push(line);
+                }
+            }
+            // Handle closing braces
+            else if (trimmedLine.includes('}')) {
+                braceCount--;
+                if (inRule) {
+                    ruleLines.push(line);
+                    
+                    // Check if rule should be kept when we close the main rule
+                    if (braceCount === 0) {
+                        processedRules++;
+                        
+                        // Always keep media queries, :root and .all-grads blocks completely
+                        const shouldKeep = inMediaQuery || 
+                                          inRootRule || 
+                                          this.isUsedSelector(currentRule) || 
+                                          this.hasCurrentVariables(currentRuleContent);
+                        
+                        if (shouldKeep) {
+                            usedLines.push(...ruleLines);
+                            if (inRootRule) {
+                                // Count variables in this :root block
+                                const varCount = ruleLines.join('').match(/--[a-zA-Z][a-zA-Z0-9_-]*:/g)?.length || 0;
+                                console.log(`📋 Kept ${varCount} CSS variables from ${currentRule.trim()}`);
+                            }
+                        }
+                        
+                        // Reset for next rule
+                        inRule = false;
+                        inRootRule = false;
+                        inMediaQuery = false;
+                        currentRule = '';
+                        currentRuleContent = '';
+                        ruleLines = [];
+                    }
+                }
+            }
+            // Handle properties within rules
+            else if (inRule) {
+                ruleLines.push(line);
+                currentRuleContent += ' ' + trimmedLine;
+            }
+        }
+        
+        console.log(`📊 Processed ${processedRules} CSS rules`);
+        console.log(`📱 Kept ${mediaQueryCount} media queries`);
+        this.compressedCSS = usedLines.join('\n');
+        console.log(`📊 Extracted CSS size: ${(this.compressedCSS.length / 1024).toFixed(2)} KB`);
+    }
+
+    /**
+     * Check if a CSS rule uses --current- variables and should be kept
+     */
+    hasCurrentVariables(ruleContent) {
+        return /var\(--current-/.test(ruleContent);
+    }
+
+    /**
+     * Check if a CSS selector is an HTML element or reset selector that should be kept
+     */
+    isElementOrResetSelector(selector) {
+        const cleanSelector = selector.replace(/\s*\{.*/, '').trim();
+        
+        // Always keep universal selectors and reset selectors (complete groups)
+        if (cleanSelector.includes('*') || 
+            cleanSelector.includes('::before') || 
+            cleanSelector.includes('::after') ||
+            cleanSelector.includes(':target') ||
+            /^body[,\s]|^html[,\s]/.test(cleanSelector)) {
+            return true;
+        }
+        
+        // Handle multiple selectors separated by commas - if ANY selector in the group is an element/reset, keep the whole group
+        const selectors = cleanSelector.split(',');
+        
+        const htmlElements = [
+            'html', 'body', 'head', 'title', 'meta', 'link', 'script', 'style',
+            'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'br', 'hr',
+            'a', 'img', 'figure', 'figcaption', 'picture', 'source',
+            'ul', 'ol', 'li', 'dl', 'dt', 'dd',
+            'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'caption',
+            'form', 'input', 'button', 'textarea', 'select', 'option', 'label', 'fieldset', 'legend',
+            'div', 'span', 'section', 'article', 'aside', 'header', 'footer', 'nav', 'main',
+            'blockquote', 'cite', 'q', 'pre', 'code', 'kbd', 'samp', 'var',
+            'em', 'strong', 'b', 'i', 'u', 's', 'small', 'mark', 'del', 'ins', 'sub', 'sup',
+            'video', 'audio', 'canvas', 'svg', 'iframe', 'embed', 'object', 'param'
+        ];
+        
+        for (const sel of selectors) {
+            const trimmedSel = sel.trim();
+            
+            // Check if it's a pure element selector
+            const baseElement = trimmedSel.replace(/::[^,\s]+|:[^,\s(]+(\([^)]*\))?/g, '').trim();
+            if (htmlElements.includes(baseElement)) {
+                return true;
+            }
+            
+            // Check for element selectors with pseudo-classes/elements (like a:hover, input:focus)
+            if (htmlElements.some(element => trimmedSel.startsWith(element + ':') || trimmedSel.startsWith(element + '::') || trimmedSel === element)) {
+                return true;
+            }
+            
+            // Check for attribute selectors on elements (like input[type="text"])
+            if (htmlElements.some(element => trimmedSel.startsWith(element + '[') && trimmedSel.includes(']'))) {
+                return true;
+            }
+            
+            // Check for selectors starting with element but containing other selectors
+            // e.g., "ul[role=list]", "a:not([class])", etc.
+            const match = trimmedSel.match(/^([a-zA-Z][a-zA-Z0-9]*)/);
+            if (match && htmlElements.includes(match[1])) {
+                return true;
+            }
+        }
+        
+        return false;
+    }
+
+    /**
+     * Check if a CSS selector is used in the HTML or JavaScript
+     */
+    isUsedSelector(selector) {
+        // Clean the selector
+        const cleanSelector = selector.replace(/\s*\{.*/, '').trim();
+        
+        // Always keep element and reset selectors
+        if (this.isElementOrResetSelector(selector)) {
+            return true;
+        }
+        
+        // Handle multiple selectors separated by commas
+        const selectors = cleanSelector.split(',');
+        
+        for (const sel of selectors) {
+            const trimmedSel = sel.trim();
+            
+            // Skip pseudo-elements and pseudo-classes for now
+            if (trimmedSel.includes('::') || trimmedSel.includes(':hover') || trimmedSel.includes(':before') || trimmedSel.includes(':after')) {
+                // Check the base selector
+                const baseSelector = trimmedSel.replace(/::[^,\s]+|:[^,\s]+/g, '').trim();
+                if (this.isUsedSelector(baseSelector)) {
+                    return true;
+                }
+                continue;
+            }
+            
+            // Handle ID selectors
+            if (trimmedSel.startsWith('#')) {
+                const idName = trimmedSel.substring(1).replace(/[^\w-_]/g, '');
+                if (this.usedIds.has(idName)) {
+                    return true;
+                }
+            }
+            
+            // Handle class selectors
+            if (trimmedSel.startsWith('.')) {
+                const className = trimmedSel.substring(1).replace(/[^\w-_]/g, '');
+                if (this.usedClasses.has(className)) {
+                    return true;
+                }
+            }
+            
+            // Handle compound selectors (e.g., .class1.class2, #id.class)
+            const classes = trimmedSel.match(/\.[a-zA-Z][a-zA-Z0-9_-]*/g);
+            const ids = trimmedSel.match(/#[a-zA-Z][a-zA-Z0-9_-]*/g);
+            
+            if (classes || ids) {
+                let allSelectorsUsed = true;
+                
+                // Check all classes in compound selector
+                if (classes) {
+                    allSelectorsUsed = allSelectorsUsed && classes.every(cls => {
+                        const className = cls.substring(1);
+                        return this.usedClasses.has(className);
+                    });
+                }
+                
+                // Check all IDs in compound selector
+                if (ids) {
+                    allSelectorsUsed = allSelectorsUsed && ids.every(id => {
+                        const idName = id.substring(1);
+                        return this.usedIds.has(idName);
+                    });
+                }
+                
+                if (allSelectorsUsed && (classes?.length > 0 || ids?.length > 0)) {
+                    return true;
+                }
+            }
+        }
+        
+        return false;
+    }
+
+    /**
+     * Compress and optimize the CSS
+     */
+    async compressCSS() {
+        console.log('🗜️  Compressing CSS...');
+        
+        let compressed = this.compressedCSS;
+        
+        // Remove comments
+        compressed = compressed.replace(/\/\*[\s\S]*?\*\//g, '');
+        
+        // Remove unnecessary whitespace but preserve selector grouping structure
+        compressed = compressed.replace(/\s+/g, ' ');
+        
+        // Remove whitespace around braces and semicolons - but preserve commas in selectors
+        compressed = compressed.replace(/\s*{\s*/g, '{');
+        compressed = compressed.replace(/\s*}\s*/g, '}');
+        compressed = compressed.replace(/\s*;\s*/g, ';');
+        compressed = compressed.replace(/\s*:\s*/g, ':');
+        
+        // CAREFULLY handle comma spacing - preserve commas in selectors but remove extra spaces
+        // Only remove spaces around commas that are NOT inside function calls or @media queries
+        compressed = compressed.replace(/(\w|[)\]])\s*,\s*(\w|[.#*:])/g, '$1,$2');
+        
+        // Remove trailing semicolons before }
+        compressed = compressed.replace(/;}/g, '}');
+        
+        // Remove empty rules
+        compressed = compressed.replace(/[^}]+{\s*}/g, '');
+        
+        // Final cleanup
+        compressed = compressed.trim();
+        
+        this.compressedCSS = compressed;
+        console.log(`📊 Compressed CSS size: ${(compressed.length / 1024).toFixed(2)} KB`);
+    }
+
+    /**
+     * Write the compressed CSS to file
+     */
+    async writeCompressedCSS() {
+        console.log('💾 Writing compressed CSS...');
+
+        const outputPath = path.resolve(process.cwd(), this.config.output);
+
+        // Ensure output directory exists
+        const outputDir = path.dirname(outputPath);
+        if (!fs.existsSync(outputDir)) {
+            fs.mkdirSync(outputDir, { recursive: true });
+        }
+
+        // Add a header comment
+        const header = `/* EVA CSS Purged - Generated on ${new Date().toISOString()} */\n`;
+        const finalCSS = header + this.compressedCSS;
+
+        fs.writeFileSync(outputPath, finalCSS);
+        console.log(`📁 Compressed CSS saved to: ${outputPath}`);
+    }
+
+    /**
+     * Show compression statistics
+     */
+    showStats() {
+        const originalSize = this.cssContent.length;
+        const compressedSize = this.compressedCSS.length;
+        const savings = ((originalSize - compressedSize) / originalSize * 100).toFixed(2);
+        
+        console.log('\n📊 Compression Statistics:');
+        console.log(`   Original size: ${(originalSize / 1024).toFixed(2)} KB`);
+        console.log(`   Compressed size: ${(compressedSize / 1024).toFixed(2)} KB`);
+        console.log(`   Space saved: ${savings}%`);
+        console.log(`   Used classes: ${this.usedClasses.size}`);
+        console.log(`   Used variables: ${this.usedVariables.size}`);
+        console.log(`   Used IDs: ${this.usedIds.size}`);
+    }
+}
+
+// Run the purger
+if (require.main === module) {
+    const purger = new CSSPurger();
+    purger.purge();
+}
+
+module.exports = CSSPurger;