{"id":16114712,"url":"https://github.com/solarliner/preact-dandy","last_synced_at":"2025-04-06T08:16:59.262Z","repository":{"id":57157094,"uuid":"181768981","full_name":"SolarLiner/preact-dandy","owner":"SolarLiner","description":"Small and fancy (like my pet dog) CSS-in-JS solution for preact.","archived":false,"fork":false,"pushed_at":"2019-04-18T21:50:52.000Z","size":132,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-12T13:48:02.338Z","etag":null,"topics":["component","css-in-js","javascript","js","preact"],"latest_commit_sha":null,"homepage":null,"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/SolarLiner.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":"2019-04-16T21:20:33.000Z","updated_at":"2019-04-18T21:50:53.000Z","dependencies_parsed_at":"2022-09-03T18:51:49.835Z","dependency_job_id":null,"html_url":"https://github.com/SolarLiner/preact-dandy","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolarLiner%2Fpreact-dandy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolarLiner%2Fpreact-dandy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolarLiner%2Fpreact-dandy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolarLiner%2Fpreact-dandy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SolarLiner","download_url":"https://codeload.github.com/SolarLiner/preact-dandy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247451665,"owners_count":20940944,"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":["component","css-in-js","javascript","js","preact"],"created_at":"2024-10-09T20:15:31.902Z","updated_at":"2025-04-06T08:16:59.241Z","avatar_url":"https://github.com/SolarLiner.png","language":"TypeScript","readme":"# preact-dandy\nSmall and fancy (like my pet dog) CSS-in-JS solution for preact.\n\n![License](https://img.shields.io/npm/l/preact-dandy.svg)\n![npm version](https://img.shields.io/npm/v/preact-dandy.svg)\n![preact peer dependency version](https://img.shields.io/npm/dependency-version/preact-dandy/peer/preact.svg)\n![npm type definitions](https://img.shields.io/npm/types/preact-dandy.svg)\n\n## Install\n\n```bash\nnpm i preact-dandy\n```\n\n## Usage\n\n```typescript\nimport styled from \"preact-dandy\";\n\ninterface ButtonProps {\n  class?: string;\n  color: string;\n  flat?: boolean;\n  dense?: boolean;\n}\nconst Button = styled\u003cButtonProps\u003e(\n  \"button\",\n  {\n    margin: \"0.5em\",\n    padding: \"1em\",\n    border: \"unset\",\n    cursor: \"pointer\",\n    borderRadius: \"5px\"\n  },\n  props =\u003e ({\n    backgroundColor: props.flat ? \"transparent\" : props.color,\n    color: props.flat ? props.color : textColor(props.color),\n    padding: props.dense ? \"0.5em 1em\" : undefined, // Undefined object values are filtered out, use this to not override a property\n    boxShadow: props.flat ? \"initial\" : \"0 1.5px 3px rgba(0,0,0,0.3)\"\n  })\n);\n```\n\nThe main export is a `styled` function which takes 3 arguments:\n\n1. **el** is the element used to render the component. In TypeScript this is restricted to the JSX \"Intrinsic elements\" to prevent use of HOC as it could lead to undesired behavior. This is however just a soft requirement. `el` is simply passed to `createElement` and does not care about its type.\n2. **css** is the CSS object containing the syles to be applied to the component. This object is static, to dynamically style the component, see the `cssGenerator` argument.\n3. **cssGenerator** (optional) is a function that takes the props as input and outputs a CSS object. This allows dynamic styling based on component values.\n\nFor TypeScript users, the `styled` function contains one optional type argument, which is used to type the props of the resulting component. The props are passed to the `cssGenerator` function but also to the resulting component, allowing you to have typed components.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolarliner%2Fpreact-dandy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolarliner%2Fpreact-dandy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolarliner%2Fpreact-dandy/lists"}