{"id":48833716,"url":"https://github.com/thedecipherist/classpresso","last_synced_at":"2026-04-14T22:03:39.455Z","repository":{"id":331521406,"uuid":"1129925848","full_name":"TheDecipherist/classpresso","owner":"TheDecipherist","description":"Build-time CSS class consolidation. Makes Tailwind render 50% faster by compressing repeated utility patterns. Perfect for AI-generated code.","archived":false,"fork":false,"pushed_at":"2026-01-13T21:56:14.000Z","size":1919,"stargazers_count":67,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-21T11:12:17.135Z","etag":null,"topics":["ai","build-tools","cli","css","nextjs","nodejs","optimization","performance","react","tailwindcss","typescript","vite"],"latest_commit_sha":null,"homepage":"https://classpresso.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheDecipherist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-07T19:27:04.000Z","updated_at":"2026-02-17T15:23:23.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/TheDecipherist/classpresso","commit_stats":null,"previous_names":["timclausendev-web/classpresso","thedecipherist/classpresso"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/TheDecipherist/classpresso","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheDecipherist%2Fclasspresso","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheDecipherist%2Fclasspresso/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheDecipherist%2Fclasspresso/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheDecipherist%2Fclasspresso/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheDecipherist","download_url":"https://codeload.github.com/TheDecipherist/classpresso/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheDecipherist%2Fclasspresso/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31817130,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T18:05:02.291Z","status":"ssl_error","status_checked_at":"2026-04-14T18:05:01.765Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","build-tools","cli","css","nextjs","nodejs","optimization","performance","react","tailwindcss","typescript","vite"],"created_at":"2026-04-14T22:03:31.356Z","updated_at":"2026-04-14T22:03:39.436Z","avatar_url":"https://github.com/TheDecipherist.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![classpresso.com](https://img.shields.io/badge/🌐_classpresso.com-5b21b6?style=for-the-badge)](https://classpresso.com)\n\n# Classpresso\n\n\u003e **Make utility-first CSS render faster** — 50% faster style recalculation, 42% faster First Paint\n\nClasspresso consolidates repeated utility class patterns at build time, dramatically reducing browser rendering work. Works with Tailwind, Bootstrap, Bulma, Tachyons, UnoCSS, and any utility-first CSS framework.\n\n\u003e **📦 Post-Build Tool — Your Development Workflow is Unchanged**\n\u003e\n\u003e Classpresso runs **after** your build (`npm run build`), not during development. Your source code is never modified — only the compiled output in `.next`, `dist`, `build`, etc. You'll always see your normal Tailwind/utility classes while developing and debugging.\n\n## Performance Results\n\n| Metric | Improvement |\n|--------|-------------|\n| Style Recalculation | **50% faster** |\n| First Paint | **42% faster** |\n| Memory Usage | **21% less** |\n| Runtime Overhead | **0ms** |\n\n*Benchmarks run on 1000 complex components with Playwright + Chrome DevTools Protocol*\n\n## The Problem\n\nUtility-first CSS means elements with 10-20+ classes:\n\n```html\n\u003cbutton class=\"inline-flex items-center justify-center rounded-md text-sm font-medium\n               transition-colors focus-visible:outline-none focus-visible:ring-2\n               bg-primary text-white hover:bg-primary/90 h-10 px-4 py-2\"\u003e\n  Submit\n\u003c/button\u003e\n```\n\n**Every class on every element is work for the browser:**\n- Parse the class string\n- Look up each class in stylesheets\n- Calculate specificity and resolve conflicts\n- Compute final styles\n\nWith 15 classes × 500 elements = **7,500 class lookups per page load**.\n\n## The Solution\n\nClasspresso finds repeated patterns and consolidates them:\n\n**Before:**\n```html\n\u003cbutton class=\"inline-flex items-center justify-center rounded-md text-sm font-medium...\"\u003eSubmit\u003c/button\u003e\n\u003cbutton class=\"inline-flex items-center justify-center rounded-md text-sm font-medium...\"\u003eCancel\u003c/button\u003e\n\u003cbutton class=\"inline-flex items-center justify-center rounded-md text-sm font-medium...\"\u003eDelete\u003c/button\u003e\n```\n\n**After:**\n```html\n\u003cbutton class=\"cp-btn bg-primary\"\u003eSubmit\u003c/button\u003e\n\u003cbutton class=\"cp-btn bg-secondary\"\u003eCancel\u003c/button\u003e\n\u003cbutton class=\"cp-btn bg-destructive\"\u003eDelete\u003c/button\u003e\n```\n\n**Generated CSS:**\n```css\n.cp-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* ... all consolidated utilities */\n}\n```\n\n**Result:** Fewer classes = less browser work = faster rendering.\n\n## Installation\n\n```bash\nnpm install classpresso --save-dev\n```\n\n## Quick Start\n\n```bash\n# Build your project first\nnpm run build\n\n# Analyze potential savings (auto-detects build directory)\nnpx classpresso analyze\n\n# Apply optimizations\nnpx classpresso optimize\n```\n\nClasspresso **auto-detects** your build directory (`.next`, `dist`, `build`, `.output`, etc.), so you usually don't need to specify `--dir`.\n\n## Framework Compatibility\n\n### CSS Frameworks\n\n| Framework | Classes per Element | Performance Gain |\n|-----------|---------------------|------------------|\n| Tailwind CSS | 10-20+ typical | Excellent |\n| Bootstrap | 5-15 typical | Good |\n| Bulma | 5-10 typical | Good |\n| Tachyons | 15-25+ typical | Excellent |\n| UnoCSS | 10-20+ typical | Excellent |\n| Any utility CSS | Varies | Automatic |\n\n### Build Frameworks\n\nClasspresso works with **20+ frameworks** out of the box:\n\n| Framework | Build Directory | SSR Flag | Notes |\n|-----------|-----------------|----------|-------|\n| **React Meta-Frameworks** |\n| Next.js | `.next` (default) | `--ssr` for App Router | Pages Router usually doesn't need SSR flag |\n| Remix | `build` | `--ssr` recommended | |\n| Gatsby | `public` | Not needed | Static only |\n| RedwoodJS | `web/dist` | `--ssr` if using SSR | |\n| **Vue Meta-Frameworks** |\n| Nuxt 3 | `.output` | `--ssr` recommended | |\n| VitePress | `.vitepress/dist` | Not needed | Static docs |\n| Gridsome | `dist` | Not needed | Static only |\n| **Svelte** |\n| SvelteKit | `build` | `--ssr` recommended | Or `.svelte-kit` |\n| **Other Frameworks** |\n| Astro | `dist` | `--ssr` for islands | Static doesn't need SSR |\n| Solid Start | `.output` or `dist` | `--ssr` recommended | |\n| Qwik | `dist` | `--ssr` recommended | |\n| Angular | `dist/[project-name]` | Not needed | Angular 17+ uses `browser/` subdir |\n| Ember | `dist` | Not needed | |\n| Preact | `build` or `dist` | Depends on setup | |\n| **Generic Bundlers** |\n| Vite | `dist` | Depends on framework | |\n| Webpack | `dist` | Not needed | |\n| Parcel | `dist` | Not needed | |\n| Create React App | `build` | Not needed | |\n| **Static Site Generators** |\n| Eleventy (11ty) | `_site` | Not needed | |\n| Hugo | `public` | Not needed | |\n| Docusaurus | `build` | Not needed | |\n\n**Zero code changes required.** Classpresso runs on your build output. Your React, Vue, Svelte, Solid, Qwik, Astro, Angular, or vanilla HTML stays exactly the same.\n\n## How It Works\n\n```\n1. You run your normal build (next build, vite build, etc.)\n\n2. Classpresso scans the output:\n   → Finds all class attributes\n   → Identifies patterns that repeat\n   → Calculates which are worth consolidating\n\n3. Classpresso transforms:\n   → Replaces repeated patterns with short hash classes\n   → Generates CSS that maps hashes to original utilities\n   → Updates HTML/JS with new class names\n\n4. Result:\n   → Same visual appearance\n   → Dramatically fewer class lookups\n   → Faster style recalculation on every interaction\n```\n\n## CLI Commands\n\nAll commands **auto-detect** your build directory. You can override with `--dir` if needed.\n\n### `classpresso analyze`\n\nAnalyze build output and show potential optimizations without modifying files.\n\n```bash\nclasspresso analyze                        # Auto-detects build dir\nclasspresso analyze --dir dist             # Explicit build dir\nclasspresso analyze --min-occurrences 3 --min-classes 3\nclasspresso analyze --json\n```\n\n**Options:**\n- `-d, --dir \u003cpath\u003e` - Build directory (auto-detected if not specified)\n- `--min-occurrences \u003cn\u003e` - Minimum times a pattern must appear (default: `2`)\n- `--min-classes \u003cn\u003e` - Minimum classes in a pattern (default: `2`)\n- `--ssr` - Enable SSR-safe mode for hydration compatibility\n- `--json` - Output as JSON\n- `-v, --verbose` - Verbose output\n- `--debug` - Generate detailed debug log file for troubleshooting\n- `--send-error-reports` - Send error reports to configured webhook\n- `--error-report-url \u003curl\u003e` - Webhook URL for error reports\n\n### `classpresso optimize`\n\nApply optimizations to the build output.\n\n```bash\nclasspresso optimize                       # Auto-detects build dir\nclasspresso optimize --dir .next           # Explicit build dir\nclasspresso optimize --dry-run\nclasspresso optimize --backup\nclasspresso optimize --purge-unused        # Also remove unused CSS\n```\n\n**Options:**\n- `-d, --dir \u003cpath\u003e` - Build directory (auto-detected if not specified)\n- `--min-occurrences \u003cn\u003e` - Minimum times a pattern must appear (default: `2`)\n- `--min-classes \u003cn\u003e` - Minimum classes in a pattern (default: `2`)\n- `--ssr` - Enable SSR-safe mode for hydration compatibility\n- `--dry-run` - Show what would be done without making changes\n- `--backup` - Create backup files before modifying\n- `--no-manifest` - Don't generate manifest file\n- `--purge-unused` - Remove unused CSS classes after consolidation\n- `-v, --verbose` - Verbose output\n- `--debug` - Generate detailed debug log file for troubleshooting\n- `--send-error-reports` - Send error reports to configured webhook\n- `--error-report-url \u003curl\u003e` - Webhook URL for error reports\n\n### `classpresso validate`\n\nCheck for hydration safety issues before optimizing. Catches potential React/Vue/Svelte hydration mismatches.\n\n```bash\nclasspresso validate                       # Auto-detects build dir\nclasspresso validate --dir .next\nclasspresso validate --json\n```\n\n**Example output:**\n```\n☕ Classpresso - Hydration Safety Validator\n\n📊 Hydration Safety Summary\n\n  Patterns analyzed:    22\n  Hydration-safe:       17\n  Server-only:          3\n  Client-only:          2\n  Mergeable (props):    1\n\n⚠️  Found 5 patterns that may cause hydration issues:\n\n  1. \"flex items-center gap-4\"\n     Status: SERVER-ONLY\n     Location: server/page.html:47\n     Fix: This pattern only appears in server-rendered HTML...\n\n💡 Recommendations\n\n  ⚠️  Mixed server/client patterns detected.\n     Use \"classpresso optimize --ssr\" to only consolidate safe patterns.\n```\n\n**Options:**\n- `-d, --dir \u003cpath\u003e` - Build directory (auto-detected if not specified)\n- `--json` - Output as JSON\n- `-v, --verbose` - Verbose output\n- `--debug` - Generate detailed debug log file for troubleshooting\n\n### `classpresso unused`\n\nAnalyze CSS for unused classes. Find dead CSS that can be removed.\n\n```bash\nclasspresso unused                         # Auto-detects build dir\nclasspresso unused --dir dist\nclasspresso unused --verbose               # Show file breakdown\nclasspresso unused --json\n```\n\n**Example output:**\n```\n☕ Classpresso - Unused CSS Analyzer\n\n📊 Summary\n\n  CSS files scanned:    3\n  Total CSS rules:      1,247\n  Classes used:         892\n  Classes unused:       47\n\n💾 Size Impact\n\n  Unused CSS bytes:     12,340 (12.1 KB)\n  Gzip estimate:        3,120 (3.0 KB)\n\n🔝 Top 10 Unused Classes (by size)\n\n  1. hover\\:bg-gradient-to-r                           234 B\n  2. focus\\:ring-offset-4                              189 B\n  ...\n\n💡 Recommendations\n\n  ⚠️  Found 12.1 KB of unused CSS.\n     Run \"classpresso optimize --purge-unused\" to remove these classes.\n```\n\n**Options:**\n- `-d, --dir \u003cpath\u003e` - Build directory (auto-detected if not specified)\n- `--limit \u003cn\u003e` - Number of top unused classes to show (default: `20`)\n- `--json` - Output as JSON\n- `-v, --verbose` - Verbose output (show file breakdown)\n- `--debug` - Generate detailed debug log file for troubleshooting\n\n### `classpresso report`\n\nGenerate a report from an existing manifest.\n\n```bash\nclasspresso report                         # Auto-detects build dir\nclasspresso report --dir .next\nclasspresso report --format json\nclasspresso report --format html \u003e report.html\n```\n\n**Options:**\n- `-d, --dir \u003cpath\u003e` - Build directory (auto-detected if not specified)\n- `--format \u003ctype\u003e` - Output format: `text`, `json`, `html` (default: `text`)\n\n## Integration Examples\n\nWith auto-detection, most integrations are now simpler:\n\n### Next.js\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"next build \u0026\u0026 classpresso optimize --ssr\",\n    \"build:analyze\": \"next build \u0026\u0026 classpresso analyze\"\n  }\n}\n```\n\n### Vite / Create React App / Generic\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"vite build \u0026\u0026 classpresso optimize\"\n  }\n}\n```\n\nClasspresso auto-detects `dist`, `build`, or your framework's output directory.\n\n### Astro\n\nClasspresso fully supports Astro static, SSR, and hybrid builds.\n\n**Static Build (default):**\n```json\n{\n  \"scripts\": {\n    \"build\": \"astro build \u0026\u0026 classpresso optimize --dir dist\"\n  }\n}\n```\n\n**SSR/Hybrid Build (with React/Vue/Svelte islands):**\n```json\n{\n  \"scripts\": {\n    \"build\": \"astro build \u0026\u0026 classpresso optimize --dir dist --ssr\"\n  }\n}\n```\n\n**Configuration file:**\n```javascript\n// classpresso.config.js\nmodule.exports = {\n  buildDir: 'dist',\n  // Use --ssr flag if you have interactive islands with client:* directives\n  ssr: false,\n};\n```\n\nClasspresso automatically detects Astro's build structure:\n- `dist/**/*.html` - Static HTML pages\n- `dist/_astro/**/*.js` - Client-side JavaScript\n- `dist/_astro/**/*.css` - Compiled CSS\n- `dist/server/**/*.mjs` - Server code (SSR mode)\n- `dist/client/_astro/**/*` - Client assets (SSR mode)\n\n### Nuxt 3\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"nuxt build \u0026\u0026 classpresso optimize --dir .output --ssr\"\n  }\n}\n```\n\n### SvelteKit\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"vite build \u0026\u0026 classpresso optimize --dir build --ssr\"\n  }\n}\n```\n\n### Remix\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"remix build \u0026\u0026 classpresso optimize --dir build --ssr\"\n  }\n}\n```\n\n### Solid Start\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"vinxi build \u0026\u0026 classpresso optimize --dir .output --ssr\"\n  }\n}\n```\n\n### Qwik\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"qwik build \u0026\u0026 classpresso optimize --dir dist --ssr\"\n  }\n}\n```\n\n### Angular\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"ng build \u0026\u0026 classpresso optimize --dir dist/my-app\"\n  }\n}\n```\n\nFor Angular 17+, the output is in `dist/[project-name]/browser`.\n\n### Gatsby\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"gatsby build \u0026\u0026 classpresso optimize --dir public\"\n  }\n}\n```\n\n### Eleventy (11ty)\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"eleventy \u0026\u0026 classpresso optimize --dir _site\"\n  }\n}\n```\n\n### Hugo\n\n```bash\nhugo \u0026\u0026 classpresso optimize --dir public\n```\n\n### Docusaurus\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"docusaurus build \u0026\u0026 classpresso optimize --dir build\"\n  }\n}\n```\n\n### VitePress\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"vitepress build \u0026\u0026 classpresso optimize --dir .vitepress/dist\"\n  }\n}\n```\n\n## SSR-Safe Mode\n\nFor **Next.js App Router**, **Remix**, or any SSR framework with hydration, use the `--ssr` flag to prevent hydration mismatches:\n\n```bash\nclasspresso optimize --ssr\n```\n\n### Check Before You Optimize\n\nUse the `validate` command to detect potential hydration issues before optimizing:\n\n```bash\nclasspresso validate\n```\n\nThis shows which patterns are safe to consolidate and which might cause issues. If you see warnings, use `--ssr` mode.\n\n### What it does\n\nSSR-safe mode only consolidates patterns that appear in **both** server-rendered HTML and client-side JavaScript. This ensures the browser sees identical class names during hydration.\n\n**Without `--ssr`:** A pattern in HTML might get consolidated, but the JavaScript bundle still references the original classes → hydration mismatch error.\n\n**With `--ssr`:** Only patterns found in both places are consolidated → perfect hydration.\n\n### When to use\n\n**Use `--ssr` for these frameworks:**\n- **Next.js App Router** - Always recommended\n- **Nuxt 3** - Recommended\n- **SvelteKit** - Recommended\n- **Remix** - Recommended\n- **Solid Start** - Recommended\n- **Qwik** - Recommended\n- **Astro SSR/Hybrid** - If using `client:*` directives with React/Vue/Svelte islands\n- **RedwoodJS** - If using SSR features\n\n**SSR flag NOT needed:**\n- **Next.js Pages Router** - Different hydration model\n- **Astro Static** - No hydration\n- **Gatsby** - Static generation\n- **Eleventy (11ty)** - Static only\n- **Hugo** - Static only\n- **VitePress** - Static docs\n- **Docusaurus** - Static docs\n- **Angular** - Client-side rendering\n- **Ember** - Client-side rendering\n- **Static sites (plain HTML)** - No hydration\n\n### Configuration\n\n```javascript\n// classpresso.config.js\nmodule.exports = {\n  ssr: true, // Enable SSR-safe mode\n};\n```\n\n## Debug Mode\n\nWhen troubleshooting issues, enable debug mode to generate a detailed log file:\n\n```bash\nclasspresso optimize --debug\n```\n\nThis creates `classpresso-debug.log` in your build directory containing:\n- **System info**: Node version, OS, platform\n- **Config resolution**: Final merged config values\n- **Operation trace**: Every step with timestamps and timing\n- **Error details**: Full stack traces if errors occur\n\nThe log file location is displayed when the command completes. Share this file when reporting issues.\n\n## Error Reporting\n\nOpt-in to automatically send error reports to help improve classpresso:\n\n```bash\nclasspresso optimize --send-error-reports --error-report-url https://your-webhook.com/errors\n```\n\nOr configure in `classpresso.config.js`:\n\n```javascript\nmodule.exports = {\n  sendErrorReports: true,\n  errorReportUrl: 'https://your-webhook.com/errors',\n};\n```\n\n**Privacy**: Error reports only include:\n- Classpresso version, Node version, OS\n- Error message and stack trace\n- Non-sensitive config values (thresholds, flags)\n\n**Excluded**: Full file paths, project structure, class names\n\n## Configuration\n\nCreate a `classpresso.config.js` file in your project root:\n\n```javascript\nmodule.exports = {\n  // Build directory\n  buildDir: '.next',\n\n  // Consolidation thresholds\n  minOccurrences: 2,    // Pattern must appear at least 2 times\n  minClasses: 2,        // Pattern must have at least 2 classes\n  minBytesSaved: 10,    // Must save at least 10 bytes\n\n  // Hash configuration\n  hashPrefix: 'cp-',    // Prefix for consolidated classes\n  hashLength: 5,        // Hash length (5 = 1M+ unique combinations)\n\n  // Classes to exclude from consolidation (safelist)\n  exclude: {\n    prefixes: ['js-', 'data-', 'hook-', 'track-'],\n    suffixes: ['-handler', '-trigger'],\n    classes: ['no-consolidate'],\n    patterns: [/^qa-/, /^test-/, /^e2e-/],\n  },\n\n  // CSS output options\n  cssLayer: false,      // Wrap in @layer (e.g., 'utilities') or false for none\n\n  // SSR \u0026 Hydration\n  ssr: false,           // Enable SSR-safe mode for hydration compatibility\n\n  // Debug options\n  dataAttributes: false, // Add data-cp-original attribute with original classes\n  debug: false,          // Generate detailed debug log file\n\n  // Error reporting (opt-in)\n  sendErrorReports: false,           // Send error reports to webhook\n  errorReportUrl: undefined,         // Webhook URL (HTTPS required)\n\n  // Output options\n  manifest: true,       // Generate manifest.json\n  backup: false,        // Create .bak files\n};\n```\n\n## Benchmark Methodology\n\nTests run using Playwright with Chrome DevTools Protocol:\n\n```\nTest Environment\n────────────────────────────────────────────────────\nBrowser: Chromium (headless)\nCPU: Throttled 4x (simulates mobile)\nMetrics: Performance.getMetrics() API\n\nTest Pages\n────────────────────────────────────────────────────\n500 components: ~26,500 class instances\n1000 components: ~53,000 class instances\n\nEach component contains:\n- Card container (8 classes)\n- Header (12 classes)\n- Button (15 classes)\n- Badge (6 classes)\n- Input (12 classes)\n```\n\nRun benchmarks yourself:\n\n```bash\nnpm run benchmark\n```\n\n## Example Output\n\n```\n╔═══════════════════════════════════════════════════════════╗\n║                   CLASSPRESSO RESULTS                     ║\n╠═══════════════════════════════════════════════════════════╣\n║ Files Scanned:                                         45 ║\n║ Files Modified:                                        12 ║\n╠═══════════════════════════════════════════════════════════╣\n║ CLASS CONSOLIDATION                                       ║\n║ Patterns found:                                       234 ║\n║ Patterns consolidated:                                 67 ║\n║ Total occurrences replaced:                           834 ║\n╠═══════════════════════════════════════════════════════════╣\n║ BROWSER PERFORMANCE IMPACT                                ║\n║ Class lookups eliminated:                          12,510 ║\n║ Estimated style recalc improvement:                  ~50% ║\n║ Estimated First Paint improvement:                   ~42% ║\n╠═══════════════════════════════════════════════════════════╣\n║ BONUS: SIZE REDUCTION                                     ║\n║ HTML bytes saved:                                12,450 B ║\n║ CSS overhead:                                     3,200 B ║\n║ Net reduction:                                    9,250 B ║\n╚═══════════════════════════════════════════════════════════╝\n```\n\n## API Usage\n\nUse Classpresso programmatically:\n\n```typescript\nimport {\n  loadConfig,\n  scanBuildOutput,\n  detectConsolidatablePatterns,\n  createClassMappings,\n  generateConsolidatedCSS,\n  transformBuildOutput,\n} from 'classpresso';\n\nasync function optimize() {\n  const config = await loadConfig('.next');\n\n  // Scan for patterns\n  const scanResult = await scanBuildOutput(config);\n\n  // Detect consolidation candidates\n  const candidates = detectConsolidatablePatterns(\n    scanResult.occurrences,\n    config\n  );\n\n  // Create mappings\n  const mappings = createClassMappings(candidates);\n\n  // Generate CSS\n  const css = await generateConsolidatedCSS(mappings, config.buildDir, config.cssLayer);\n\n  // Transform build\n  await transformBuildOutput(mappings, config);\n}\n```\n\n## FAQ\n\n**Does this affect my development workflow?**\n\nNo. Classpresso is a **post-build** tool that only runs after `npm run build`. During development (`npm run dev`), you see your normal Tailwind/utility classes exactly as you wrote them — perfect for debugging and toggling classes in DevTools. Classpresso only transforms the compiled production output.\n\n**Why does this make sites faster?**\n\nEvery CSS class is work for the browser. With utility-first CSS, a button might have 15+ classes. Classpresso consolidates repeated patterns so there's less to parse, match, and calculate.\n\n**What about bundle size?**\n\nThat's a bonus! HTML typically drops 50-60%. But the real win is browser performance — style recalculation happens on every page load, every DOM change, every interaction. 50% faster there is huge.\n\n**Do I need to change my code?**\n\nNo. Classpresso runs on your build output, not source code. Your components stay exactly the same.\n\n**Is there runtime overhead?**\n\nZero. Classpresso is build-time only. No JavaScript added, no runtime processing.\n\n## License\n\nMIT\n\n## Links\n\n- Website: [https://classpresso.com](https://classpresso.com?utm_source=github\u0026utm_medium=referral\u0026utm_campaign=github-readme)\n- GitHub: [https://github.com/TheDecipherist/classpresso](https://github.com/TheDecipherist/classpresso)\n- npm: [https://www.npmjs.com/package/classpresso](https://www.npmjs.com/package/classpresso)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedecipherist%2Fclasspresso","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthedecipherist%2Fclasspresso","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedecipherist%2Fclasspresso/lists"}