{"id":20838829,"url":"https://github.com/royalicing/ctss","last_synced_at":"2025-05-08T21:29:53.761Z","repository":{"id":72483346,"uuid":"169227788","full_name":"RoyalIcing/ctss","owner":"RoyalIcing","description":"Functional CSS meet TypeScript","archived":false,"fork":false,"pushed_at":"2019-03-17T09:36:31.000Z","size":157,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-08T21:29:43.650Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://typedtailwind.netlify.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/RoyalIcing.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}},"created_at":"2019-02-05T11:07:25.000Z","updated_at":"2022-10-24T04:25:15.000Z","dependencies_parsed_at":"2023-05-18T15:34:08.652Z","dependency_job_id":null,"html_url":"https://github.com/RoyalIcing/ctss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoyalIcing%2Fctss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoyalIcing%2Fctss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoyalIcing%2Fctss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoyalIcing%2Fctss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RoyalIcing","download_url":"https://codeload.github.com/RoyalIcing/ctss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253153102,"owners_count":21862311,"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":[],"created_at":"2024-11-18T01:11:38.411Z","updated_at":"2025-05-08T21:29:53.740Z","avatar_url":"https://github.com/RoyalIcing.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CTSS: Composable TypeScript Styles\n\n## Benefits\n\n- Works with React, Vue, Preact.\n- Use static CSS, _not_ CSS-in-JS.\n  - No dynamically inserted stylesheets.\n  - No [CSS injection attacks.](https://frontarm.com/james-k-nelson/how-can-i-use-css-in-js-securely/)\n  - No JavaScript event subscribers for `@media` queries, `:hover`, `:focus`, `:active`.\n- Autocompletion and type-safety with TypeScript — typos in class names are compile-time errors.\n- Handle breakpoints easily: `sm() md() lg() xl()`\n- Handle hover and focus states: `hover() focus() active()`\n- Reusable atomic building blocks for your components.\n\n## Example with TailwindCSS\n\nUsing the our [TailwindCSS functions](https://github.com/RoyalIcing/ctss/blob/master/packages/tailwind/README.md). You can bring your own too.\n\n### Compose multiple classes with type-safety\n\n```ts\nimport { ctss } from \"ctss\";\nimport { text, font, bg, p } from \"ctss-tailwind\";\n\nconst className = ctss(\n  text(\"center\", \"lg\", \"purple-dark\"),\n  font(\"sans\")\n  bg(\"white\"),\n  p(\"4\")\n);\n// \"text-center text-lg text-purple-dark font-sans bg-white p-4\"\n```\n\n### Handle hover states\n\n```ts\nconst className = ctss(\n  bg(\"white\"),\n  hover(\n    bg(\"red\")\n  )\n);\n// \"bg-white hover:bg-red\"\n```\n\n### Dynamically change based on variables\n\n```ts\nconst makeButtonClass = (isPrimary: boolean) =\u003e ctss(\n  isPrimary ? bg(\"primary\") : bg(\"white\"),\n  hover(\n    isPrimary ? bg(\"primary-light\") : bg(\"grey-lightest\")\n  )\n);\n\nmakeButtonClass(true); // \"bg-primary hover:bg-primary-light\"\nmakeButtonClass(false); // \"bg-white hover:bg-grey-lightest\"\n```\n\n\n## Core package: @ctss/core\n\nCore currently has two functions.\n\n```ts\nexport function ctss\u003cName extends string\u003e(...arrayOfNames: Array\u003cArray\u003cName\u003e\u003e): string;\n\nexport function addPrefixToMany(arrayOfSuffixes: Array\u003cArray\u003cstring\u003e\u003e, prefix: string): Array\u003cstring\u003e;\n```\n\n## Further Reading\n\n- [CSS Utility Classes and “Separation of Concerns”](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)\n- [In Defense of Functional CSS](https://www.mikecr.it/ramblings/functional-css/)\n- [In Defense of Utility-First CSS](https://frontstuff.io/in-defense-of-utility-first-css)\n- [Shopify’s Polaris: Design Tokens](https://shopify.github.io/polaris-tokens/)\n- [Thumbtack’s Thumbprint: Color System](https://thumbprint.design/guide/product/color/)\n- [Salesforce’s Lightning: Design Tokens](https://www.lightningdesignsystem.com/design-tokens/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyalicing%2Fctss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froyalicing%2Fctss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyalicing%2Fctss/lists"}