{"id":13998573,"url":"https://github.com/guilhermerodz/atomic-variants","last_synced_at":"2025-07-23T06:32:07.169Z","repository":{"id":62034121,"uuid":"556696512","full_name":"guilhermerodz/atomic-variants","owner":"guilhermerodz","description":"Tiny utility for handling atomic CSS","archived":true,"fork":false,"pushed_at":"2022-12-30T21:32:15.000Z","size":107,"stargazers_count":13,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-19T08:04:02.411Z","etag":null,"topics":["atomic","classname","classnames","css","react","variants"],"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/guilhermerodz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-24T10:41:58.000Z","updated_at":"2024-10-28T21:43:39.000Z","dependencies_parsed_at":"2023-01-31T16:40:10.529Z","dependency_job_id":null,"html_url":"https://github.com/guilhermerodz/atomic-variants","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/guilhermerodz/atomic-variants","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilhermerodz%2Fatomic-variants","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilhermerodz%2Fatomic-variants/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilhermerodz%2Fatomic-variants/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilhermerodz%2Fatomic-variants/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guilhermerodz","download_url":"https://codeload.github.com/guilhermerodz/atomic-variants/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilhermerodz%2Fatomic-variants/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266103454,"owners_count":23876808,"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":["atomic","classname","classnames","css","react","variants"],"created_at":"2024-08-09T19:01:47.331Z","updated_at":"2025-07-23T06:32:06.881Z","avatar_url":"https://github.com/guilhermerodz.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Atomic Variants\n\n## 🚀 Get Started\n\n```sh\nnpm i @rodz/atomic-variants\n```\n\n### 🧠 Tailwind Intellisense for VSCode\n\nIf you're using the [\"Tailwind CSS IntelliSense\" Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss), you can enable autocompletion for `atomic-variants` by adding the following to your [`settings.json`](https://code.visualstudio.com/docs/getstarted/settings):\n\n```json\n{\n  \"tailwindCSS.experimental.classRegex\": [\n    [\"(?:styled|c[xsb])\\\\(([^)]*)\\\\)\", \"[\\\"'`]([^\\\"'`]*).*?[\\\"'`]\"]\n  ]\n}\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e👍 VSCode Pro Tips\u003c/summary\u003e\n  \n### Improve Regex performance\n\nIf you adopt the `cz` alias instead of `styled` and you are using the Tailwind extension, know you can improve your Regex performance:\n\n```diff\n// .vscode/settings.json\n{\n  \"tailwindCSS.experimental.classRegex\": [\n-     [\"(?:styled|c[xsb])\\\\(([^)]*)\\\\)\", \"[\\\"'`]([^\\\"'`]*).*?[\\\"'`]\"]\n+     [\"c[zxsb]\\\\(([^)]*)\\\\)\", \"[\\\"'`]([^\\\"'`]*).*?[\\\"'`]\"]\n  ]\n}\n\n// src/components/Button.tsx\n- import { styled } from '@rodz/atomic-variants'\n+ import { cz } from '@rodz/atomic-variants'\n\n- export const Button = styled('button', {...})\n+ export const Button = cz('button', {...})\n```\n\n### Project-specific configuration\n\nYou peers can share the same setup if they have installed the Tailwind extension.\nCommit to your `git` repo instead of your personal `User` settings:\n\n```\n✅ Prefer Workspace Settings\nmy-git-repo-directory/\n└── .vscode/\n    └── settings.json 👍\n\n❌ Not Personal Settings\nUsers/\n└── username/\n    └── Library/\n        └── Application Support/\n            └── Code/\n                └── User/\n                    └── settings.json 👎\n```\n\n\u003c/details\u003e\n\n## 🥳 Quick Start\n\n### styled (Composable Components)\n\nIt's a wrapper around [`cb`](#cb-class-builder), built for React JSX composition.\n\n```tsx\nimport { styled } from '@rodz/atomic-variants'\n\nconst Button = styled('button', {\n  base: ['font-semibold', 'border', 'rounded'],\n  variants: {\n    intent: {\n      primary: [\n        'bg-black',\n        'text-white',\n      ],\n      // **or**\n      // primary: \"bg-black text-white\",\n      secondary: [\n        'bg-white',\n        'text-black',\n      ],\n    },\n    size: {\n      small: ['text-sm', 'py-1', 'px-2'],\n      medium: ['text-base', 'py-2', 'px-4'],\n    },\n  },\n  compoundVariants: [{ intent: 'secondary', size: 'small', className: 'uppercase' }],\n  defaultVariants: {\n    intent: 'primary',\n    size: 'medium',\n  },\n})\n\n// It's ready to use. Includes a `variants` prop.\n\u003cButton variants={{ intent: 'secondary' }}\u003eClick me\u003c/Button\u003e\n// =\u003e className: \"font-semibold border rounded bg-white text-black text-base py-2 px-4\"\n```\n\n## 📓 Features\n\n### cz\n\nAlias for `styled`. See [VSCode Pro Tips](#regex-performance) to understand why.\n\n### cx (Class Concat \u0026 Flatten)\n\nA tiny utility for concatenating \u0026 flattening \u0026 cleaning class names.\nSupports arrays of strings in infinite depths. Supports undefined in first depth.\n\n```ts\nimport { cx } from '@rodz/atomic-variants'\n\ncx('a', 'b', 'c')\n// =\u003e \"a b c\"\n\ncx('a', ['b', ['c', 'd'], 'e'], ['f'])\n// =\u003e \"a b c d e f\"\n\ncx('a', undefined, ['b', ['c', 'd']], ['e', ['f', 'g'], 'h'])\n// =\u003e \"a b c d e f g h\"\n```\n\n### cb (Class Builder)\n\nIt's similar to [`styled`](#styled-composable-components), but it returns a normal function instead of of returning a React component.\n\nThe returned function will assign `{ ...props, className }` to a final class name (string).\n\nIn the following example, [`cb`](#cb-class-builder) has been called and returned `button`, which is a function.\n`button` can now be called to reduce its props into a final className.\n\n```ts\nimport { cb } from '@rodz/atomic-variants'\n\nconst button = cb({\n  base: ['font-semibold', 'border', 'rounded'],\n  variants: {\n    intent: {\n      primary: ['bg-black', 'text-white'],\n      // **or**\n      // primary: \"bg-black text-white\",\n      secondary: ['bg-white', 'text-black'],\n    },\n    size: {\n      small: ['text-sm', 'py-1', 'px-2'],\n      medium: ['text-base', 'py-2', 'px-4'],\n    },\n  },\n  compoundVariants: [\n    { intent: 'secondary', size: 'small', className: 'uppercase' },\n  ],\n  defaultVariants: {\n    intent: 'primary',\n    size: 'medium',\n  },\n})\n\nbutton()\n// =\u003e \"font-semibold border rounded bg-black text-white text-base py-2 px-4\"\n\nbutton({ intent: 'secondary', size: 'small' })\n// =\u003e \"font-semibold border rounded bg-white text-black text-sm py-1 px-2 uppercase\"\n```\n\n### cs (Config Shared)\n\nUseful for sharing similar variants between components.\nExpects the same parameters as [`cb`](#cb-class-builder).\n\n```tsx\nimport { cs } from '@rodz/atomic-variants'\n\nconst sharedTableCell = cs({\n  base: [\n    'first:pl-6 last:pr-6',\n    'group-[]/table-condensed:first:pl-4 group-[]/table-condensed:first:pr-4',\n    'group-[]/table-condensed:py-2',\n  ],\n  variants: {\n    align: {\n      start: ['text-start'],\n      center: ['text-center'],\n      end: ['text-end'],\n    },\n  },\n  defaultVariants: { align: 'start' },\n})\n\nexport const Th = styled('th', {\n  ...sharedTableCell,\n  base: [sharedTableCell.base, 'py-3'],\n})\n\nexport const Td = styled('td', {\n  ...sharedTableCell,\n  base: [sharedTableCell.base, 'py-4'],\n})\n```\n\n---\n\n## Acknowledgements:\n\n- [joe-bell/cva](https://github.com/joe-bell/cva) 🧬 for type-safe atomic class names\n- [stitchesjs/stitches](https://github.com/stitchesjs/stitches) 🧵 for React composability\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguilhermerodz%2Fatomic-variants","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguilhermerodz%2Fatomic-variants","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguilhermerodz%2Fatomic-variants/lists"}