{"id":13726601,"url":"https://github.com/ml-in-barcelona/jsoo-css","last_synced_at":"2025-07-14T19:31:56.489Z","repository":{"id":44568323,"uuid":"345634002","full_name":"ml-in-barcelona/jsoo-css","owner":"ml-in-barcelona","description":"CSS Typed functional interface in jsoo, bindings to inline styles and emotion","archived":false,"fork":false,"pushed_at":"2023-10-09T09:24:52.000Z","size":296,"stargazers_count":14,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-13T19:02:52.520Z","etag":null,"topics":["css","css-in-js","js-of-ocaml","jsoo","ocaml","reason"],"latest_commit_sha":null,"homepage":"","language":"Reason","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/ml-in-barcelona.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2021-03-08T11:33:23.000Z","updated_at":"2023-10-04T03:33:28.000Z","dependencies_parsed_at":"2024-01-06T07:45:54.528Z","dependency_job_id":null,"html_url":"https://github.com/ml-in-barcelona/jsoo-css","commit_stats":null,"previous_names":["reason-in-barcelona/jsoo-css"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml-in-barcelona%2Fjsoo-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml-in-barcelona%2Fjsoo-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml-in-barcelona%2Fjsoo-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml-in-barcelona%2Fjsoo-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ml-in-barcelona","download_url":"https://codeload.github.com/ml-in-barcelona/jsoo-css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225994828,"owners_count":17556830,"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-in-js","js-of-ocaml","jsoo","ocaml","reason"],"created_at":"2024-08-03T01:03:14.259Z","updated_at":"2024-11-23T03:09:40.671Z","avatar_url":"https://github.com/ml-in-barcelona.png","language":"Reason","funding_links":[],"categories":["Reason"],"sub_categories":[],"readme":"# jsoo-css\n\njsoo-css gives a complementary API for dealing with styles in jsoo. Provides implementations to inline styles or use [emotion.sh](https://emotion.sh) to enable CSS-in-JS mechanism. Plays really well with [jsoo-react](https://github.com/ml-in-barcelona/jsoo-react) but not only.\n\n## Example\n\n```reason\nmodule App = {\n  open Jsoo_css;\n\n  let app =\n    Emotion.make([|\n      display(`flex),\n      width(px(1050)),\n      flexDirection(`column),\n      alignItems(`center),\n      padding(px(80)),\n    |]);\n\n  let h2 =\n    Inline.style([|padding2(~v=`px(10), ~h=`px(5)), color(Colors.grey)|]);\n\n  let h1 = Inline.style([|color(`rgb((123, 123, 123)))|]);\n\n  let box =\n    Emotion.make([|\n      color(`hex(\"333\")),\n      backgroundColor(`hex(\"C0FFEE\")),\n      padding(px(45)),\n      borderRadius(px(8)),\n      fontSize(px(22)),\n      fontWeight(`bold),\n    |]);\n\n  [@react.component]\n  let make = () =\u003e {\n    \u003cdiv className=app\u003e\n      \u003ch1 style=h1\u003e {React.string({|Hello OCamler 🐫|})} \u003c/h1\u003e\n      \u003ch2 style=h2\u003e\n        {React.string(\"Welcome to the world of React \u0026 CSS-in-JS\")}\n      \u003c/h2\u003e\n      \u003cdiv className=box\u003e\n        {React.string(\"This is a title styled with emotion.sh\")}\n      \u003c/div\u003e\n    \u003c/div\u003e;\n  };\n};\n\nReact.Dom.renderToElementWithId(\u003cApp /\u003e, \"demo\");\n```\n\n## Instalation\n\n1. Install from from github (not published on opam)\n\n```sh\nopam pin add -y jsoo-css https://github.com/ml-in-barcelona/jsoo-css.git\n```\n\n2. Add `jsoo-css` library on your executable stanza with `modes js`\n\n```dune\n(executables\n(names index)\n(modes js)\n(libraries jsoo-css))\n```\n\n3. For emotion, need to provide global dependency with `(js_of_ocaml (javascript_files globals.js))`\n\n```js\n// globals.js\njoo_global_object.emotion = require(\"@emotion/css\");\n```\n\n### Acknowledgements\n\nThis project is based on [bs-css](https://github.com/reasonml-labs/bs-css), so, many thanks to [@giraud](https://github.com/giraud).\nThanks to [bs-declaredom](https://github.com/Risto-Stevcev/bs-declaredom) for such a precise HTML and CSS implementation for BuckleScript.\nThanks to [elm-css](https://github.com/rtfeldman/elm-css) for being an inspiration to overall API design.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fml-in-barcelona%2Fjsoo-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fml-in-barcelona%2Fjsoo-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fml-in-barcelona%2Fjsoo-css/lists"}