{"id":13607373,"url":"https://github.com/joe-bell/cx","last_synced_at":"2025-04-12T11:32:21.555Z","repository":{"id":44797300,"uuid":"305669466","full_name":"joe-bell/cx","owner":"joe-bell","description":"Concatenate your classes (with shortcuts) 🔗","archived":true,"fork":false,"pushed_at":"2022-09-17T05:09:48.000Z","size":293,"stargazers_count":24,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-18T03:51:41.162Z","etag":null,"topics":["classnames","css","cx","react","typescript"],"latest_commit_sha":null,"homepage":"","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/joe-bell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-20T10:18:48.000Z","updated_at":"2024-03-12T07:08:19.000Z","dependencies_parsed_at":"2022-07-22T02:17:59.176Z","dependency_job_id":null,"html_url":"https://github.com/joe-bell/cx","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-bell%2Fcx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-bell%2Fcx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-bell%2Fcx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-bell%2Fcx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joe-bell","download_url":"https://codeload.github.com/joe-bell/cx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248560224,"owners_count":21124614,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["classnames","css","cx","react","typescript"],"created_at":"2024-08-01T19:01:18.050Z","updated_at":"2025-04-12T11:32:16.546Z","avatar_url":"https://github.com/joe-bell.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003e ⚠️ **This project has been deprecated in favour of [`cva`](https://github.com/joe-bell/cva)**\n\n\u003ch1 align=\"center\"\u003e\n  cx 🔗\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    Concatenate your classes (with shortcuts)\n  \u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@joebell/cx\"\u003e\n    \u003cimg alt=\"NPM Version\" src=\"https://badgen.net/npm/v/@joebell/cx\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@joebell/cx\"\u003e\n    \u003cimg alt=\"Types Included\" src=\"https://badgen.net/npm/types/@joebell/cx\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=@joebell/cx@0.1.0\"\u003e\n    \u003cimg alt=\"Minizipped Size\" src=\"https://badgen.net/bundlephobia/minzip/@joebell/cx\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/joe-bell/cx/blob/main/LICENSE\"\u003e\n    \u003cimg alt=\"MIT License\" src=\"https://badgen.net/github/license/joe-bell/cx\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@joebell/cx\"\u003e\n    \u003cimg alt=\"NPM Downloads\" src=\"https://badgen.net/npm/dm/@joebell/cx\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/joebell_\"\u003e\n    \u003cimg alt=\"Follow @joebell_ on Twitter\" src=\"https://img.shields.io/twitter/follow/joebell_.svg?style=social\u0026label=Follow\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n**`cx`** is a \u003csmall\u003e\u003cstrong\u003etiny\u003c/strong\u003e\u003c/small\u003e function that mimics and extends the popular [`classnames`][classnames] utility with **\"shortcuts\"** to re-use common classes (with TypeScript autocompletion)\n\n\u003e 💡 Works especially nicely with [Tailwind IntelliSense][tw]\n\n## Setup\n\n1. Install the package via your favourite package manager:\n\n   ```sh\n   npm i @joebell/cx\n   ```\n\n2. Create a custom `cx` function for later use.\n\n   Common styles can be defined in the `shortcuts` and accessed by it's `\"key\"` for re-use later.\n\n   \u003e ⚠️ **FYI**: At this point in time, your shortcuts must be a flat object with no nested keys.\n\n   ```ts\n   // styles/index.ts\n   import { createCx } from \"@joebell/cx\";\n\n   const shortcuts = {\n     // Components\n     \"c-container\": [\"block\", \"max-w-5xl\", \"mx-auto\", \"px-4\"],\n     // Utilities\n     \"u-border\": [\"border-dashed\", \"border-black\"],\n   };\n\n   export const cx = createCx(shortcuts);\n   ```\n\n3. Import `cx` into your component or layout.\n\n   **For example, in React.js:**\n\n   ```tsx\n   // pages/index.tsx\n   import { cx } from \"../styles\";\n\n   const Page: React.FC = ({ children }) =\u003e (\n     \u003cmain className={cx(\"c-container\", \"mt-4\")}\u003e{children}\u003c/main\u003e\n   );\n   ```\n\n   _returns…_\n\n   ```html\n   \u003cmain class=\"block max-w-5xl mx-auto px-4 mt-4\"\u003e…\u003c/main\u003e\n   ```\n\n   \u003e 💡 **Tip**: If you're having issues with [Tailwind IntelliSense][tw] in VSCode, try reloading the window\n\n## Acknowledgements\n\nWithout these projects/people, this project wouldn't exist…\n\n- [**classnames** - Jed Watson][classnames]\n\n[classnames]: https://github.com/JedWatson/classnames\n[tw]: https://github.com/tailwindlabs/tailwindcss-intellisense\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoe-bell%2Fcx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoe-bell%2Fcx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoe-bell%2Fcx/lists"}