{"id":18347639,"url":"https://github.com/ghivert/hyperapp-style","last_synced_at":"2025-10-07T03:43:47.620Z","repository":{"id":57270128,"uuid":"155733063","full_name":"ghivert/hyperapp-style","owner":"ghivert","description":"Use CSS-in-JS directly in your Hyperapp app, handling media queries and pseudo-classes!","archived":false,"fork":false,"pushed_at":"2018-12-02T14:12:57.000Z","size":11,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-29T07:57:48.904Z","etag":null,"topics":["css","css-in-js","frontend","hyperapp","single-page-app"],"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/ghivert.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":"2018-11-01T15:07:55.000Z","updated_at":"2019-11-23T09:58:24.000Z","dependencies_parsed_at":"2022-08-25T02:20:42.438Z","dependency_job_id":null,"html_url":"https://github.com/ghivert/hyperapp-style","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/ghivert/hyperapp-style","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghivert%2Fhyperapp-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghivert%2Fhyperapp-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghivert%2Fhyperapp-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghivert%2Fhyperapp-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ghivert","download_url":"https://codeload.github.com/ghivert/hyperapp-style/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghivert%2Fhyperapp-style/sbom","scorecard":{"id":425736,"data":{"date":"2025-08-11","repo":{"name":"github.com/ghivert/hyperapp-style","commit":"efd42651da5f108d2abf1ca84e588c177f9c84bc"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/13 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T02:11:30.474Z","repository_id":57270128,"created_at":"2025-08-19T02:11:30.474Z","updated_at":"2025-08-19T02:11:30.474Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277812061,"owners_count":25881286,"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","status":"online","status_checked_at":"2025-10-01T02:00:09.286Z","response_time":88,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","frontend","hyperapp","single-page-app"],"created_at":"2024-11-05T21:14:34.845Z","updated_at":"2025-10-07T03:43:47.602Z","avatar_url":"https://github.com/ghivert.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hyperapp Style\n\nBuilt around Hyperapp, Hyperapp Style let you inline style all your components without hassle, with all the power of CSS! When you use Hyperapp, you can use the `style` attribute out of the box, to inline style your elements. They are added in the `state` attribute in the generated HTML. Not anymore! When using Hyperapp Style, all the style you write in your HTML is directly compiled into CSS classes, and pushed directly to the DOM using CSS Object Model (or CSSOM)!\n\n# An example?\n\n```jsx\nimport { app } from 'hyperapp'\nimport h from 'hyperapp-style'\n\nconst state = {}\nconst actions = {}\n\nconst view = (state, actions) =\u003e (\n  \u003cdiv\u003e\n    \u003cNavbar/\u003e\n    \u003cBody/\u003e\n  \u003c/div\u003e\n)\n\nconst Navbar = () =\u003e (state, actions) =\u003e (\n  \u003cnav style={{ display: 'flex' }}\u003e\n    \u003cimg src='/cool-logo.png'/\u003e\n    \u003ca href='#'\u003eHome\u003c/a\u003e\n  \u003c/nav\u003e\n)\n\nconst Body = () =\u003e (state, actions) =\u003e (\n  \u003cdiv style={{ backgroundColor: 'blue' }}\u003e\n    \u003ch1\u003eI'm an incredible example!\u003c/h1\u003e\n  \u003c/div\u003e\n)\n\napp(state, actions, view, document.getElementById('app'))\n```\n\nIn this example, your div in Body will have a `background-color-blue` class linked in the class attribute, and the corresponding atomic class will be put into your browser, directly into a style node into the `head` section of the HTML page.\n\n# API\n\n## Using CSS\n\nDescribing the style for an element is easy: just use classic CSS, but camelized. `background-color` becomes `backgroundColor`, `font-size` becomes `fontSize`, etc. The CSS key is the object key, and you can just write as string or int the value you want.\n\n## Using pseudo-classes\n\nEvery key you enter in the style object which does not have a value associated (i.e. which have an object) will be considered as pseudo-class entry. Let's say you want to have a different behavior when you hover an element. You can't use a `:hover` class when you're using an inline style. But with Hyperapp Style, you can. An example.\n\n```jsx\nimport { app } from 'hyperapp'\nimport h from 'hyperapp-style'\n\nconst state = {}\nconst actions = {}\n\nconst view = (state, actions) =\u003e (\n  \u003cdiv\u003e\n    \u003cNavbar/\u003e\n    \u003cBody/\u003e\n  \u003c/div\u003e\n)\n\nconst Navbar = () =\u003e (state, actions) =\u003e (\n  \u003cnav style={{ display: 'flex' }}\u003e\n    \u003cimg src='/cool-logo.png'/\u003e\n    \u003ca href='#'\u003eHome\u003c/a\u003e\n  \u003c/nav\u003e\n)\n\n// We want this component to be blue, and red when hovered.\nconst Body = () =\u003e (state, actions) =\u003e (\n  \u003cdiv style={{\n    backgroundColor: 'blue',\n    hover: {\n      backgroundColor: 'red'\n    }\n  }}\u003e\n    \u003ch1\u003eI'm an incredible example!\u003c/h1\u003e\n  \u003c/div\u003e\n)\n\napp(state, actions, view, document.getElementById('app'))\n```\n\nWhen using the `hover` key in the style attribute, and setting an object as value, all CSS inside the object will be considered as pseudo-classed! And this is working with everything you want: hover, active, inactive, invalid, valid, etc.\n\n## About the media queries\n\nThere is three special cases in the style object: `widths` (and not `width`, which is regular CSS, be careful), `screen` and `mobile`. They are special keys used to generate media queries. The `screen` and `mobile` key are regular keys, like pseudo-classes, but generates media queries. (Under the hood, it computes the atomic class and surround the class with a `@media screen { the-rule }`.)  \n`widths` is a little bit different: it accepts an array of objects as value, and each object is a regular style object as usual, but in which you can add a `max` and a `min` keys, which correspond to the `max-width` and `min-width` in the media queries! Let's illustrate this.\n\n```jsx\nimport { app } from 'hyperapp'\nimport h from 'hyperapp-style'\n\nconst state = {}\nconst actions = {}\n\nconst view = (state, actions) =\u003e (\n  \u003cdiv\u003e\n    \u003cNavbar/\u003e\n    \u003cBody/\u003e\n  \u003c/div\u003e\n)\n\nconst Navbar = () =\u003e (state, actions) =\u003e (\n  \u003cnav style={{ display: 'flex' }}\u003e\n    \u003cimg src='/cool-logo.png'/\u003e\n    \u003ca href='#'\u003eHome\u003c/a\u003e\n  \u003c/nav\u003e\n)\n\n// This component is green on small screens, yellow on medium, and\n// red on huge screens. Text is also yellow on small screen and cyan\n// on small mobile.\nconst Body = () =\u003e (state, actions) =\u003e (\n  \u003cdiv style={{\n    widths: [{\n      max: '450px',\n      backgroundColor: 'green',\n      screen: { color: 'yellow' },\n      mobile: { color: 'cyan' }\n    }, {\n      min: '450px',\n      max: '750px',\n      backgroundColor: 'yellow'\n    }, {\n      min: '750px',\n      backgroundColor: 'red'\n    }],\n    screen: {\n      fontSize: '12px'\n    },\n    mobile: {\n      fontSize: '16px'\n    }\n  }}\u003e\n    \u003ch1\u003eI'm an incredible example!\u003c/h1\u003e\n  \u003c/div\u003e\n)\n\napp(state, actions, view, document.getElementById('app'))\n```\n\nTo be precise on media queries, they are applied in order of importance, accordingly to the style object, from top to bottom. The last style applied on element will be the last style in the array.\n\n## Using style in functions\n\nWhen you're using JSX, you can use lowercased words, like `div`, and capitalized words, like `NavBar` in your tags. According to the case, it will not search and render things in the same way. In the first case, it will generate a corresponding HTML element. In the other case, it will render what you want by calling the corresponding function. In this case, you maybe want to access the `style` property in the function? Well, you can! Just use `props.style` and you're good!\n\nAn example to help you understand.\n\n```jsx\nconst Flex = (props, children) =\u003e (\n  \u003cdiv style={{ ...props.style, display: 'flex' }}\u003e{children}\u003c/div\u003e\n)\n\nconst App = (state, actions) =\u003e (\n  \u003cFlex style={{ padding: '12px' }}\n    Here's my content!\n  \u003c/Flex\u003e\n)\n```\n\nIn this case, the styles are not computed right now, and you're free to use them in your functions to combine them, or whatever you want!\n\n# Final words\n\nIf you went through all of this, you're ready to use Hyperapp Style in all your Hyperapp apps!\n\n# Contributing\n\nI love to hear from you if you're using this package! Please, let me know if you encounter bugs or problem, and feel free to submit PR if you think you got something I didn't thought about!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghivert%2Fhyperapp-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghivert%2Fhyperapp-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghivert%2Fhyperapp-style/lists"}