{"id":13759137,"url":"https://github.com/shatstack/stylenames","last_synced_at":"2025-05-10T09:31:53.380Z","repository":{"id":38260771,"uuid":"263129453","full_name":"shatstack/stylenames","owner":"shatstack","description":"A simple JavaScript utility for conditionally joining inline styles together","archived":false,"fork":false,"pushed_at":"2023-03-04T17:34:29.000Z","size":702,"stargazers_count":20,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-13T20:03:40.781Z","etag":null,"topics":["alpinejs","classnames","inline-css","inline-styles","microbundle","stylenames","styles"],"latest_commit_sha":null,"homepage":"https://npm.im/@shat/stylenames","language":"JavaScript","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/shatstack.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}},"created_at":"2020-05-11T18:50:41.000Z","updated_at":"2024-05-05T06:08:42.000Z","dependencies_parsed_at":"2024-08-03T13:02:44.508Z","dependency_job_id":"42eb3773-c4fa-44e7-83cb-65954eb81bfe","html_url":"https://github.com/shatstack/stylenames","commit_stats":{"total_commits":77,"total_committers":4,"mean_commits":19.25,"dds":0.5194805194805194,"last_synced_commit":"8754afaeb92cc734ea766d550877185499a677f4"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shatstack%2Fstylenames","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shatstack%2Fstylenames/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shatstack%2Fstylenames/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shatstack%2Fstylenames/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shatstack","download_url":"https://codeload.github.com/shatstack/stylenames/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224940800,"owners_count":17395760,"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":["alpinejs","classnames","inline-css","inline-styles","microbundle","stylenames","styles"],"created_at":"2024-08-03T13:00:47.134Z","updated_at":"2024-11-16T16:30:30.552Z","avatar_url":"https://github.com/shatstack.png","language":"JavaScript","readme":"![build](https://github.com/shatstack/stylenames/workflows/build/badge.svg)\n![npm version](https://img.shields.io/npm/v/@shat/stylenames)\n![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@shat/stylenames)\n\n# @shat/stylenames\n\nA simple JavaScript utility for conditionally joining inline styles together.\n\n\u003e This is a fork of the unmaintained [stylenames](https://github.com/kmathmann/stylenames) package\n\n## What does stylenames do?\n\nIn one short sentence: \"stylenames converts an object to a css style string.\"\n\nThink [classNames](https://www.npmjs.com/package/classnames) but for inline styles.\n\n## Install\n\n**From CDN:** Add the following script to the end of your `\u003chead\u003e` section.\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@shat/stylenames@v1.x.x/lib/index.umd.js\"\u003e\u003c/script\u003e\n```\n\nThat's it. It will initialize itself as `styleNames()`.\n\n**From NPM:** Install the package from NPM.\n```js\nnpm install @shat/stylenames\n```\n\nInclude it in your script.\n\n```javascript\nimport styleNames from '@shat/stylenames';\n```\n\n\n## Quick Start\n\nStandalone:\n\n```js\nstyleNames({\n    backgroundColor: 'red',\n    width: '120px',\n    \n    'height':{\n        // If the condition is false the style does not get used.\n        '200px': false,\n        // Only the first value with true condition is used.\n        '300px': true,\n        '400px': true\n    },\n});\n```\n\nWith [Alpine.js](https://github.com/alpinejs/alpine):\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js\" defer\u003e\u003c/script\u003e\n\n\u003cdiv x-data=\"{}\"\u003e\n  \u003cbutton :style=\"styleNames({ backgroundColor: 'red', padding: '20px' })\"\u003e\n    A red button\n  \u003c/button\u003e\n\u003c/div\u003e\n\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@shat/stylenames@v1.x.x/lib/index.umd.js\"\u003e\u003c/script\u003e\n```\n\n## Examples\n\n### Without conditions\n\n```javascript\nlet styles1 = styleNames({\n    height: '120px',\n    width: '100px'\n});\nconsole.log(styles1); //--\u003e 'height:120px;width:100px;'\n```\n       \n### With one condition using a boolean toggle\n\n```javascript\nlet styles1 = styleNames({\n    height: '120px',\n    width: {\n        '200px': false\n    }\n});\nconsole.log(styles1); //--\u003e 'height:120px '\n\nlet styles2 = styleNames({\n    height: '120px',\n    width: {\n        '200px': true\n    }\n});\nconsole.log(styles2); //--\u003e 'height:120px;width:200px;'\n```\n\n### With multiple rules with 1 boolean toggle\n\n```js\nconst styles = styleNames({\n    'height:120px;width:100px;': true\n});\nconsole.log(styles); //--\u003e 'height:120px;width:100px;'\n```\n\n### With camelcased rules\n\n```js\nconst styles = styleNames({backgroundColor: 'red'});\nconsole.log(styles); //--\u003e 'background-color:red;'\n```\n\n### With array input\n\n```js\nconst styles = styleNames(['height:120px', 'width:100px']);\nconsole.log(styles); //--\u003e 'height:120px;width:100px;'\n```\n\n### With more than one condition using a function toggle\n\n```javascript\nlet itemCount = 0;\n\nlet styleNamesConfig = {\n    display: {\n        'none': () =\u003e itemCount === 0\n    },\n    height: '120px',\n    width: {\n        '100px': () =\u003e itemCount \u003c= 1,\n        '200px': () =\u003e itemCount \u003c= 2,\n        '400px': () =\u003e itemCount \u003c= 4,\n        '100%': () =\u003e itemCount \u003e 4\n    }\n};\n\nconsole.log(styleNames(styleNamesConfig)); //--\u003e 'display:none;height:120px;width:100px;'\n\nitemCount++; //1\nconsole.log(styleNames(styleNamesConfig)); //--\u003e 'height:120px;width:100px;'\n\nitemCount++; //2\nconsole.log(styleNames(styleNamesConfig)); //--\u003e 'height:120px;width:200px;'\n\nitemCount++; //3\nconsole.log(styleNames(styleNamesConfig)); //--\u003e 'height:120px;width:400px;'\n\nitemCount += 12; //15\nconsole.log(styleNames(styleNamesConfig)); //--\u003e 'height:120px;width:100%;'\n```\n\n## Contributing\n\n### Requirements\n\n- Node 10\n- Yarn 1.x or npm\n\n### Setup\n\n1. Clone the repository\n2. Run `yarn` or `npm install` installs all required dependencies.\n\n### npm scripts\n\n\u003e Equivalent `npm run \u003cscript\u003e` should also work\n\n- `yarn build` will bundle/transpile JavaScript for all targets using microbundle.\n- `yarn test` will run tests using Jest.\n- `yarn lint` will lint all of the files with [xo](https://github.com/xojs/xo)\n- `yarn format` will run lint with `--fix` option on all the examples files (and tests).\n\n## LICENSE\n\nCode is licensed under the [MIT License](./LICENSE).\n\n## Acknowledgments\n\nThis package is maintained by Hugo from [Code with Hugo](https://codewithhugo.com) and [Alpine.js Weekly](https://alpinejs.codewithhugo.com/newsletter).\n\n\nSpecial thanks to:\n\n- Kevin Mathmann who created [stylenames](https://github.com/kmathmann/stylenames) which this is a fork of.\n- The developers behind\n  - [Alpine.js](https://github.com/alpinejs/alpine)\n  - [Jest](https://github.com/facebook/jest)\n  - [microbundle](https://github.com/developit/microbundle)\n  - [np](https://github.com/sindresorhus/np#readme)\n  - [xo](https://github.com/xojs/xo#readme)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshatstack%2Fstylenames","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshatstack%2Fstylenames","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshatstack%2Fstylenames/lists"}