{"id":28456840,"url":"https://github.com/cssinjs/css-functions","last_synced_at":"2025-06-30T00:31:27.264Z","repository":{"id":66086198,"uuid":"60456814","full_name":"cssinjs/css-functions","owner":"cssinjs","description":"JavaScript utility functions for CSSinJS to build CSS functions.","archived":false,"fork":false,"pushed_at":"2018-09-14T12:56:01.000Z","size":26,"stargazers_count":73,"open_issues_count":8,"forks_count":9,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-06-06T23:09:04.442Z","etag":null,"topics":["css-functions"],"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/cssinjs.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-06-05T11:33:03.000Z","updated_at":"2024-12-08T09:26:33.000Z","dependencies_parsed_at":"2023-02-22T06:00:48.501Z","dependency_job_id":null,"html_url":"https://github.com/cssinjs/css-functions","commit_stats":{"total_commits":11,"total_committers":4,"mean_commits":2.75,"dds":"0.36363636363636365","last_synced_commit":"d9fbfbc37ece818094bd6c87aa2f765873bb3d0b"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/cssinjs/css-functions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssinjs%2Fcss-functions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssinjs%2Fcss-functions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssinjs%2Fcss-functions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssinjs%2Fcss-functions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cssinjs","download_url":"https://codeload.github.com/cssinjs/css-functions/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssinjs%2Fcss-functions/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262689435,"owners_count":23349132,"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-functions"],"created_at":"2025-06-06T23:09:08.992Z","updated_at":"2025-06-30T00:31:27.236Z","avatar_url":"https://github.com/cssinjs.png","language":"JavaScript","readme":"## JavaScript functions to build CSS functions\n\nThis package ships functions that return the equivalent CSS function syntax.\nThere will be automatic value validation in non-production mode soon.\n\n## Functions\nRight now we ship 25 functions.\u003cbr\u003e\n\n* `hsl(h, s, l)`\n* `hsla(h, s, l, a)`\n* `matrix(a, b, c, d, x, y)`\n* `matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)`\n* `perspective(p)`\n* `rgb(r, g, b)`\n* `rgba(r, g, b, a)`\n* `rotate(x, y)`\n* `rotate3d(x, y, z)`\n* `rotateX(x)`\n* `rotateY(y)`\n* `rotateZ(z)`\n* `scale(x, y)`\n* `scale3d(x, y, z)`\n* `scaleX(x)`\n* `scaleY(y)`\n* `scaleZ(z)`\n* `skew(x, y)`\n* `skewX(x)`\n* `skewY(y)`\n* `translate(x, y)`\n* `translate3d(x, y, z)`\n* `translateX(x)`\n* `translateY(y)`\n* `translateZ(z)`\n\n### Parameter object notation\nAll parameters can always be passed as a single objects as well.\u003cbr\u003e\nThe keys always match the parameter name e.g. `rotate3d({ x, y, z })` except for the following color functions:\n\n* `hsl({ hue, saturation, lightness })`\n* `hsla({ hue, saturation, lightness, alpha })`\n* `rgb({ red, green, blue })`\n* `rgba({ red, green, blue, alpha })`\n\n## Example\n```javascript\nimport { rgba, translate3d } from 'css-functions'\n\n// =\u003e 'rgba(255, 0, 255, 0.5)'\nconst color = rgba(255, 0, 255, 0.5)\nconst color = rgba({\n  red: 255,\n  green: 0,\n  blue: 255,\n  alpha: 0.5\n})\n\n// =\u003e 'translate3d(10px, 10%, 0)'\nconst transform = translate3d('10px', '10%', 0)\nconst transform = translate3d({\n  x: '10px',\n  y: '10%',\n  z: 0\n})\n```\n\n## Multiple functions\nTo combine multiple functions safely, it ships the `multiple` API.\nIt safely combines both returned strings separated by a whitespace.\n\n```javascript\nimport { translateX, scale, rotateX, multiple } from 'css-functions'\n\n// =\u003e 'translateX(10px) translateY(5%) scale(0.5, 0.5) rotateX(180deg)'\nconst combined = multiple(\n  translateX(10),\n  translateY('5%'),\n  scale(0.5, 0.5),\n  rotateX(180)\n)\n```\n\n## Units\nAs the above example shows, we add default units to some numbers.\n#### px\n* `translate`\n* `translate3d`\n* `translateX`\n* `translateY`\n* `translateZ`\n\n#### deg\n* `rotate`\n* `rotate3d`\n* `rotateX`\n* `rotateY`\n* `rotateZ`\n* `skew`\n* `skewX`\n* `skewY`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcssinjs%2Fcss-functions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcssinjs%2Fcss-functions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcssinjs%2Fcss-functions/lists"}