{"id":19540712,"url":"https://github.com/isheretoby/jsgencss","last_synced_at":"2026-05-06T09:42:13.209Z","repository":{"id":246437727,"uuid":"821110238","full_name":"IsHereToby/JsGenCSS","owner":"IsHereToby","description":"Create CSS from JavaScript or TypeScript objects. Instead of writing CSS by hand, you define your styles as objects in your code, and this tool converts them into CSS.","archived":false,"fork":false,"pushed_at":"2024-06-27T21:01:38.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-08T18:36:16.491Z","etag":null,"topics":["css","css-preprocessor","deno","typescript"],"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/IsHereToby.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":"2024-06-27T20:45:46.000Z","updated_at":"2024-06-28T00:46:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"f05936af-d8c5-4dc4-a17b-2547e488b1a0","html_url":"https://github.com/IsHereToby/JsGenCSS","commit_stats":null,"previous_names":["vaserium/jsgencss"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsHereToby%2FJsGenCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsHereToby%2FJsGenCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsHereToby%2FJsGenCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsHereToby%2FJsGenCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IsHereToby","download_url":"https://codeload.github.com/IsHereToby/JsGenCSS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240795007,"owners_count":19858725,"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","css-preprocessor","deno","typescript"],"created_at":"2024-11-11T03:05:50.581Z","updated_at":"2026-05-06T09:42:08.166Z","avatar_url":"https://github.com/IsHereToby.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JsGenCSS\n\nCreate CSS from JavaScript or TypeScript objects. Instead of writing CSS by hand, you define your styles as objects in your code, and this tool converts them into CSS.\n\n## Objects to CSS Using \"mod.ts\"\n\n```ts\nimport { object2css } from \"./mod.ts\";\n// const obj = ...\nconsole.log(object2css(obj)); // Convert obj to css and display to console\n```\n\n## Utilizing Deno's \"generate.ts\" Script\n\n```sh\n# General usage (w/ watch)\ndeno run --allow-read --allow-write generate.ts [INPUT_FILE] [OUTPUT_FILE] --watch\n\n# Console output only\ndeno run --allow-read generate.ts [INPUT_FILE]\n```\n\n## Demo\n\nInput:\n\n```ts\nimport { array2object, object2css } from \"./mod.ts\";\n\nconsole.log(\n  object2css({\n    \"html, body\": {\n      // Simple selector\n      margin: 0, // Simple property\n      padding: 0,\n    },\n    ...array2object([\"left\", \"right\"], (k) =\u003e ({\n      // \"array2object\" helper\n      [`.text-${k}`]: {\n        textAlign: k,\n      },\n    })),\n    \".main\": {\n      margin: `${1 / 2}rem`, // Computed property\n      \".test\": {\n        // Will create a \".main .test\" selector\n        color: \"#f55\",\n        \"\u0026.center\": {\n          // The character '\u0026' allows you to combine with the parent selector \".main .test.center\"\n          textAlign: \"center\",\n        },\n      },\n    },\n  })\n);\n```\n\nOutput (formatted):\n\n```css\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\n.text-left {\n  text-align: left;\n}\n\n.text-right {\n  text-align: right;\n}\n\n.main {\n  margin: 0.5rem;\n}\n\n.main .test {\n  color: #f55;\n}\n\n.main .test.center {\n  text-align: center;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisheretoby%2Fjsgencss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisheretoby%2Fjsgencss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisheretoby%2Fjsgencss/lists"}