{"id":28491621,"url":"https://github.com/vowdemon/classmix","last_synced_at":"2026-05-09T19:35:37.601Z","repository":{"id":296754464,"uuid":"994390461","full_name":"vowdemon/classmix","owner":"vowdemon","description":"A utility for managing CSS class names with variants and conditions","archived":false,"fork":false,"pushed_at":"2025-06-03T18:47:57.000Z","size":67,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-21T16:47:03.169Z","etag":null,"topics":["classmix","classnames","npm-package","tailwindcss"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@vowdemon/classmix","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vowdemon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2025-06-01T20:44:59.000Z","updated_at":"2025-06-03T18:47:59.000Z","dependencies_parsed_at":"2025-06-03T06:51:42.763Z","dependency_job_id":null,"html_url":"https://github.com/vowdemon/classmix","commit_stats":null,"previous_names":["vowdemon/classmix"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/vowdemon/classmix","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vowdemon%2Fclassmix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vowdemon%2Fclassmix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vowdemon%2Fclassmix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vowdemon%2Fclassmix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vowdemon","download_url":"https://codeload.github.com/vowdemon/classmix/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vowdemon%2Fclassmix/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32833299,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"online","status_checked_at":"2026-05-09T02:00:06.633Z","response_time":123,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["classmix","classnames","npm-package","tailwindcss"],"created_at":"2025-06-08T08:07:54.296Z","updated_at":"2026-05-09T19:35:37.595Z","avatar_url":"https://github.com/vowdemon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Classmix\r\n\r\n[![npm](https://img.shields.io/npm/v/@vowdemon/classmix)](https://www.npmjs.com/package/@vowdemon/classmix)\r\n[![npm](https://img.shields.io/npm/dm/@vowdemon/classmix)](https://www.npmjs.com/package/@vowdemon/classmix)\r\n[![GitHub](https://img.shields.io/github/license/vowdemon/classmix)](https://github.com/vowdemon/classmix)\r\n\r\nA utility for managing CSS class names with variants and conditions.\r\n\r\n## Core Features\r\n\r\n- **Variant System** - Define and combine toggleable style options\r\n- **Slots** - Apply styles to different parts of your components\r\n- **Conditional Styling** - Apply classes based on complex conditions\r\n- **Shared Styles** - Share style rules across multiple slots\r\n- **Component Inheritance** - Extend existing components\r\n- **High Performance** - Optimized for frequent re-renders\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @vowdemon/classmix\r\n```\r\n\r\n## Basic Usage\r\n\r\n### Creating an Instance\r\n\r\n```javascript\r\nimport { createClassmix } from \"classmix\";\r\n\r\n// Basic usage\r\nconst cx = createClassmix();\r\n\r\n// With a wrapper function (like tailwind-merge)\r\nimport { twMerge } from \"tailwind-merge\";\r\nconst cx = createClassmix(twMerge);\r\n```\r\n\r\n### Defining Component Styles\r\n\r\n```javascript\r\nconst button = cx({\r\n  // Base class\r\n  base: \"btn\",\r\n\r\n  // Slot classes\r\n  slots: {\r\n    icon: \"btn-icon\",\r\n    text: \"btn-text\",\r\n  },\r\n\r\n  // Variants\r\n  variants: {\r\n    color: {\r\n      primary: \"bg-blue-500 text-white\",\r\n      secondary: \"bg-gray-500 text-white\",\r\n      danger: \"bg-red-500 text-white\",\r\n    },\r\n    size: {\r\n      sm: \"text-sm py-1 px-2\",\r\n      md: \"text-base py-2 px-4\",\r\n      lg: \"text-lg py-3 px-6\",\r\n    },\r\n    rounded: {\r\n      true: \"rounded-full\",\r\n      false: \"rounded\",\r\n    },\r\n    disabled: {\r\n      true: \"opacity-50 cursor-not-allowed\",\r\n      false: \"\",\r\n    },\r\n  },\r\n\r\n  // Compound variants\r\n  compounds: [\r\n    // Simple condition\r\n    {\r\n      color: \"primary\",\r\n      size: \"lg\",\r\n      class: \"font-bold\",\r\n    },\r\n\r\n    // Slot-specific styling\r\n    {\r\n      color: \"primary\",\r\n      class: {\r\n        icon: \"text-blue-200\",\r\n      },\r\n    },\r\n\r\n    // Function condition\r\n    {\r\n      $when: (ctx) =\u003e ctx.disabled \u0026\u0026 ctx.color === \"primary\",\r\n      class: \"bg-blue-300\",\r\n    },\r\n\r\n    // Shared styles\r\n    {\r\n      disabled: true,\r\n      $share: {\r\n        slots: [\"icon\", \"text\"],\r\n        class: \"opacity-70\",\r\n      },\r\n    },\r\n\r\n    // Dynamic class generation\r\n    {\r\n      $when: (ctx) =\u003e ctx.$isActive,\r\n      class: (ctx) =\u003e `active-${ctx.color}`,\r\n    },\r\n  ],\r\n\r\n  // Default variants\r\n  defaultVariants: {\r\n    color: \"primary\",\r\n    size: \"md\",\r\n    rounded: false,\r\n    disabled: false,\r\n  },\r\n});\r\n```\r\n\r\n### Using Component Styles\r\n\r\n```javascript\r\n// With default variants\r\nconst defaultButton = button();\r\nconsole.log(defaultButton()); // Get base element classes\r\nconsole.log(defaultButton.icon()); // Get icon slot classes\r\nconsole.log(defaultButton.text()); // Get text slot classes\r\n\r\n// With specific variants\r\nconst largeButton = button({ size: \"lg\", color: \"secondary\" });\r\nconsole.log(largeButton());\r\n\r\n// With boolean variants\r\nconst roundedButton = button({ rounded: true });\r\nconsole.log(roundedButton());\r\n\r\n// With context data\r\nconst activeButton = button({ $isActive: true, color: \"danger\" });\r\nconsole.log(activeButton());\r\n\r\n// With slot-level class\r\nconsole.log(button().icon({ class: \"extra-icon-class\" }));\r\n\r\n// With slot-level variant override\r\nconsole.log(button().icon({ disabled: true }));\r\n```\r\n\r\n### Component Inheritance\r\n\r\n```javascript\r\n// Base button\r\nconst baseButton = cx({\r\n  base: \"btn\",\r\n  variants: {\r\n    color: {\r\n      primary: \"bg-blue-500\",\r\n      secondary: \"bg-gray-500\",\r\n    },\r\n  },\r\n});\r\n\r\n// Extended button\r\nconst outlinedButton = cx({\r\n  extends: baseButton,\r\n  variants: {\r\n    outlined: {\r\n      true: \"bg-transparent border-2\",\r\n      false: \"\",\r\n    },\r\n  },\r\n  compounds: [\r\n    {\r\n      color: \"primary\",\r\n      outlined: true,\r\n      class: \"border-blue-500 text-blue-500\",\r\n    },\r\n  ],\r\n});\r\n```\r\n\r\n## Examples\r\n\r\n### Card Component\r\n\r\n```javascript\r\nconst card = cx({\r\n  base: \"rounded overflow-hidden\",\r\n  slots: {\r\n    header: \"p-4 border-b\",\r\n    body: \"p-4\",\r\n    footer: \"p-4 border-t\",\r\n  },\r\n  variants: {\r\n    theme: {\r\n      light: {\r\n        base: \"bg-white border-gray-200\",\r\n        header: \"bg-gray-50\",\r\n        footer: \"bg-gray-50\",\r\n      },\r\n      dark: {\r\n        base: \"bg-gray-800 border-gray-700\",\r\n        header: \"bg-gray-900\",\r\n        footer: \"bg-gray-900\",\r\n      },\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    theme: \"light\",\r\n  },\r\n});\r\n\r\n// Usage\r\nconst darkCard = card({ theme: \"dark\" });\r\nconsole.log(darkCard.header());\r\n```\r\n\r\n### Form Input\r\n\r\n```javascript\r\nconst input = cx({\r\n  base: \"block w-full rounded\",\r\n  slots: {\r\n    label: \"block text-sm font-medium mb-1\",\r\n    input: \"px-3 py-2 border\",\r\n    error: \"mt-1 text-sm\",\r\n  },\r\n  compounds: [\r\n    {\r\n      $when: (ctx) =\u003e Boolean(ctx.error),\r\n      class: { input: \"border-red-500\" },\r\n      $share: {\r\n        slots: [\"label\", \"error\"],\r\n        class: \"text-red-500\",\r\n      },\r\n    },\r\n  ],\r\n});\r\n\r\n// Usage\r\nconst errorInput = input({ error: \"This field is required\" });\r\nconsole.log(errorInput.label());\r\nconsole.log(errorInput.input());\r\nconsole.log(errorInput.error());\r\n```\r\n\r\n## Benchmark\r\n\r\nComparison between Classmix and tailwind-variants using the same test scenarios:\r\n\r\n- Class Composition Performance Comparison (20 slots, 20 variants, 20 compound variants)\r\n\r\n| Test Scenario                  | tv (ops/sec)      | cx (ops/sec)   | Winner | Performance Advantage |\r\n| ------------------------------ | ----------------- | -------------- | ------ | --------------------- |\r\n| **Initialization**             | 1,243,029 ±2.18%  | 164,315 ±2.09% | tv     | +656.49%              |\r\n| **Inheritance Initialization** | 10,834,846 ±3.14% | 124,748 ±1.94% | tv     | +8585.38%             |\r\n| **First Render**               | 4,321 ±1.92%      | 117,482 ±2.47% | cx     | +96.32%               |\r\n| **Repeated Render**            | 4,327 ±1.86%      | 126,054 ±2.40% | cx     | +96.57%               |\r\n| **Props Change**               | 4,286 ±2.13%      | 110,917 ±2.23% | cx     | +96.14%               |\r\n| **Component Lifecycle**        | 891 ±1.88%        | 22,628 ±2.07%  | cx     | +96.06%               |\r\n| **Compound Slots Render**      | 2,110 ±2.15%      | 56,978 ±2.36%  | cx     | +96.30%               |\r\n\r\n\u003e **Test Environment**:  \r\n\u003e CPU: Intel Core i5-13400F  \r\n\u003e Runtime: Node 24.0.1  \r\n\u003e Units: ops/sec (higher is better)  \r\n\u003e Stability: ±% shows standard deviation across runs.\r\n\r\n## LICENSE\r\n\r\nMIT\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvowdemon%2Fclassmix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvowdemon%2Fclassmix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvowdemon%2Fclassmix/lists"}