{"id":19501246,"url":"https://github.com/acryps/style","last_synced_at":"2026-05-17T05:34:12.538Z","repository":{"id":215646483,"uuid":"739436589","full_name":"acryps/style","owner":"acryps","description":null,"archived":false,"fork":false,"pushed_at":"2026-05-05T13:05:03.000Z","size":392,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-05T13:40:22.894Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/acryps.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-01-05T15:05:27.000Z","updated_at":"2026-05-05T13:05:07.000Z","dependencies_parsed_at":"2024-01-22T09:47:47.963Z","dependency_job_id":"d089ce52-5873-4a12-a4aa-a0aafb91ce70","html_url":"https://github.com/acryps/style","commit_stats":null,"previous_names":["acryps/style"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/acryps/style","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acryps%2Fstyle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acryps%2Fstyle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acryps%2Fstyle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acryps%2Fstyle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/acryps","download_url":"https://codeload.github.com/acryps/style/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acryps%2Fstyle/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33128631,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-16T18:38:32.183Z","status":"online","status_checked_at":"2026-05-17T02:00:05.366Z","response_time":107,"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":[],"created_at":"2024-11-10T22:12:01.627Z","updated_at":"2026-05-17T05:34:12.533Z","avatar_url":"https://github.com/acryps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @acryps/style Style Framework\nDefine your styles in TypeScript!\n\nThis might seem odd - why would you define styles in TypeScript and not in a specialized language like CSS or SCSS?\nBecause this allows us to leverage the full power of TypeScript.\nHave you ever tried making and managing one of those janky SCSS arrays / did you ever use arrays in TypeScript?\nYou can assemble, combine, generate, theme, inherit, extend, ... your styles on both the server or client with the power of TypeScript.\n\nThis framework aims to translate all the CSS features into typescript, while adding type safety.\nYou may combine this with other libraries which add preassembled mixins, err i meant functions, and classes to help with flex, ...\n\n\u003e We do not have the resources to add every single CSS property into @acryps/styles, so we only added the properties we use for our applications.\n\u003e If something is missing, please open an issue or create a pull request and we'll try to add it asap.\n\nThis does not define any styles or mixins on its own.\n\n## Examples\nBasic styles with fixed variables.\n`style` returns a `StyleDeclaration`, which can be applied in DOM contexts by calling `.apply()` or converted to a CSS source string using `.toString()`\n\n```ts\nconst primaryColor = rgb(132, 33, 187);\nconst spacing = rem(3);\n\nstyle('ui-book') (\n\tdisplay('block'),\n\n\tchild('ui-title') (\n\t\tdisplay('block'),\n\t\tmarginBottom(spacing)\n\t),\n\n\tchild('a') (\n\t\tafter() (\n\t\t\tcontent('→'),\n\t\t\tcolor(primaryColor)\n\t\t)\n\t)\n).apply();\n```\n\nAdding a dynamic CSS variable.\nNote that `.update` will apply a new value to the DOM only on DOM contexts, while on contexts without a DOM, like node, this will just update the value definition, thus the `console.debug` will output the new color at the variable definition.\n\n```ts\nlet primaryColor;\nconst spacing = rem(3);\n\nconst layout = style('ui-book') (\n\tprimaryColor = new Variable('primary-color', rgb(132, 33, 187)),\n\n\tdisplay('block'),\n\n\tchild('ui-title') (\n\t\tdisplay('block'),\n\t\tmarginBottom(spacing)\n\t),\n\n\tchild('a') (\n\t\tafter() (\n\t\t\tcontent('→'),\n\t\t\tcolor(primaryColor)\n\t\t)\n\t)\n).apply();\n\nbutton.onclick = () =\u003e {\n\tprimaryColor.update(hsl(deg(51), percentage(100), percentage(40)));\n\n\tconsole.debug(layout.toString());\n}\n```\n\nMaking a helper, or *mixin*\n```ts\nconst primaryColor = rgb(132, 33, 187);\nconst spacing = rem(3);\n\nconst header = () =\u003e [\n\tdisplay('block'),\n\tmarginBottom(spacing)\n];\n\nstyle('ui-page') (\n\tchild('ui-book') (\n\t\tdisplay('block'),\n\n\t\tchild('ui-title') (header())\n\t),\n\n\tchild('ui-author') (\n\t\tdisplay('block'),\n\n\t\tchild('ui-title') (header())\n\t)\n).apply();\n```\n\nUsing media queries\n```ts\nconst primaryColor = rgb(132, 33, 187);\nconst spacing = rem(3);\n\nstyle('ui-book') (\n\tdisplay('block'),\n\n\tchild('ui-title') (\n\t\tdisplay('block'),\n\t\tmarginBottom(spacing),\n\n\t\tmedia(mediaType('screen').and(maxWidth(px(1000)))) (\n\t\t\tfontSize(rem(0.8))\n\t\t)\n\t),\n\n\tchild('a') (\n\t\tafter() (\n\t\t\tcontent('→'),\n\t\t\tcolor(primaryColor)\n\t\t)\n\t)\n).apply();\n```\n\n## Pitfalls / Common Issues\nSome of the specs are weird, but we try to implement them as is.\n\n### Text Decoration\nUse `textDecorationLine('underline')` instead of `textDecoration('underline')`.\n\n`text-decoration` is acutally a shorthand consisting of `text-decoration-color`, `-line`, `-style` and others.\nWhen using multiple text decorations, use `textDecorationLine('underline', 'line-through')`.\n\n### Opacity Filter\nUse `filter(opacityFilter(1))` instead of `filter(opacity(1))`.\n\nThere are two things called `opacity` in CSS: The `opacity: 1;` property, and the `opacity(1)` filter layer.\nTo prevent conflicts, we renamed the less used opacity filter.\n\n## Declaration Generator\nWe have tried using official declaration lists, like `@webref/css` or `mdn-data`.\nSadly, even the official declarations contain errors, which broke the parser (check out old commits) multiple times.\nBut there was a bigger issue: You can't automatically map css declarations to useful typescript APIs.\nThere are always a ton of declaration options for the same property, which we cannot make type safe.\nAfter long consideration, we thus chose to make them manually.\n\nThere are a lot of CSS properties, often repeated over and over again using different axis or sides (left, right, ...).\nThe properties defined in `source/declarations` are generated from `declare`, using `npm run declare`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facryps%2Fstyle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Facryps%2Fstyle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facryps%2Fstyle/lists"}