{"id":24030504,"url":"https://github.com/callmecavs/string-css","last_synced_at":"2025-04-19T11:41:51.033Z","repository":{"id":57372374,"uuid":"93961538","full_name":"callmecavs/string-css","owner":"callmecavs","description":"Create CSS-in-JS via tagged template strings.","archived":false,"fork":false,"pushed_at":"2017-06-11T23:37:46.000Z","size":33,"stargazers_count":10,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T06:53:23.258Z","etag":null,"topics":["css-in-js","inline-css"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/callmecavs.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}},"created_at":"2017-06-10T19:39:30.000Z","updated_at":"2023-03-08T04:59:12.000Z","dependencies_parsed_at":"2022-09-01T17:32:29.314Z","dependency_job_id":null,"html_url":"https://github.com/callmecavs/string-css","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callmecavs%2Fstring-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callmecavs%2Fstring-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callmecavs%2Fstring-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callmecavs%2Fstring-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/callmecavs","download_url":"https://codeload.github.com/callmecavs/string-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249685298,"owners_count":21310579,"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":["css-in-js","inline-css"],"created_at":"2025-01-08T17:44:36.192Z","updated_at":"2025-04-19T11:41:51.000Z","avatar_url":"https://github.com/callmecavs.png","language":"JavaScript","readme":"# string-css\n\n[![string-css on Travis](https://img.shields.io/travis/callmecavs/string-css.svg?style=flat-square)](https://travis-ci.org/callmecavs/string-css) [![string-css on NPM](https://img.shields.io/npm/v/string-css.svg?style=flat-square)](https://www.npmjs.com/package/string-css) [![Standard JavaScript Style](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)\n\nCreate CSS-in-JS via tagged template strings.\n\n## Install\n\n```sh\n$ npm i string-css --save\n```\n\n## API\n\nThe export is a singleton containing 3 methods:\n\n* [`css`](#css)\n* [`inject`](#inject)\n* [`string`](#string)\n\nBearing in mind the use of the singleton pattern, calls to `inject` or `string` should appear after all styles are created.\n\n### .css(string)\n\nThe function that parses CSS-in-JS template strings.\n\n```javascript\nimport { css } from 'string-css'\n\n// constants should be external\nconst BLACK = 'black'\nconst BLOCK = 'block'\n\n// create rule with strings \u0026 values\n// returns class names to apply to element\nconst rule = css`\n  display: ${ BLOCK };\n  width: 100px;\n  height: 100px;\n\n  background-color: ${ BLACK };\n`\n\n// apply class names to DOM element\ndocument.getElementById('example').className = rule\n```\n\n### .inject()\n\nInjects created styles into the DOM, using [`insertRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule).\n\n```javascript\nimport { inject } from 'string-css'\n\n// synchronously creates a style tag in the head, then inserts the rules\ninject()\n```\n\n### .string()\n\nReturns a string representation of all the created CSS.\n\n```javascript\nimport { string } from 'string-css'\n\n// synchronously creates a string of CSS\nconst style = string()\n```\n\n## See Also\n\n* [hsx](https://github.com/callmecavs/hsx) - Static HTML sites with JSX and webpack (no React).\n* [string-dom](https://github.com/callmecavs/string-dom) - Create HTML strings using JSX (or functions).\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT). © 2017 Michael Cavalea\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallmecavs%2Fstring-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcallmecavs%2Fstring-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallmecavs%2Fstring-css/lists"}