{"id":15763094,"url":"https://github.com/matheusps/clssx","last_synced_at":"2026-02-05T15:31:16.933Z","repository":{"id":36484506,"uuid":"214651870","full_name":"matheusps/clssx","owner":"matheusps","description":"Simple utilities that join strings and objects conditionally","archived":false,"fork":false,"pushed_at":"2023-01-04T22:34:43.000Z","size":4552,"stargazers_count":1,"open_issues_count":26,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-04T11:41:16.449Z","etag":null,"topics":["classnames","css","react","style","typescript","utility"],"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/matheusps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-12T13:28:53.000Z","updated_at":"2019-11-04T13:28:44.000Z","dependencies_parsed_at":"2023-01-17T02:00:53.230Z","dependency_job_id":null,"html_url":"https://github.com/matheusps/clssx","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/matheusps/clssx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheusps%2Fclssx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheusps%2Fclssx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheusps%2Fclssx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheusps%2Fclssx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matheusps","download_url":"https://codeload.github.com/matheusps/clssx/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheusps%2Fclssx/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263047678,"owners_count":23405280,"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","react","style","typescript","utility"],"created_at":"2024-10-04T11:40:34.740Z","updated_at":"2026-02-05T15:31:16.890Z","avatar_url":"https://github.com/matheusps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# clssx\n\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![CircleCI](https://circleci.com/gh/matheusps/clssx.svg?style=svg)](https://circleci.com/gh/matheusps/clssx) [![Greenkeeper badge](https://badges.greenkeeper.io/matheusps/clssx.svg)](https://greenkeeper.io/)\n\nI just got tired of copying these functions throughout my projects and decided to turn them into a simple library.\n\n### Installing from npm\n\n`yarn add clssx` or `npm install clssx`\n\n### Usage\n\nImport `csx` or `ssx` from the library\n\n```javascript\nimport { csx, ssx } from 'clssx'\n```\n\n**Example using react:** https://codesandbox.io/s/vigorous-voice-ef38p\n\n#### csx\n\nIt receives any amount of `strings`, `numbers` or `conditional objects` and returns a single `string` containing the allowed rulesets.\n\n`type csx = (...rulesets: Array\u003cstring | number | [key:string]: boolean\u003e) =\u003e string`\n\nEx:\n\n```javascript\ncsx('') // =\u003e ''\ncsx('flex padding-ns') // =\u003e 'flex padding-ns'\ncsx('flex padding-ns', 't-bold') // =\u003e 'flex padding-ns t-bold'\n\ncsx(0) // =\u003e '0'\ncsx(1, 2, 3) // =\u003e '1 2 3'\ncsx(1, 't-bold') // =\u003e '1 t-bold'\n\ncsx({ 'flex padding-ns': false, grow: true }) // =\u003e 'grow'\ncsx({ 'flex padding-ns': false, grow: false }) // =\u003e ''\ncsx({ 'flex padding-ns': true, grow: true }) // =\u003e 'flex padding-ns grow'\n\ncsx(1, { 'flex padding-ns': true }, { grow: true }, 'margin-xl') // =\u003e '1 flex padding-ns grow margin-xl'\n```\n\n#### ssx\n\nIt receives any amount of `objects` or `arrays with length 2` and returns a single `object` containing the allowed rulesets.\n\n`type ssx = (...rulesets: Array\u003cObject, boolean\u003e) =\u003e Object`\n\nEx:\n\n```javascript\nssx({}) // =\u003e {}\nssx({ padding: 1 }) // =\u003e {padding: 1}\nssx({ padding: 1 }, { display: 'flex' }) // =\u003e {padding: 1, display='flex'}\nssx({ padding: 1 }, [{ display: 'flex' }, false]) // =\u003e {padding: 1}\nssx({ padding: 1 }, [{ display: 'flex' }, false], [{ display: 'inline' }, true]) // =\u003e {padding: 1, display: 'inline'}\n```\n\n### Scripts cheatset\n\n- `yarn start`: Run `yarn build` in watch mode\n- `yarn test:watch`: Run test suite in [interactive watch mode](http://facebook.github.io/jest/docs/cli.html#watch)\n- `yarn test:prod`: Run linting\n- `yarn build`: Generate bundles and typings, create docs\n- `yarn lint`: Lints code\n- `yarn release`: Publishes the package\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatheusps%2Fclssx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatheusps%2Fclssx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatheusps%2Fclssx/lists"}