{"id":50757667,"url":"https://github.com/yumin-chen/radipan-vite-solid-ts","last_synced_at":"2026-06-11T06:32:14.130Z","repository":{"id":185603237,"uuid":"669330925","full_name":"yumin-chen/radipan-vite-solid-ts","owner":"yumin-chen","description":"Starter for Radipan + Solid.js","archived":false,"fork":false,"pushed_at":"2023-07-22T00:23:00.000Z","size":94,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-08-02T14:28:33.127Z","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/yumin-chen.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}},"created_at":"2023-07-22T00:22:37.000Z","updated_at":"2023-08-02T14:28:36.208Z","dependencies_parsed_at":null,"dependency_job_id":"84521a32-f271-478f-a308-60b1b29b32eb","html_url":"https://github.com/yumin-chen/radipan-vite-solid-ts","commit_stats":null,"previous_names":["yumin-chen/radipan-vite-solid-ts"],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/yumin-chen/radipan-vite-solid-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yumin-chen%2Fradipan-vite-solid-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yumin-chen%2Fradipan-vite-solid-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yumin-chen%2Fradipan-vite-solid-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yumin-chen%2Fradipan-vite-solid-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yumin-chen","download_url":"https://codeload.github.com/yumin-chen/radipan-vite-solid-ts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yumin-chen%2Fradipan-vite-solid-ts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34186385,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"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":"2026-06-11T06:32:14.027Z","updated_at":"2026-06-11T06:32:14.111Z","avatar_url":"https://github.com/yumin-chen.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# radipan-vite-solid-ts\n\nThis is a starter for [Radipan](https://github.com/yumin-chen/radipan), an _all-in-JS_ CSS-in-JS engine.\n\n## Getting started\n\nRadipan comes with HyperScript-compatible API, which you can import and use like `h(tag, attrs, [text?, Elements?,...])`:\n\n```javascript\nimport { h } from 'radipan';\n\nfunction App() {\n  return h('div', { css: { color: 'red' } }, 'whee!')); // Red whee!\n}\n\n```\n\nYou can also use Radipan's own `withCreate` function, which comes with a more verbose `create` method:\n\n```javascript\nimport { withCreate } from 'radipan';\n\nfunction App() {\n  return withCreate('div').create({ css: { color: 'blue' } }, 'whee!')); // Blue whee!\n}\n```\n\nYou can import HTML tags from `radipan/tags` for convenience:\n\n```javascript\nimport { div, form, input, span } from 'radipan/tags';\n\nfunction App() {\n  return form.create({css: { display: 'flex' }}, [\n    div.create({ css: { color: 'green' } }, 'green div'));\n    span.create({ css: { color: 'red' } }, 'red span'));\n    input.create({ css: { color: 'blue' }, placeholder: 'blue input' }));\n  ]);\n}\n```\n\nWhen you run `npx radipan cssgen`, it will parse all `css` props and generate the CSS code statically during build time.\n\n### Recipes\n\nRecipes are a way to define styles for different variants of a component. They offer better performance, developer experience, and composability.\n\nYou can use recipes directly within the `css` prop. A recipe consists of four properties:\n\n- `base`: The base styles for the component\n- `variants`: The different visual styles for the component\n- `compoundVariants`: The different combinations of variants for the component\n- `defaultVariants`: The default variant values for the component\n\nA recipe must have at least `variants` to be recognized as a recipe. Use a nested object to specify the variant name and the corresponding style in variants. For example:\n\n```javascript\nimport { withCreate } from 'radipan';\n\nconst Badge = ({\n  as = 'span',\n  size = 'md', // 'size' is a recipe variant\n  variant = 'solid', // 'variant' is also a recipe variant\n  children = undefined,\n  ...props\n} = {}) =\u003e {\n  return withCreate(as).create(\n    { size, variant, ...props, css: badgeRecipe },\n    children\n  );\n};\n\nconst badgeRecipe = {\n  base: {\n    borderRadius: 'xs',\n    textTransform: 'uppercase',\n  },\n  variants: {\n    size: {\n      sm: { fontSize: 'xs', padding: '0 2px' },\n      md: { fontSize: 'sm', padding: '0 var(--spacing-1x)' },\n      lg: { fontSize: 'md', padding: '1px var(--spacing-1x)' },\n    },\n    variant: {\n      solid: {\n        /* solid style CSS code */\n      },\n      subtle: {\n        /* subtle style CSS code */\n      },\n      outline: {\n        /* outline style CSS code */\n      },\n    },\n  },\n};\n\nexport default withCreate(Badge);\n```\n\n## Examples\n\nRadipan works with various frameworks and tools, such as React, Preact, Vite, Next.js, etc.\n\n- [Radipan + Vite + React + TypeScript Starter (radipan-vite-react-ts)](https://github.com/yumin-chen/radipan-vite-react-ts)\n- [Radipan + Vite + Solid + TypeScript Starter (radipan-vite-solid-ts)](https://github.com/yumin-chen/radipan-vite-solid-ts)\n\n(More coming soon...)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyumin-chen%2Fradipan-vite-solid-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyumin-chen%2Fradipan-vite-solid-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyumin-chen%2Fradipan-vite-solid-ts/lists"}