{"id":23014854,"url":"https://github.com/pierreburel/startijenn-rem","last_synced_at":"2026-05-11T05:45:12.089Z","repository":{"id":52463692,"uuid":"356603690","full_name":"pierreburel/startijenn-rem","owner":"pierreburel","description":"JavaScript function to convert CSS rem units","archived":false,"fork":false,"pushed_at":"2023-03-27T00:15:07.000Z","size":295,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-10T06:43:01.445Z","etag":null,"topics":["css","css-in-js","javascript"],"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/pierreburel.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":"2021-04-10T14:20:31.000Z","updated_at":"2025-02-23T03:22:56.000Z","dependencies_parsed_at":"2024-06-21T15:19:45.532Z","dependency_job_id":"63eb1e8c-8b71-45b0-955f-1297a786f13f","html_url":"https://github.com/pierreburel/startijenn-rem","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreburel%2Fstartijenn-rem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreburel%2Fstartijenn-rem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreburel%2Fstartijenn-rem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreburel%2Fstartijenn-rem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pierreburel","download_url":"https://codeload.github.com/pierreburel/startijenn-rem/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246863912,"owners_count":20846335,"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","javascript"],"created_at":"2024-12-15T11:10:10.798Z","updated_at":"2026-05-11T05:45:07.024Z","avatar_url":"https://github.com/pierreburel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# startijenn-rem [![Node.js CI](https://github.com/pierreburel/startijenn-rem/actions/workflows/node.js.yml/badge.svg)](https://github.com/pierreburel/startijenn-rem/actions/workflows/node.js.yml)\n\nJavaScript function to convert CSS rem units. Used by [postcss-rem](https://github.com/pierreburel/postcss-rem).\n\n## Usage\n\nInstall with `npm i startijenn-rem`.\n\n```js\nimport rem, { em, px, convert } from \"startijenn-rem\";\n\nconst unitless = rem(24);\n// '1.5rem'\n\nconst simple = rem(\"24px\");\n// '1.5rem'\n\nconst multipleValues = rem(\"5px -10px 1.5rem\");\n// '0.3125rem -0.625rem 1.5rem'\n\nconst multipleMixedValues = rem(\"1px solid black\");\n// '0.0625rem solid black'\n\nconst commaSeparatedValues = rem(\"0 0 2px #ccc, inset 0 0 5px #eee\");\n// '0 0 0.125rem #ccc, inset 0 0 0.3125rem #eee'\n\nconst variable = \"5px\";\nconst withVariable = rem(`${variable} 10px`);\n// '0.3125rem 0.625rem'\n\nconst array = rem([24, \"24px\", \"5px -10px 1.5rem\"]);\n// ['1.5rem', '1.5rem', '0.3125rem -0.625rem 1.5rem']\n\nconst object = rem({\n  fontSize: 24,\n  margin: \"24px\",\n  padding: \"5px -10px 1.5rem\",\n});\n// {fontSize: '1.5rem', margin: '1.5rem', padding: '0.3125rem -0.625rem 1.5rem'}\n\nconst changingBaseline = rem(\"24px\", { baseline: 10 });\n// '2.4rem'\n\nconst changingPrecision = rem(\"16px\", { baseline: 12, precision: 3 });\n// '1.333rem'\n\nconst convertToPx = px(\"1.5rem 24px\");\n// '24px 24px'\n\nconst convertFunction = convert(\"24px\", \"em\", { baseline: 12 });\n// '2em' (can only convert to rem, em or px)\n\nconst StyledComponent = styled.h1`\n  font-size: ${(fontSize) =\u003e rem(fontSize)};\n  padding: ${(fontSize) =\u003e em(12, fontSize)};\n  margin: ${rem(\"8px 16px\")};\n`;\n// .StyledComponent { font-size: 1.5rem; padding: 0.5em; margin: 0.5rem 1rem; }\n\nconst h1 = (text) =\u003e \u003cStyledComponent fontSize={24}\u003e{text}\u003c/StyledComponent\u003e;\n```\n\nYou can change the default options of the functions by doing your own aliases.\n\n```js\nimport { convert } from \"startijenn-rem\";\n\nexport const rem = (value) =\u003e convert(value, \"rem\", { baseline: 10 });\n\nexport const em = (value, baseline = 10) =\u003e convert(value, \"em\", { baseline });\n\nexport default rem;\n```\n\n```js\nimport rem, { em } from \"./utils/rem\";\n\nconst unitless = rem(24);\n// '2.4rem'\n\nconst convertToEm = em(\"12px\", \"24px\");\n// '0.5em'\n\nconst object = rem({\n  fontSize: 24,\n  margin: \"24px\",\n  padding: \"5px -10px 1.5rem\",\n});\n// {fontSize: 2.4, margin: '2.4rem', padding: '0.5rem -1rem 1.5rem'}\n\nconst StyledComponent = styled.h1`\n  font-size: ${(fontSize) =\u003e rem(fontSize)};\n  padding: ${(fontSize) =\u003e em(\"6px 12px\", fontSize)};\n`;\n// .StyledComponent { font-size: 2.4rem; padding: 0.25em 0.5em; }\n\nconst h1 = (text) =\u003e \u003cStyledComponent fontSize={24}\u003e{text}\u003c/StyledComponent\u003e;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierreburel%2Fstartijenn-rem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpierreburel%2Fstartijenn-rem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierreburel%2Fstartijenn-rem/lists"}