{"id":22710551,"url":"https://github.com/smallhelm/js-managed-css","last_synced_at":"2025-08-07T15:31:19.815Z","repository":{"id":57283316,"uuid":"47296539","full_name":"smallhelm/js-managed-css","owner":"smallhelm","description":"Define and insert CSS via javascript. This also generates unique class and id names automatically. Handy when using virtual-dom (or react) inline css as your primary styling.","archived":false,"fork":false,"pushed_at":"2016-05-25T15:27:17.000Z","size":11,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-04T23:02:42.748Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/smallhelm.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}},"created_at":"2015-12-03T00:14:38.000Z","updated_at":"2016-03-19T04:00:22.000Z","dependencies_parsed_at":"2022-09-19T23:22:25.911Z","dependency_job_id":null,"html_url":"https://github.com/smallhelm/js-managed-css","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallhelm%2Fjs-managed-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallhelm%2Fjs-managed-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallhelm%2Fjs-managed-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallhelm%2Fjs-managed-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smallhelm","download_url":"https://codeload.github.com/smallhelm/js-managed-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229057638,"owners_count":18013289,"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-12-10T12:10:29.238Z","updated_at":"2024-12-10T12:10:30.000Z","avatar_url":"https://github.com/smallhelm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# js-managed-css\n\n[![build status](https://secure.travis-ci.org/smallhelm/js-managed-css.svg)](https://travis-ci.org/smallhelm/js-managed-css)\n[![dependency status](https://david-dm.org/smallhelm/js-managed-css.svg)](https://david-dm.org/smallhelm/js-managed-css)\n\nDefine and insert CSS via javascript. This also generates unique class and id names automatically. Handy when using virtual-dom (or react) inline css as your primary styling.\n\n```js\nvar jsCss = require(\"js-managed-css\");\n\nvar btn_height = 10;\n\nvar vars = jsCss({\n  \".$btn\": {\n    \"color\": \"blue\",\n    \"height\": btn_height + \"px\",\n    \":hover\": {\n      \"color\": \"red\"\n    },\n    \"\u0026.active\": {\n      \"color\": \"yello\"\n    }\n  },\n  \"#$nav\": {\n    \"\u003e .$link\": {\n      \"margin\": \"0 auto\"\n    }\n  }\n});\n\n//At this point your css was compiled and inserted into the DOM\n//\"vars\" is an object where the keys are your variable names and\n//the values are the generated names\n\n//now in your rendering code you can use variables from your css \nh(\"a.\" + vars.btn, \"click me\")\n```\n\n## Why?\nModular css code that lives right next to the js code that depends on it.\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmallhelm%2Fjs-managed-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmallhelm%2Fjs-managed-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmallhelm%2Fjs-managed-css/lists"}