{"id":13716082,"url":"https://github.com/macaron-css/macaron","last_synced_at":"2025-07-26T03:12:39.471Z","repository":{"id":44137579,"uuid":"498197587","full_name":"macaron-css/macaron","owner":"macaron-css","description":"Compiler-augmented typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity","archived":false,"fork":false,"pushed_at":"2024-10-24T17:38:17.000Z","size":1309,"stargazers_count":783,"open_issues_count":16,"forks_count":20,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-07-19T10:43:43.902Z","etag":null,"topics":["css","css-in-js","react","solid","stitches","vanilla-extract"],"latest_commit_sha":null,"homepage":"https://macaron.js.org/","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/macaron-css.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-05-31T05:24:51.000Z","updated_at":"2025-07-15T16:50:28.000Z","dependencies_parsed_at":"2024-01-14T22:03:33.794Z","dependency_job_id":"99e35201-79b8-49ac-b598-05f97ffff624","html_url":"https://github.com/macaron-css/macaron","commit_stats":null,"previous_names":["mokshit06/macaron","mokshit06/comptime-css"],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/macaron-css/macaron","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macaron-css%2Fmacaron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macaron-css%2Fmacaron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macaron-css%2Fmacaron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macaron-css%2Fmacaron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/macaron-css","download_url":"https://codeload.github.com/macaron-css/macaron/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macaron-css%2Fmacaron/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266135651,"owners_count":23881815,"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":["css","css-in-js","react","solid","stitches","vanilla-extract"],"created_at":"2024-08-03T00:01:06.874Z","updated_at":"2025-07-26T03:12:39.447Z","avatar_url":"https://github.com/macaron-css.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/macaron-css/macaron/main/banner.png\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nCSS-in-JS with \u003cstrong\u003ezero runtime\u003c/strong\u003e, \u003cstrong\u003etype safety\u003c/strong\u003e and \u003cstrong\u003ecolocation\u003c/strong\u003e\n\u003c/p\u003e\n\n## Features\n\n\u003c!-- - Powered by [Vanilla Extract](https://vanilla-extract.style/). --\u003e\n\n- Zero runtime bundles with build time style extraction.\n- Colocation of styles and components.\n- First class Typescript support.\n- Supports both styled-components API and vanilla styling API.\n- [Stitches](https://stitches.dev/)-like variants API.\n- Out of box support for React, Solid and Qwik.\n- Integrations for [esbuild](https://esbuild.github.io/) and [Vite](https://vitejs.dev/).\n\n## Documentation\n\nFor full documentation, visit [https://macaron.js.org](https://macaron.js.org)\n\n## Example\n\n### Styled API\n\n```jsx\n// or import it from @macaron-css/solid\nimport { styled } from '@macaron-css/react';\n\nconst Button = styled('button', {\n  base: {\n    borderRadius: 6,\n  },\n  variants: {\n    color: {\n      neutral: { background: 'whitesmoke' },\n      brand: { background: 'blueviolet' },\n      accent: { background: 'slateblue' },\n    },\n    size: {\n      small: { padding: 12 },\n      medium: { padding: 16 },\n      large: { padding: 24 },\n    },\n    rounded: {\n      true: { borderRadius: 999 },\n    },\n  },\n  compoundVariants: [\n    {\n      variants: {\n        color: 'neutral',\n        size: 'large',\n      },\n      style: {\n        background: 'ghostwhite',\n      },\n    },\n  ],\n\n  defaultVariants: {\n    color: 'accent',\n    size: 'medium',\n  },\n});\n\n// Use it like a regular solidjs/react component\nfunction App() {\n  return (\n    \u003cButton color=\"accent\" size=\"small\" rounded\u003e\n      Click me!\n    \u003c/Button\u003e\n  );\n}\n```\n\n### Styling API\n\nThe styling API is the same api is vanilla-extract, but allows styles to be defined in the same file, improving the DX.\n\nCheck out [vanilla-extract docs](https://vanilla-extract.style/documentation/api/style/) for the API reference.\n\nThese functions can also be called directly inside expressions to provide a `css` prop-like API with zero-runtime cost:-\n\n```js\nimport { style } from '@macaron-css/core';\n\nfunction App() {\n  return (\n    \u003cdiv\n      class={style({\n        display: 'flex',\n        padding: '10px',\n      })}\n    \u003e\n      \u003cbutton class={style({ color: 'red' })}\u003eClick me\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Playground\n\nYou can try about these above examples at https://macaron.js.org/playground and see how macaron figures out which expressions have to be extracted and what your code would look like after being transpiled\n\n## How it works\n\n[https://macaron.js.org/docs/working/](https://macaron.js.org/docs/working/)\n\n## Acknowledgements\n\n- [Vanilla Extract](https://vanilla-extract.style)\n  Thanks to the vanilla-extract team for their work on VE, which macaron uses for evaluating files.\n\n- [Dax Raad](https://twitter.com/thdxr)\n  Thanks to Dax for helping me with this and thoroughly testing it outß, helping me find numerous bugs and improving macaron.\n","funding_links":[],"categories":["TypeScript","Libraries","Qwik"],"sub_categories":["macaron-css/macaron"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmacaron-css%2Fmacaron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmacaron-css%2Fmacaron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmacaron-css%2Fmacaron/lists"}