{"id":21206673,"url":"https://github.com/oncomouse/hyperapp-emotion","last_synced_at":"2025-03-14T23:20:38.477Z","repository":{"id":149628154,"uuid":"140207634","full_name":"oncomouse/hyperapp-emotion","owner":"oncomouse","description":"Use Emotion CSS-in-JS in Hyperapp projects!","archived":false,"fork":false,"pushed_at":"2018-07-09T02:02:31.000Z","size":213,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-21T15:48:47.370Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/oncomouse.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-08T22:42:16.000Z","updated_at":"2018-08-17T18:11:35.000Z","dependencies_parsed_at":"2023-07-08T05:01:11.620Z","dependency_job_id":null,"html_url":"https://github.com/oncomouse/hyperapp-emotion","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oncomouse%2Fhyperapp-emotion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oncomouse%2Fhyperapp-emotion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oncomouse%2Fhyperapp-emotion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oncomouse%2Fhyperapp-emotion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oncomouse","download_url":"https://codeload.github.com/oncomouse/hyperapp-emotion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243658738,"owners_count":20326552,"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":[],"created_at":"2024-11-20T20:56:29.117Z","updated_at":"2025-03-14T23:20:38.471Z","avatar_url":"https://github.com/oncomouse.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hyperapp-emotion\n\n*[Emotion](https://emotion.sh/) bindings for [Hyperapp](https://hyperapp.js.org/)*\n\nThis project provides a way to make [styled components](https://emotion.sh/docs/styled) in Hyperapp using the Emotion CSS-in-JS framework. It is similar to [preact-emotion](https://github.com/emotion-js/emotion/tree/master/packages/preact-emotion) and [react-emotion](https://github.com/emotion-js/emotion/tree/master/packages/react-emotion) in functionality, though not in implementation.\n\nConsider the following example:\n\n~~~javascript\nimport { h } from 'hyperapp'\nimport styled from 'hyperapp-emotion'\n\nconst borderColor = '#0FF'\n\nconst Button = styled('button')`\n  border: 1px solid ${borderColor};\n  color: #000;\n  font-size: ${props =\u003e props.size || '1rem'};\n  \u0026:hover {\n    background: ${borderColor};\n    color: #FFF;\n  }\n`\nexport default Button;\n~~~\n\nThis will export a Hyperapp component with the styles above defined. Additionally, you can pass an optional `size` prop to change the `font-size` property in the button. This works the same as in other styled component implementations.\n\nThe Emotion styled components documentation mentions the following features, most of which (at this point) are supported by `hyperapp-emotion`:\n\n## Changing based on props\n\nThe following works in this library:\n\n~~~javascript\nimport styled from 'react-emotion'\n\nconst Button = styled('button')`\n  color: ${props =\u003e\n    props.primary ? 'hotpink' : 'turquoise'};\n`\n\nconst Container = styled('div')(props =\u003e ({\n  display: 'flex',\n  flexDirection: props.column \u0026\u0026 'column'\n}))\n\nconst view = state =\u003e (\n  \u003cContainer column\u003e\n    \u003cButton\u003e\n      This is a regular button.\n    \u003c/Button\u003e\n    \u003cButton primary\u003e\n      This is a primary button.\n    \u003c/Button\u003e\n  \u003c/Container\u003e\n)\n~~~\n\n## Styling any component\n\nThe following works in this library:\n\n~~~javascript\nimport styled from 'react-emotion'\nconst Basic = ({ className }) =\u003e (\n  \u003cdiv className={className}\u003eSome text\u003c/div\u003e\n)\n\nconst Fancy = styled(Basic)`\n  color: hotpink;\n`\n\nconst view = state =\u003e (\u003cFancy /\u003e)\n~~~\n\n## Change the rendered tag using `withComponent`\n\nThe following works in this library:\n\n~~~javascript\n// Create a section element\nconst Section = styled('section')`\n  background: #333;\n`\n// Create an aside element with the same styles as Section\nconst Aside = Section.withComponent('aside')\nconst view = (state) =\u003e (\n  \u003cdiv\u003e\n    \u003cSection\u003eThis is a section\u003c/Section\u003e\n    \u003cAside\u003eThis is an an aside\u003c/Aside\u003e\n  \u003c/div\u003e\n)\n~~~\n\n## Targeting another emotion component\n\n*Currently untested, but should work*\n\n~~~javascript\nconst Child = styled('div')`\n  color: red;\n`\n\nconst Parent = styled('div')`\n  ${Child} {\n    color: green;\n  }\n`\nconst view = state =\u003e (\n  \u003cdiv\u003e\n    \u003cParent\u003e\n      \u003cChild\u003egreen\u003c/Child\u003e\n    \u003c/Parent\u003e\n    \u003cChild\u003ered\u003c/Child\u003e\n  \u003c/div\u003e\n)\n~~~\n\n## Pass refs down using innerRef\n\n*Does not work; is not necessary in / relevant to Hyperapp (?)*\n\n## Element Shorthand\n\n**Note: `babel-plugin-emotion` is required for the element shorthand**\n\n*Currently untested, but should work*\n\n~~~javascript\nconst DivWithoutShorthand = styled('div')`\n  color: green;\n`\n\nconst DivWithShorthand = styled.div`\n  color: hotpink;\n`\n\nconst view = state =\u003e (\n  \u003cDivWithoutShorthand\u003e\n    This is green. \u003cDivWithShorthand\u003eThis is hotpink.\u003c/DivWithShorthand\u003e\n  \u003c/DivWithoutShorthand\u003e\n)\n~~~\n\n## Object styles\n\n*Currently untested, but should work*\n\n~~~javascript\nconst H1 = styled.h1(\n  {\n    fontSize: 20\n  },\n  props =\u003e ({ color: props.color })\n)\n\nconst view = state =\u003e (\n  \u003cH1 color=\"lightgreen\"\u003e\n    This is lightgreen.\n  \u003c/H1\u003e\n)\n~~~\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foncomouse%2Fhyperapp-emotion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foncomouse%2Fhyperapp-emotion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foncomouse%2Fhyperapp-emotion/lists"}